Simple conetent + restyled
This commit is contained in:
+218
-57
@@ -1,71 +1,232 @@
|
||||
/* Entry-preview styles for the Sveltia editor, registered via the documented
|
||||
CMS.registerPreviewStyle API (bare element selectors, per the official docs
|
||||
example). This file MIRRORS the article styles 1:1 — the design tokens from
|
||||
:root and the `.prose` block in src/styles/global.css — with `.prose`
|
||||
dropped from selectors (the preview pane has no such wrapper).
|
||||
KEEP IN SYNC: when you touch `.prose` or the tokens in global.css, update
|
||||
the corresponding value here (a matching reminder sits next to `.prose`).
|
||||
Fonts: same self-hosted woff2 files the site uses, same origin. (The
|
||||
Sveltia bundle still loads its own UI fonts from jsDelivr — only the
|
||||
PREVIEW pane is CDN-free.) */
|
||||
/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */
|
||||
/* ==========================================================================
|
||||
CTAO Science Portal: content page mockup
|
||||
Colours and type follow the CTAO Brand Guidelines (April 2024).
|
||||
========================================================================== */
|
||||
|
||||
/* Fonts
|
||||
========================================================================== */
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter"; font-weight: 400 700; font-display: swap;
|
||||
src: url("/fonts/inter-latin.woff2") format("woff2");
|
||||
font-family: "Inter";
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Space Grotesk"; font-weight: 500 700; font-display: swap;
|
||||
src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
|
||||
font-family: "Space Grotesk";
|
||||
font-weight: 500 700;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* Tokens
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* tokens copied from global.css :root */
|
||||
--galaxy: #00004a;
|
||||
--moon: #f5f5f5;
|
||||
--text: #101228;
|
||||
--muted: #46536a;
|
||||
--border: #e2e5ee;
|
||||
--link: #0057c2;
|
||||
--font-body: "Inter", Arial, system-ui, sans-serif;
|
||||
--font-display: "Space Grotesk", var(--font-body);
|
||||
--fs-s: 0.9rem;
|
||||
--fs-l: 1.125rem;
|
||||
--fs-xl: 1.5rem;
|
||||
--fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
|
||||
--radius: 16px;
|
||||
/* Brand main colours (D.2.1) */
|
||||
--galaxy-blue: #00004a;
|
||||
--cherenkov-blue: #00e4d8;
|
||||
--moon-gray: #f5f5f5;
|
||||
|
||||
/* Brand secondary colours (D.2.2) */
|
||||
--white: #ffffff;
|
||||
--cosmic-azure: #007aff;
|
||||
--interstellar-indigo: #00009c;
|
||||
|
||||
/* Text */
|
||||
--text: #111111;
|
||||
--text-muted: #555555;
|
||||
/* Cosmic Azure at 84% brightness: 5.4:1 on white, 3.5:1 against body text */
|
||||
--link: #0066d6;
|
||||
|
||||
/* Type: Inter for everything, Space Grotesk for headlines (D.3) */
|
||||
--font-body: "Inter", Arial, sans-serif;
|
||||
--font-head: "Space Grotesk", Arial, sans-serif;
|
||||
|
||||
/* Layout */
|
||||
--content-width: 85rem;
|
||||
--gutter: clamp(1rem, 4vw, 2.5rem);
|
||||
--header-height: 7rem;
|
||||
--header-height-scrolled: 5rem;
|
||||
--radius-lg: 60px;
|
||||
--radius-md: 30px;
|
||||
--radius-sm: 15px;
|
||||
/* Dropdown submenus (Example, language) */
|
||||
--radius-menu: 8px;
|
||||
--transition: 0.3s ease-in-out;
|
||||
|
||||
/* Film grain tile over the hero background, also hides gradient banding */
|
||||
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Base
|
||||
========================================================================== */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-padding-top: var(--header-height-scrolled);
|
||||
}
|
||||
|
||||
/* preview shell ≈ article column */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
max-width: 70ch;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
background: var(--white);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* = global.css base heading/link rules = */
|
||||
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
|
||||
h3 { font-weight: 600; }
|
||||
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
|
||||
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
/* = global.css `.prose` rules, selectors unwrapped = */
|
||||
body { line-height: 1.65; overflow-wrap: break-word; }
|
||||
a { overflow-wrap: anywhere; }
|
||||
h1 { color: var(--galaxy); font-size: var(--fs-h2); } /* mirrors `.article h1` */
|
||||
h2 { color: var(--galaxy); margin: 44px 0 12px; font-size: var(--fs-xl); }
|
||||
h3 { color: var(--galaxy); margin: 30px 0 8px; font-size: var(--fs-l); }
|
||||
p { margin: 0 0 16px; text-wrap: pretty; }
|
||||
ul, ol { margin: 0 0 16px; padding-left: 22px; }
|
||||
li { margin: 6px 0; }
|
||||
blockquote {
|
||||
margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--galaxy);
|
||||
background: var(--moon); color: var(--text);
|
||||
body.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
|
||||
img + em, p > em:only-child { color: var(--muted); font-size: var(--fs-s); }
|
||||
hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
|
||||
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 16px; font-size: var(--fs-s); }
|
||||
th { text-align: left; font-weight: 600; color: var(--galaxy); }
|
||||
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
|
||||
thead th { border-bottom: 2px solid var(--galaxy); }
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus-visible {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Focus ring: Link blue on light backgrounds, Cherenkov Blue on dark ones */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--link);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.site-header :focus-visible,
|
||||
.page-hero :focus-visible,
|
||||
.site-footer :focus-visible {
|
||||
outline-color: var(--cherenkov-blue);
|
||||
}
|
||||
|
||||
/* Prose
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
body > * {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
/* Galaxy Blue headline on light background (D.3.4) */
|
||||
body h2 {
|
||||
margin: 3rem 0 1rem;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(1.75rem, 3vw, 2.375rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--galaxy-blue);
|
||||
}
|
||||
|
||||
body h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body p {
|
||||
margin: 0 0 1.25rem;
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Text links: colour only at rest, underline on hover and focus */
|
||||
body a:not(.btn):hover,
|
||||
body a:not(.btn):focus-visible {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
/* Cherenkov Blue fails contrast as text on white, so it is the accent bar */
|
||||
body .highlight,
|
||||
body blockquote {
|
||||
margin: 2.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--galaxy-blue);
|
||||
border-left: 4px solid var(--cherenkov-blue);
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
========================================================================== */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
height: 2.75rem;
|
||||
padding: 0 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Underline the label only: a flex container would pass it on to the arrow */
|
||||
.btn:hover,
|
||||
.btn:focus-visible {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:hover .btn__label,
|
||||
.btn:focus-visible .btn__label {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
color: var(--white);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--galaxy-blue) 0%,
|
||||
var(--cosmic-azure) 70%,
|
||||
var(--cherenkov-blue) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
body { overflow-wrap: anywhere; }
|
||||
body h3, body h4, body h5, body h6 { color: var(--galaxy-blue); font-family: var(--font-head); }
|
||||
body li { margin-bottom: 0.5rem; }
|
||||
body blockquote p { font-size: inherit; line-height: inherit; }
|
||||
body pre { padding: 1rem; overflow-x: auto; background: var(--moon-gray); }
|
||||
body code { overflow-wrap: normal; }
|
||||
body table { display: block; overflow-x: auto; border-collapse: collapse; }
|
||||
body th, body td { padding: 0.75rem; border-bottom: 1px solid #ddd; text-align: left; }
|
||||
body hr { margin: 2rem 0; border: 0; border-top: 1px solid #ddd; }
|
||||
body img { border-radius: var(--radius-sm); }
|
||||
|
||||
body { display: block; min-height: 0; max-width: 64rem; margin: 0 auto; padding: 1.5rem; }
|
||||
h1 { color: var(--galaxy-blue); font-family: var(--font-head); font-weight: 500; line-height: 1.05; }
|
||||
|
||||
Reference in New Issue
Block a user