Something went wrong. Try again.
Browser extension: detect and subscribe to standard.site publications on ATProto
Something went wrong. Try again.
7.9 kB · 412 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413/* The first-run page, dressed as substandard.blog: paper, ink, and a red pen that disagrees. The tokens and the tilted-card treatment are lifted from web/src/styles/global.css — the two cannot share a file (one is bundled into the extension, the other into an Astro site), so this is a copy, and a change to the brand's colors belongs in both. */
:root { color-scheme: light dark; --bg: #f4f3ee; --card: #fdfcf9; --fg: #26282b; --muted: #6d6a62; --line: #dedcd3; --red: #d9482b; --gold: #e8b52a; --gold-hl: rgba(232, 181, 42, 0.35); --shadow: #dedcd3;}
@media (prefers-color-scheme: dark) { :root { --bg: #1c1d20; --card: #26272b; --fg: #e9e7e0; --muted: #96938a; --line: #3a3b40; --red: #e2593a; --gold: #d9a826; --gold-hl: rgba(217, 168, 38, 0.28); --shadow: #131417; }}
* { box-sizing: border-box;}
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg);}
::selection { background: var(--gold-hl);}
a { color: var(--fg); text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 3px;}
/* --- hero: the site's lockup, Subby pre-tilted beside the wordmark --------- */
.hero { max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; text-align: center;}
.hero-mark { display: flex; align-items: center; justify-content: center; gap: 1.25rem;}
.hero-icon { width: 5.5rem; height: 5.5rem; transform: rotate(2deg); transition: transform 0.25s ease;}
.hero-icon:hover { transform: rotate(0deg);}
.hero-wordmark { flex: 0 1 17rem; min-width: 0;}
.hero-wordmark svg { display: block; width: 100%; height: auto;}
/* The generated wordmark bakes in its ink; the theme takes it back. */.hero-wordmark text { fill: var(--fg);}
.hero-wordmark path { stroke: var(--red);}
/* Looser than the site's own h1 (1.15): this headline is a full sentence and wraps, and at that line height the wavy underline of the second line lands on the descenders of the first. */.hero h1 { margin: 1.25rem 0 0.75rem; font-size: 2.5rem; line-height: 1.35; letter-spacing: -0.01em; transform: rotate(-1deg); text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 10px;}
.hero-sub { margin: 0.75rem 0 0; color: var(--muted);}
/* --- cards ---------------------------------------------------------------- */
main { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem 2rem;}
/* Laid out by eye: each card tilts its own way and none of the shadows agree on where the light is. */main section { background: var(--card); border: 2px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.75rem;}
main section:nth-of-type(odd) { transform: rotate(-0.6deg); box-shadow: 5px 4px 0 var(--shadow);}
main section:nth-of-type(even) { transform: rotate(0.45deg); box-shadow: -4px 5px 0 var(--shadow);}
main h2 { display: inline-block; margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.3; padding: 0 0.35rem; background: linear-gradient( 100deg, transparent 0.5%, var(--gold-hl) 3%, var(--gold-hl) 98%, transparent 99.5% ); transform: rotate(-0.4deg);}
main p { margin: 0.5rem 0 0; color: var(--muted);}
main ul { margin: 0.5rem 0 0; padding-left: 1.5rem; color: var(--muted);}
main li::marker { color: var(--red);}
/* The two clicks, numbered to match the red circles in the picture. */.steps { margin: 1rem 0 0; padding-left: 1.6rem; color: var(--muted);}
.steps li { margin-top: 0.5rem;}
.steps li::marker { color: var(--red); font-weight: 700;}
/* --- the picture ---------------------------------------------------------- */
/* Framed the way the site frames its screenshots: hard border, solid misprint shadow, a lean that straightens when you look closer. */.pin-figure { margin: 1.5rem 0 0;}
.pin-art { display: block; width: 100%; height: auto; border: 2px solid var(--fg); border-radius: 0.4rem; background: var(--card); box-shadow: 5px 5px 0 var(--shadow); transform: rotate(-0.8deg); transition: transform 0.25s ease; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;}
.pin-art:hover { transform: rotate(0deg);}
.pin-figure figcaption { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.85rem; transform: rotate(-0.3deg);}
/* The drawing's own palette, so it follows the theme rather than baking one in — same arrangement as the site's architecture diagram. */.w-page { fill: var(--card); stroke: var(--line); stroke-width: 2;}
.w-bar { fill: var(--bg);}
.w-rule { fill: none; stroke: var(--line); stroke-width: 2;}
.w-glyph { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
.w-omni { fill: var(--card); stroke: var(--line); stroke-width: 1.5;}
.w-chip { fill: var(--muted); opacity: 0.35;}
.w-chip-faint { fill: var(--muted); opacity: 0.18;}
.w-dot { fill: var(--muted);}
/* The puzzle piece is drawn as one filled shape plus a bite taken out of it, so the bite has to be painted in whatever is behind the toolbar. */.w-ink { color: var(--fg);}
.w-notch { fill: var(--bg);}
.w-panel { fill: var(--card); stroke: var(--line); stroke-width: 2;}
.w-panel-shadow { fill: var(--shadow);}
.w-title { fill: var(--fg); font-size: 14px; font-weight: 650;}
.w-name { fill: var(--fg); font-size: 13.5px;}
/* The pin the reader is being sent to click, and the ones they are not. */.w-pin { color: var(--fg);}
.w-pin-off { color: var(--muted); opacity: 0.55;}
.w-hi { fill: var(--gold-hl);}
.pen { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round;}
.pen-dash { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round;}
.pen-badge { fill: var(--red);}
.pen-num { fill: var(--card); font-size: 13px; font-weight: 700; text-anchor: middle;}
/* --- the live answer ------------------------------------------------------ */
/* Unpinned is a note, still asking; pinned is the gold sticker, slapped on almost straight. Hidden until the first read lands, and absent entirely when the browser will not answer. */.pin-state { margin: 1.25rem 0 0; padding: 0.75rem 1rem; border: 2px dashed var(--line); border-radius: 0.75rem; color: var(--muted); transform: rotate(0.5deg);}
.pin-state.is-pinned { border: 3px solid var(--fg); border-style: solid; background: var(--gold); color: #26282b; font-weight: 650; transform: rotate(-0.8deg); box-shadow: 4px 5px 0 var(--shadow);}
/* --- footer: the mark's own squiggle, then the small print ---------------- */
footer { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; color: var(--muted); font-size: 0.9rem; text-align: center;}
footer p { margin: 0.35rem 0 0;}
footer::before { content: ""; display: block; width: 108px; height: 34px; margin: 0 auto 1.25rem; background-color: var(--red); mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 34"><path d="M4,16 q8,-12 16,0 t16,0 t16,0 t16,0 q8,-8 16,4 q6,8 8,14" fill="none" stroke="black" stroke-width="6" stroke-linecap="round"/></svg>') center / contain no-repeat;}
/* Filled from the manifest in welcome.ts; empty on a page opened outside the extension, where it should take no space. */.version:empty { display: none;}
@media (prefers-reduced-motion: reduce) { .hero-icon, .pin-art { transition: none; }}