/* ========================================================================== 816am — shared design system Linked by every page as /styles.css Change a token here, it changes everywhere. Lineage: the original 816am.net (2004–2006) ran a #3D3D3D charcoal chrome over an #E2E2E1 field, cream (#fefddd) links, 9px Verdana metadata rows, and a red/orange/yellow "new comment in the last 1/4/24 hours" heat key. Those four ideas are the DNA. Everything else is rebuilt modern: real type scale, tokens, one readable column, no tables, no Flash. ========================================================================== */ /* ---- 1. Design tokens ---------------------------------------------------- */ /* Light is the default. Dark is [data-theme="dark"] on , set by AM.initTheme before first paint so there's no flash. Every color below is redefined in the dark block — nothing is hardcoded in the rules themselves. */ :root{ /* palette — the field. The original's #E2E2E1 read washed out next to near-white cards on a big screen, so the field is deeper here and the hairlines are stronger. The cards do the popping; the field should recede. */ --bg:#d2d2cc; /* page field */ --bg-2:#c3c3bc; /* recessed strips, filter bar */ --paper:#fbfbf9; /* post + comment cards */ --paper-2:#f0f0ec; /* alternating comment depth */ /* palette — the chrome */ --chrome:#3d3d3d; /* original header/footer charcoal */ --chrome-2:#4f4f4f; /* original card fill, now the meta rail */ --chrome-3:#2e2e2e; /* pressed / deep */ /* palette — ink */ --ink:#1b1b1a; /* headings, strong text on light */ --ink-soft:#55554f; /* body copy, metadata */ --ink-faint:#7b7b74; /* timestamps, disabled */ --on-chrome:#e2e1e1; /* text on charcoal */ --cream:#fefddd; /* THE link color, straight from main.css */ /* palette — the heat key (comment recency). Original: red/orange/yellow. Darkened here to hold contrast on a light field; the bright originals are used on charcoal via .post-rail / .keyline. */ --heat-1:#c62d1c; /* commented within the hour */ --heat-4:#b3651a; /* within 4 hours */ --heat-24:#87760f; /* within 24 hours */ --heat-old:#6f6f6b; /* older */ --accent:#c62d1c; /* the site's red — A.forum was plain `red` */ --line:#a6a69e; /* hairline rules */ --line-soft:#c0c0b8; /* type */ --display:"Archivo",system-ui,sans-serif; /* blunt grotesk, uppercase bars */ --body:"Hanken Grotesk",system-ui,sans-serif; /* shared with ourlocal.garden */ --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* the 9px meta rows, grown up */ /* layout */ --wrap:760px; /* the original was a 730px fixed table. This is the nod. */ --radius:5px; /* modest — pills are the garden's move, not this site's */ } /* ---- 1b. Dark mode ------------------------------------------------------- */ /* Everything drops into the charcoal family the chrome already lives in. The chrome goes darker than the cards so the bars still read as chrome rather than merging into the page. */ :root[data-theme="dark"]{ --bg:#232322; --bg-2:#2c2c2b; --paper:#333331; --paper-2:#2b2b2a; --chrome:#1a1a19; --chrome-2:#454543; --chrome-3:#111110; --ink:#e9e9e4; --ink-soft:#adada6; --ink-faint:#7f7f78; --on-chrome:#dcdcd7; /* on a dark field the heat key can go back to the original bright values */ --heat-1:#ff5a47; --heat-4:#ffa04a; --heat-24:#f2d63c; --heat-old:#95958e; --accent:#ff6a56; --line:#4a4a47; --line-soft:#3b3b39; } :root[data-theme="dark"] a:not([class]){border-bottom-color:rgba(255,106,86,.32);} :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{background:#282827;color:var(--ink);} :root[data-theme="dark"] .btn-primary{background:var(--chrome-2);} :root[data-theme="dark"] .btn-primary:hover{background:#565653;} :root[data-theme="dark"] .chip[aria-pressed="true"], :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .typeswitch button[aria-pressed="true"]{background:var(--chrome-2);} :root[data-theme="dark"] .btn-danger{border-color:rgba(255,106,86,.45);} :root[data-theme="dark"] .btn-danger:hover{background:rgba(255,106,86,.12);} /* theme toggle — sits at the end of the nav */ .theme-toggle{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; background:transparent;color:#b9b9b5; border:1px solid #5a5a5a;border-radius:3px; padding:4px 9px;cursor:pointer; } .theme-toggle:hover{color:#fff;border-color:#8a8a8a;} .theme-toggle .dot{width:8px;height:8px;border-radius:50%;background:currentColor;} :root[data-theme="dark"] .theme-toggle .dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;} /* ---- 2. Base ------------------------------------------------------------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;} /* links: cream on charcoal, red on paper. Never browser blue/purple. Scoped to unclassed anchors so buttons and nav keep their own states (a bare a:visited outranks any single class — learned on the garden site). */ a:not([class]){color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(198,45,28,.3);} a:not([class]):visited{color:var(--accent);} a:not([class]):hover{border-bottom-color:var(--accent);} /* the `.:` bullet the original put before every forum title */ .dots::before{content:".: ";color:var(--ink-faint);font-family:var(--mono);} /* uppercase micro-label — descendant of .home_heading / .general */ .label{ font-family:var(--display); font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-soft); } /* metadata rows — descendant of the 9px Verdana */ .meta{ font-family:var(--mono); font-size:11.5px;line-height:1.7;letter-spacing:.01em; color:var(--ink-soft); } .meta strong{color:var(--ink);font-weight:600;} .meta a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--line);} .meta a:hover{color:var(--accent);border-bottom-color:var(--accent);} /* ---- 3. The heat key ----------------------------------------------------- */ /* The single most 816am thing on the site. Comment counts and last-comment stamps take their color from how recently the thread moved. */ .heat-1{color:var(--heat-1);font-weight:700;} .heat-4{color:var(--heat-4);font-weight:700;} .heat-24{color:var(--heat-24);font-weight:700;} .heat-old{color:var(--heat-old);font-weight:600;} .keyline{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-family:var(--mono);font-size:11px;color:var(--on-chrome); } .keyline .swatch{display:inline-block;width:9px;height:9px;border-radius:2px;} .keyline .k1{background:#ff4b39;} .keyline .k4{background:#ff9a3c;} .keyline .k24{background:#f2d63c;} .keyline .kold{background:#9a9a95;} /* ---- 4. Buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--body);font-weight:600;font-size:15px; padding:9px 18px;border-radius:var(--radius); text-decoration:none;border:1px solid transparent;cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .12s ease; } .btn-primary{background:var(--chrome);color:var(--cream);} .btn-primary:hover{background:var(--chrome-3);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--chrome);transform:translateY(-1px);} .btn-danger{background:transparent;color:var(--accent);border-color:rgba(198,45,28,.4);} .btn-danger:hover{background:rgba(198,45,28,.08);} .btn[disabled]{opacity:.5;cursor:default;transform:none;} .btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; } /* ---- 5. Site chrome (the charcoal bars) ---------------------------------- */ .chrome{background:var(--chrome);color:var(--on-chrome);} .chrome a{color:var(--cream);text-decoration:none;} .chrome a:hover{color:#fff;text-decoration:underline;} .site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;} .site-nav .brand{ font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em; color:#fff;text-decoration:none; } .site-nav .brand span{color:var(--accent);} .site-nav .links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;font-weight:500;} .site-nav .links a[aria-current="page"]{color:#fff;text-decoration:underline;} /* the status strip — original read "Current time: … :: you are not logged in" */ .status-strip{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:7px 0;border-top:1px solid rgba(255,255,255,.13); font-family:var(--mono);font-size:11.5px;color:#b9b9b5; } .status-strip strong{color:#fff;font-weight:600;} /* The left slot cross-fades: the heat key shows on load, then hands off after a few seconds to a live announcement (or to nothing). Regulars already know what the colors mean; the key shouldn't hold a permanent seat. Both states occupy the same grid cell so the bar never changes height. */ .strip-slot{display:grid;min-height:17px;} .strip-slot > *{ grid-area:1/1; transition:opacity .45s ease; } .strip-slot > [hidden]{display:block;opacity:0;pointer-events:none;} /* Bring the key back on demand. Now that the heat colours are structural — a full-height edge on every post — people need a way to ask what they mean without waiting for a page load. Hovering the strip itself, or any post's edge (which adds .peek from JS), fades the legend back over the announcement. */ .strip-slot:hover > .keyline[hidden], .strip-slot.peek > .keyline[hidden]{opacity:1;} .strip-slot:hover > .announce:not([hidden]), .strip-slot.peek > .announce:not([hidden]){opacity:0;} @media (prefers-reduced-motion:reduce){ .strip-slot > *{transition:none;} .strip-slot > [hidden]{display:none;} .strip-slot:hover > .keyline[hidden], .strip-slot.peek > .keyline[hidden]{display:block;opacity:1;} .strip-slot:hover > .announce:not([hidden]), .strip-slot.peek > .announce:not([hidden]){display:none;} } .announce{color:var(--cream);} .announce b{color:#fff;font-weight:600;} /* Phone-only New post, sitting on the end of the "you are …" line. Desktop uses the one in the filter bar; this exists so a phone doesn't spend a whole row on a single control. */ .status-strip .strip-newpost{ display:none; margin-left:10px;padding:2px 8px; border:1px solid var(--accent);border-radius:3px; color:var(--accent);text-decoration:none;white-space:nowrap; } .status-strip .strip-newpost:hover{background:var(--accent);color:#fff;text-decoration:none;} /* ---- 6. Page head -------------------------------------------------------- */ .page-head{padding:30px 0 18px;} .page-head h1{ font-family:var(--display);font-weight:800; font-size:clamp(28px,5vw,42px);line-height:1.06;letter-spacing:-.02em;margin:0 0 8px; } .page-head p{color:var(--ink-soft);margin:0;max-width:56ch;} /* ---- 7. Filter bar ------------------------------------------------------- */ /* Everything on one line — sort, type, and New post behind its own divider at the far right. The button previously had a row to itself above the bar, which cost a whole line of vertical space to hold one control. */ .filters{ position:relative; display:flex;align-items:center;gap:4px;flex-wrap:wrap; /* Right padding reserves the button's lane so chips never run underneath. 110px = the button (~86) + its divider and gaps + the 5px inset. */ padding:5px 110px 5px 9px;margin:18px 0 16px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius); } /* Pinned rather than pushed. A flex spacer made the button the first thing to wrap once the chips nearly filled the line — and how close that is depends on font metrics, so it was luck whether it held. */ .filters-right{ position:absolute;right:5px;top:50%;transform:translateY(-50%); display:flex;align-items:center;gap:8px; } /* Outline only, no fill, so it reads as an action without competing with the heat edges below it. Vertical padding matches the bar's own, so the gap inside the border is even on all four sides. */ .filters .newpost{ font-family:var(--mono);font-size:11px; padding:3px 10px;border-radius:3px; border:1px solid var(--accent);color:var(--accent); background:transparent;text-decoration:none;white-space:nowrap; transition:background .14s ease,color .14s ease; } .filters .newpost:hover{background:var(--accent);color:#fff;} .filters .newpost:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .filters .grp{display:flex;gap:2px;align-items:center;flex-wrap:wrap;} .filters .label{margin-right:3px;font-size:10px;} .chip{ font-family:var(--mono);font-size:11px;white-space:nowrap; padding:3px 8px;border-radius:3px;border:1px solid transparent; background:transparent;color:var(--ink-soft);cursor:pointer;text-decoration:none; } .chip:hover{background:rgba(0,0,0,.05);color:var(--ink);} .chip[aria-pressed="true"],.chip.on{background:var(--chrome);color:var(--cream);} .filters .sep{width:1px;height:18px;background:var(--line);margin:0 4px;} .filters .spacer{flex:1;} /* the active "by user" pill, with a clear-x */ .userchip{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:11.5px; background:var(--chrome);color:var(--cream);padding:4px 6px 4px 10px;border-radius:3px; } .userchip a{color:var(--cream);text-decoration:none;font-weight:700;padding:0 4px;} /* ---- 8. The feed --------------------------------------------------------- */ .feed{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;} .post{ background:var(--paper); border:1px solid var(--line);border-radius:var(--radius); overflow:hidden; } .post-main{padding:16px 18px 14px;} .post h2{ font-family:var(--display);font-weight:700; font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0 0 6px; } .post h2 a{color:var(--ink);text-decoration:none;} .post h2 a:hover{color:var(--accent);} .post .byline{margin:0 0 10px;} /* type badge — link / image / text */ .ptype{ display:inline-block;vertical-align:2px;margin-right:8px; font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:2px 6px;border-radius:3px;background:var(--chrome-2);color:var(--cream); } .ptype-link{background:#2f5d7c;} .ptype-image{background:#5a5a2f;} .ptype-text{background:var(--chrome-2);} .ptype-meta{background:#6d3a2a;} /* site business — deliberately the odd one out */ /* link posts: the destination is the point, so it gets its own strip */ .post-link{ display:flex;align-items:center;gap:8px; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px; padding:8px 10px;margin:0 0 10px; font-family:var(--mono);font-size:12px; overflow:hidden; } .post-link a{color:var(--accent);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .post-link a:hover{text-decoration:underline;} .post-link .host{color:var(--ink-faint);flex:none;} /* image posts, and inline media on link posts */ .post-image{margin:0 0 10px;background:var(--bg-2);border-radius:3px;overflow:hidden;position:relative;} .post-image img, .post-image video{display:block;width:100%;height:auto;} /* In the FEED only, cap media height. Unbounded, a portrait phone photo fills a whole screen and the feed loses any scanning rhythm — you'd scroll past one post at a time. Capped, cards land in a predictable band and a tall image crops to a banner that you click through for the whole thing. The permalink page is deliberately uncapped: that's where you go to look. */ .feed .post-image{max-height:420px;} .feed .post-image img, .feed .post-image video{max-height:420px;object-fit:cover;object-position:center top;} /* Opts a feed image out of the banner crop: scale to fit instead, never upscaled past its natural size and never cut. Used for gifs and for media linked off other sites — both are whatever shape someone else made them, and a centred crop is as likely to cut the joke out as to frame it. */ .feed .post-image.post-image-fit{background:transparent;text-align:center;} .feed .post-image.post-image-fit img{ width:auto;max-width:100%;max-height:420px; margin:0 auto;object-fit:fill; } /* Marked by JS when the image is actually taller than the cap, so a crop reads as intentional rather than as a broken layout. */ .feed .post-image.cropped::after{ content:"full size ›"; position:absolute;right:0;bottom:0;left:0; padding:26px 10px 7px; font-family:var(--mono);font-size:11px;text-align:right;color:#fff; background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%); pointer-events:none; } /* embedded players (YouTube, Vimeo). These render as a facade first — thumbnail plus play button — and only swap in the real iframe when clicked. Ten video posts in the feed would otherwise pull ten copies of the player bundle before you'd scrolled to any of them. */ .embed{ position:relative;margin:0 0 10px; background:#111;border-radius:3px;overflow:hidden; aspect-ratio:16/9; } .embed img{width:100%;height:100%;object-fit:cover;display:block;} .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .embed-facade{cursor:pointer;} .embed-plain{background:var(--chrome-2);} /* Tenor sizes itself and a gif is whatever shape it is, so this gets a fixed height rather than the 16:9 box the video players use. */ .embed-tenor{aspect-ratio:auto;height:330px;background:var(--bg-2);} @media (max-width:560px){ .embed-tenor{height:260px;} } .embed-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:62px;height:44px;padding:0; border:0;border-radius:9px;cursor:pointer; background:rgba(20,20,20,.72); transition:background .15s ease,transform .15s ease; } .embed-play::after{ content:"";position:absolute;top:50%;left:50%; transform:translate(-42%,-50%); border-style:solid;border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; } .embed-facade:hover .embed-play{background:var(--accent);transform:translate(-50%,-50%) scale(1.06);} .embed-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} /* text posts + link/image commentary */ .post-body{margin:0;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere;} /* ---- markdown output ----------------------------------------------------- The only tags AM.md ever emits. Everything a member types is escaped before these rules are applied, so nothing else can appear here. */ .post-body strong,.c-body strong{color:var(--ink);font-weight:700;} .post-body em,.c-body em{font-style:italic;} .post-body del,.c-body del{opacity:.65;} .post-body code,.c-body code,.md-hint code{ font-family:var(--mono);font-size:.88em; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px; padding:1px 5px; } /* a span rather than a blockquote: the surrounding text is white-space:pre-wrap and a block element inside that fights the preserved newlines */ .post-body .quote,.c-body .quote{ display:block; border-left:3px solid var(--line);padding-left:9px; color:var(--ink-faint);font-style:italic; } .post-body a,.c-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(198,45,28,.3);} .post-body a:hover,.c-body a:hover{border-bottom-color:var(--accent);} /* the cheat sheet under every composer */ .md-hint{opacity:.85;} .md-hint b,.md-hint i,.md-hint s{font-weight:inherit;font-style:normal;text-decoration:none;} /* "edited" marker. Quiet — it's a footnote, not an accusation. */ .c-edited{ font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-faint);border-bottom:1px dotted var(--line);cursor:help; } .c-editbox{margin:8px 0 0;} .c-editbox textarea{width:100%;} .post-body.clamped{ display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden; } .post-more{font-family:var(--mono);font-size:11.5px;} /* the charcoal meta rail — where COMMENTS / LAST COMMENT / MOST RECENT BY live. This is the 2004 card footer, kept almost verbatim in content, rebuilt in layout. */ .post-rail{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--chrome-2);color:var(--on-chrome); padding:8px 18px; font-family:var(--mono);font-size:11.5px; } .post-rail a{color:var(--cream);text-decoration:none;} .post-rail a:hover{text-decoration:underline;} /* The comment count and its label are one link. The label stays plain in every state — underlining "COMMENTS:" reads as decoration rather than a target — and only the number responds. */ .post-rail a.rail-comments, .post-rail a.rail-comments:visited{color:inherit;text-decoration:none;} .post-rail a.rail-comments:hover{text-decoration:none;} .post-rail a.rail-comments:hover b{text-decoration:underline;} .post-rail strong{color:#fff;} .post-rail .rail-spacer{flex:1;} .post-rail .heat-1{color:#ff4b39;} .post-rail .heat-4{color:#ff9a3c;} .post-rail .heat-24{color:#f2d63c;} .post-rail .heat-old{color:#b0b0aa;} .post-rail .act{color:#b9b9b5;border-bottom:1px dotted #6d6d6d;} .post-rail .act:hover{color:#fff;} /* ---- 8b. Ruled feed variant (add `ruled` to .feed to enable) ------------- The default cards are honest but generic — rounded boxes floating on a field is every feed since about 2016. The original 816am was a table: dense, hairline-gridded, small type. This variant gets that skeleton back. The move that makes it ours: the heat key stops being a small coloured number in the rail and becomes a full-height edge on every post. How hot a thread is becomes the first thing you see, not something you read. ------------------------------------------------------------------------- */ .feed.ruled{ gap:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .feed.ruled .post{ background:transparent; border:0;border-radius:0; border-top:1px solid var(--line-soft); border-left:4px solid var(--line); /* overridden by the edge-* classes */ } .feed.ruled .post:first-child{border-top:0;} .feed.ruled .post-main{padding:13px 16px 11px;} .feed.ruled .post h2{font-size:18px;margin:0 0 4px;} .feed.ruled .post .byline{margin:0 0 8px;} /* the heat key, structural */ .feed.ruled .post.edge-1{border-left-color:var(--heat-1);} .feed.ruled .post.edge-4{border-left-color:var(--heat-4);} .feed.ruled .post.edge-24{border-left-color:var(--heat-24);} .feed.ruled .post.edge-old{border-left-color:var(--line);} /* At density the charcoal footer bar is too heavy — every row would carry a dark stripe. Same content, same order, just quiet. */ .feed.ruled .post-rail{ background:transparent;color:var(--ink-soft); padding:0 16px 12px; gap:0 14px; } .feed.ruled .post-rail a{color:var(--ink-soft);} .feed.ruled .post-rail a:hover{color:var(--accent);} .feed.ruled .post-rail strong{color:var(--ink);} .feed.ruled .post-rail .heat-1{color:var(--heat-1);} .feed.ruled .post-rail .heat-4{color:var(--heat-4);} .feed.ruled .post-rail .heat-24{color:var(--heat-24);} .feed.ruled .post-rail .heat-old{color:var(--heat-old);} .feed.ruled .post-rail .act{color:var(--ink-faint);border-bottom-color:var(--line);} .feed.ruled .post-rail .act:hover{color:var(--accent);} /* type badge moves off the title and becomes a quiet right-aligned marker */ .feed.ruled .ptype{ float:right;margin:2px 0 0 10px; background:transparent;color:var(--ink-faint); border:1px solid var(--line); } .feed.ruled .post.edge-1 .ptype{border-color:var(--line);} /* media sits flush to the rules rather than inset in a card */ .feed.ruled .post-image, .feed.ruled .embed{border-radius:0;margin-left:-16px;margin-right:-16px;} /* ---- 8c. List variant (add `list` to .feed instead of `ruled`) ----------- The scanning view. One row per post, thumbnail on the left, comment count on the right — the closest thing here to the original site's table, which is what 816am actually was before anyone called anything a feed. Shares the ruled variant's shell and its heat edge; the difference is that a row shows no body, no link strip and no inline mod actions. Everything is one screen's worth of "what's here and what moved", and the post page is one click away for the rest. ------------------------------------------------------------------------- */ .feed.list{ gap:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .feed.list .post{ background:transparent; border:0;border-radius:0; border-top:1px solid var(--line-soft); border-left:4px solid var(--line); } .feed.list .post:first-child{border-top:0;} .feed.list .post.edge-1{border-left-color:var(--heat-1);} .feed.list .post.edge-4{border-left-color:var(--heat-4);} .feed.list .post.edge-24{border-left-color:var(--heat-24);} .feed.list .post.edge-old{border-left-color:var(--line);} .feed.list .row{ display:flex;align-items:center;gap:11px; padding:7px 12px; text-decoration:none;color:inherit; } .feed.list .row:hover{background:var(--bg-2);} /* Fixed square, always rendered. An empty slot on a text post keeps every title on the same left edge — a ragged column of titles is the thing that makes a list stop reading as a list. */ .feed.list .row-thumb{ flex:none;width:40px;height:40px; background:var(--bg-2);border-radius:3px;overflow:hidden; } .feed.list .row-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .feed.list .row-main{flex:1;min-width:0;} /* min-width:0 or the ellipsis never fires */ .feed.list .row-title{ display:block; font-family:var(--display);font-weight:700;font-size:15px;line-height:1.35; color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .feed.list .row:hover .row-title{color:var(--accent);} .feed.list .row-meta{ display:block; font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .feed.list .row-n{ flex:none;min-width:32px;text-align:right; font-family:var(--mono);font-size:13px; } /* ---- 9. Composer / forms ------------------------------------------------- */ .panel{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:18px;margin:0 0 20px; } .panel h2{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 12px;letter-spacing:-.01em;} .field{display:block;margin:0 0 12px;} .field > span{display:block;margin:0 0 4px;} .opt{ display:inline;margin-left:6px; font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:none; color:var(--ink-faint);font-weight:400; } input[type=text],input[type=url],input[type=email],input[type=password],textarea,select{ width:100%;font-family:var(--body);font-size:15px; padding:9px 11px;border:1px solid var(--line);border-radius:3px; background:#fff;color:var(--ink); } textarea{resize:vertical;min-height:90px;line-height:1.5;} input[type=file]{font-family:var(--mono);font-size:12px;} .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;} .status{font-family:var(--mono);font-size:12px;color:var(--ink-soft);} .status.err{color:var(--accent);} .status.ok{color:#2f6b2a;} .hint{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin:4px 0 0;} /* the type switcher on the submit form */ .typeswitch{display:flex;gap:0;margin:0 0 14px;border:1px solid var(--line);border-radius:3px;overflow:hidden;} .typeswitch button{ flex:1;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; padding:9px 8px;border:0;border-right:1px solid var(--line);background:var(--bg-2); color:var(--ink-soft);cursor:pointer; } .typeswitch button:last-child{border-right:0;} .typeswitch button[aria-pressed="true"]{background:var(--chrome);color:var(--cream);} .notice{ font-family:var(--mono);font-size:12.5px;color:var(--ink-soft); background:var(--bg-2);border:1px dashed var(--line);border-radius:3px; padding:14px;text-align:center; } /* Form errors used to be a 12px status span tucked beside the submit button, which is easy to miss entirely — "it just fails with no feedback" is usually feedback nobody saw. This is a block, above the actions, in the accent. */ .formerr{ margin:0 0 12px;padding:10px 12px; font-size:14px;line-height:1.5;color:var(--accent); background:rgba(198,45,28,.07); border:1px solid var(--accent);border-left-width:3px;border-radius:3px; } :root[data-theme="dark"] .formerr{background:rgba(255,106,86,.1);} .formerr a{color:var(--accent);} .formerr[hidden]{display:none;} /* ---- 10. Comments -------------------------------------------------------- */ .comments{margin:22px 0 40px;} .comments > h2{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 12px;} .comment-composer{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:14px;margin:0 0 18px; } .c-as{margin:0 0 8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);} .comment-tree{display:flex;flex-direction:column;gap:8px;} .comment{ background:var(--paper);border:1px solid var(--line-soft);border-left:3px solid var(--line); border-radius:3px;padding:10px 12px; } .comment.c-odd{background:var(--paper-2);} .c-head{margin:0 0 4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);} .c-head strong{color:var(--ink);font-weight:700;} /* the commenter's name links to their profile, without looking like a link until you reach for it — the thread shouldn't be a field of blue */ .c-who,.c-who:visited{text-decoration:none;border:0;} .c-who:hover strong{color:var(--accent);} .c-date{color:var(--ink-faint);} .c-op{ font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em; background:var(--chrome-2);color:var(--cream);padding:1px 5px;border-radius:2px;margin-left:4px; } .c-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;} .c-actions{margin:6px 0 0;font-family:var(--mono);font-size:11px;} .c-actions a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--line);} .c-actions a:hover{color:var(--ink);} .c-actions a.c-remove{color:var(--accent);border-bottom-color:rgba(198,45,28,.35);} .c-children{margin:8px 0 0 0;padding-left:14px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;} .c-replybox{margin-top:8px;} .c-removed{color:var(--ink-faint);font-style:italic;} /* ---- 10b. About page ------------------------------------------------------ */ .about-block{margin:0 0 26px;} .about-block:last-child{margin-bottom:0;} .about-block h2{ font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em; margin:0 0 6px; } .about-block p{margin:0 0 10px;color:var(--ink-soft);max-width:62ch;} .about-block p:last-child{margin-bottom:0;} /* ---- 11. Moderation (/mod) ----------------------------------------------- */ .queue{display:flex;flex-direction:column;gap:10px;margin:0 0 30px;} .qrow{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:12px 14px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap; } .qrow .qbody{flex:1;min-width:220px;} .qrow .qacts{display:flex;gap:8px;flex-wrap:wrap;} .qrow .btn{font-size:13px;padding:6px 12px;} .code{ font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.12em; background:var(--chrome);color:var(--cream);padding:4px 10px;border-radius:3px; display:inline-block; } .code.used{background:var(--bg-2);color:var(--ink-faint);text-decoration:line-through;} /* Roll-up for lists that only ever grow and hold nothing actionable — claimed invite codes today. A native
, so it needs no JS and remembers nothing, which is right: closed is the state you want on arrival. */ .rollup{margin:0;} .rollup > summary{ font-family:var(--mono);font-size:11.5px;color:var(--ink-soft); cursor:pointer;padding:9px 12px;list-style:none; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius); } .rollup > summary::-webkit-details-marker{display:none;} .rollup > summary::before{content:"▸ ";color:var(--ink-faint);} .rollup[open] > summary::before{content:"▾ ";} .rollup > summary:hover{color:var(--ink);} .rollup[open] > summary{border-radius:var(--radius) var(--radius) 0 0;} .rollup-body{ background:var(--paper); border:1px solid var(--line);border-top:0; border-radius:0 0 var(--radius) var(--radius); /* caps the panel however long the list gets */ max-height:340px;overflow:auto; } .rollup-line{ display:flex;align-items:center;gap:9px; margin:0;padding:6px 12px; border-top:1px solid var(--line-soft); } .rollup-body > .rollup-line:first-child{border-top:0;} .rollup-line .code{font-size:11px;letter-spacing:.08em;padding:2px 7px;flex:none;} /* ---- 12. Footer ---------------------------------------------------------- */ .site-footer{ padding:18px 0 26px; display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap; font-family:var(--mono);font-size:11.5px;color:#a4a49f; } .site-footer .name{font-family:var(--display);font-weight:800;color:#fff;letter-spacing:-.01em;font-size:14px;} /* ---- 13. Responsive & accessibility -------------------------------------- */ @media (max-width:560px){ .post-rail{gap:8px 12px;} .post-rail .rail-spacer{display:none;} .site-nav{gap:10px;} .c-children{padding-left:9px;} /* a 420px cap is most of a phone screen — tighten it */ .feed .post-image{max-height:300px;} .feed .post-image img, .feed .post-image video{max-height:300px;} .feed .post-image.post-image-fit img{max-height:300px;} /* New post moves up into the status strip on phones — see .strip-newpost. Keeping it here too would mean two of the same button on one screen, and the filter bar's copy is the one that costs a whole row. */ .filters{padding-right:9px;} .filters-right{display:none;} /* List rows tighten up rather than change shape — this is the layout that suits a phone best, so it keeps both lines and just loses some air. */ .feed.list .row{padding:6px 10px;gap:9px;} .feed.list .row-thumb{width:36px;height:36px;} .feed.list .row-title{font-size:14.5px;} .status-strip .strip-newpost{display:inline-block;} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} } .visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; }