9af6b5aff9
Moving from the landing to a page read as changing sites: a narrow centred column on a flat background, light headings, no cards. The page now opens like the landing's hero — the same two lights, the same left edge as the logo, a bold title with the excerpt as its lead — and the body's headings are bold like every section title on the landing. The lights move into a shared mixin (ui/_lights.scss) so the hero and the pages cannot drift apart. On a page they sit on the whole <main> with `overflow: clip`, so they fade out on their own instead of ending in a hard edge right where the text starts, and `clip` rather than `hidden` keeps the sticky side column working. A side column keeps a page from being a dead end: "keep reading" cards for the other pages, its own category first, and a card to get in touch, both on the landing's card surface. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
1.3 KiB
SCSS
54 lines
1.3 KiB
SCSS
// The two soft lights behind the top of a page, shared by the landing's hero
|
|
// and the content pages so moving from one to the other does not feel like
|
|
// changing sites.
|
|
//
|
|
// Lights rather than an image: nothing to download, and nothing that dates the
|
|
// page when the brand shifts. `isolate` keeps the negative z-index inside the
|
|
// element instead of behind the page background.
|
|
//
|
|
// `$overflow: clip` for a tall element with sticky children: `hidden` makes the
|
|
// element a scroll container, and `position: sticky` inside one stops
|
|
// following the page.
|
|
@mixin glow($overflow: hidden) {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: $overflow;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: -1;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(80px);
|
|
}
|
|
|
|
&::before {
|
|
top: -14rem;
|
|
left: 50%;
|
|
width: 64rem;
|
|
height: 38rem;
|
|
transform: translateX(-58%);
|
|
opacity: 0.5;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
var(--pi-color-primary),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
&::after {
|
|
top: 4rem;
|
|
right: -8rem;
|
|
width: 26rem;
|
|
height: 26rem;
|
|
opacity: 0.35;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
var(--pi-color-accent),
|
|
transparent
|
|
);
|
|
}
|
|
}
|