1@use "../theme" as *;
2@use "../vars" as v;
3
4.home { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 6vw, 4rem); display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 3.5rem); }
5
6// Same "window" look as .copy-btn / code panels. The whole panel is the
7// link (button-like); hover only highlights the border + the CTA (not the
8// body text), same restraint as the global a:hover convention elsewhere.
9.home-banner { @include terminal-panel; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.65rem 1rem; color: theme(text); font-size: clamp(0.7rem, 3.4vw, 0.875rem); margin-bottom: calc(clamp(2.5rem, 6vw, 3.5rem) * -1 + 1rem); transition: border-color 0.15s ease; }
10// Counteracts the global a:hover { color: accent } - .home-banner__text has
11// no color of its own, so without this it'd inherit the accent from the
12// <a> itself and the whole line would flip color along with the border.
13.home-banner:hover { border-color: theme(accent); color: theme(text); }
14// Stays on one line even on narrow phones (the font-size clamp above does
15// most of the work); ellipsis is just the fallback for anything narrower.
16.home-banner__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
17.home-banner__tag { color: theme(accent); margin-right: 0.3rem; }
18// Same arrow convention as .tag-back__link (squeezed via letter-spacing so
19// "->" reads as one glyph), mirrored to a suffix instead of a prefix.
20.home-banner__cta { flex: 0 0 auto; font-size: 0.7rem; font-weight: 500; color: theme(subtle); transition: color 0.15s ease; }
21.home-banner__cta::after { content: "\00a0->"; letter-spacing: -0.17em; }
22.home-banner:hover .home-banner__cta { color: theme(accent); }
23
24.home-intro { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: -1.5rem; }
25.topo-icon { width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.35rem; opacity: 0.8; }
26.home-intro__bio { font-size: 1.1rem; line-height: 1.6; color: theme(text); margin: 0; }
27.home-intro__bio > :first-child { margin-top: 0; }
28.home-intro__bio > :last-child { margin-bottom: 0; }
29
30// ASCII cloud hero: full-bleed band right under the header. Canvas stays hidden
31// until clouds.js takes over (no-JS keeps the plain h1 in the intro).
32.home-hero { width: 100vw; margin-inline: calc(50% - 50vw); margin-top: -2rem; }
33.home-hero__canvas { display: none; width: 100%; height: clamp(7rem, 16vw, 11rem); }
34.home-hero--on .home-hero__canvas { display: block; }
35
36.home-media { display: flex; align-items: center; gap: 0.65rem; justify-content: flex-end; padding-right: 1rem; }
37.home-media__link { display: flex; align-items: center; justify-content: center; color: theme(text); transition: color 0.15s ease; }
38.home-media__link svg { width: 1.25rem; height: 1.25rem; }
39
40.list .section-header__rss { font-size: 0.75rem; }
41.list .section-header__rss svg { width: 0.7em; height: 0.7em; }