Preview styles
This commit is contained in:
+278
-21
@@ -1,7 +1,10 @@
|
||||
/* 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).
|
||||
The editor preview (public/admin/preview.css) is generated from the
|
||||
hero, prose and button sections below by scripts/preview-styles.mjs.
|
||||
========================================================================== */
|
||||
|
||||
/* Fonts
|
||||
@@ -126,19 +129,174 @@ button {
|
||||
outline-color: var(--cherenkov-blue);
|
||||
}
|
||||
|
||||
/* Utilities
|
||||
========================================================================== */
|
||||
|
||||
.container {
|
||||
width: min(100% - 2 * var(--gutter), var(--content-width));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
left: 1rem;
|
||||
z-index: 100;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--galaxy-blue);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
a:hover .arrow,
|
||||
button:hover .arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@keyframes panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page hero
|
||||
========================================================================== */
|
||||
|
||||
.page-hero {
|
||||
--hero-veil: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 74, 0.72) 0%,
|
||||
rgba(0, 0, 74, 0.45) 45%,
|
||||
rgba(0, 0, 74, 0) 75%
|
||||
);
|
||||
|
||||
margin-top: calc(-1 * var(--header-height));
|
||||
padding: calc(var(--header-height) + 3rem) 0 12rem;
|
||||
color: var(--white);
|
||||
background:
|
||||
var(--grain),
|
||||
linear-gradient(180deg, rgba(0, 0, 74, 0.55) 0, rgba(0, 0, 74, 0) 10rem),
|
||||
var(--hero-veil),
|
||||
#00004a;
|
||||
border-bottom-right-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* Pages without a photo: no room needed for the figure to overlap */
|
||||
.page-hero--compact {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.breadcrumb ol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb li + li::before {
|
||||
content: "›";
|
||||
margin-right: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.breadcrumb [aria-current] {
|
||||
font-weight: 500;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* Headline: Space Grotesk medium, white on dark (D.3.4) */
|
||||
.page-hero__title {
|
||||
max-width: 24ch;
|
||||
margin: 0 0 1.25rem;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(2rem, 5vw, 3.75rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.page-hero__lead {
|
||||
max-width: 70ch;
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Photo pulled up over the hero; flat, no shadow */
|
||||
.page-figure {
|
||||
margin: -9rem 0 4rem;
|
||||
}
|
||||
|
||||
.page-figure img {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.page-figure figcaption {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Prose
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
.prose {
|
||||
padding-bottom: 5rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
body > * {
|
||||
.prose--no-image {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.prose > * {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
/* Galaxy Blue headline on light background (D.3.4) */
|
||||
body h2 {
|
||||
.prose h2 {
|
||||
margin: 3rem 0 1rem;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(1.75rem, 3vw, 2.375rem);
|
||||
@@ -148,26 +306,26 @@ body h2 {
|
||||
color: var(--galaxy-blue);
|
||||
}
|
||||
|
||||
body h2:first-child {
|
||||
.prose h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body p {
|
||||
.prose 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 {
|
||||
.prose a:not(.btn):hover,
|
||||
.prose 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 {
|
||||
.prose .highlight,
|
||||
.prose blockquote {
|
||||
margin: 2.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.375rem;
|
||||
@@ -177,6 +335,61 @@ body blockquote {
|
||||
border-left: 4px solid var(--cherenkov-blue);
|
||||
}
|
||||
|
||||
.prose blockquote p {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
font-family: var(--font-head);
|
||||
color: var(--galaxy-blue);
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
background: var(--moon-gray);
|
||||
}
|
||||
|
||||
.prose code {
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.prose table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.prose th,
|
||||
.prose td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.prose hr {
|
||||
margin: 2rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Placeholder pages: empty body until their content exists */
|
||||
.placeholder-body {
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
========================================================================== */
|
||||
|
||||
@@ -217,16 +430,60 @@ body blockquote {
|
||||
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); }
|
||||
/* Responsive page
|
||||
========================================================================== */
|
||||
|
||||
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; }
|
||||
@media (max-width: 800px) {
|
||||
/* Text spans the full width here, so keep at least 50% navy everywhere */
|
||||
.page-hero {
|
||||
--hero-veil: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 74, 0.72) 0%,
|
||||
rgba(0, 0, 74, 0.5) 100%
|
||||
);
|
||||
|
||||
padding-bottom: 8rem;
|
||||
border-bottom-right-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.page-hero--compact {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.page-figure {
|
||||
margin-top: -6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Preferences
|
||||
========================================================================== */
|
||||
|
||||
/* Windows High Contrast: drop the decorative hero background behind system text */
|
||||
@media (forced-colors: active) {
|
||||
.page-hero {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Preview frame
|
||||
========================================================================== */
|
||||
|
||||
/* There is no site header above the hero */
|
||||
.page-hero {
|
||||
margin-top: 0;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
/* Sveltia wraps the image preview in a paragraph */
|
||||
.page-figure p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user