/* jock.css --- the Jock visual language, as a stylesheet. * * Authored from design/style-guide.html ("Jock --- Visual Language", * Rev. 001), which is a visual SPECIMEN: 187 inline `style=` * attributes and no classes, so it could be looked at and not * linked. Every value below is read off that document rather than * from any page that approximates it --- and the pages did * approximate it. The guide's page title is 42px/1.05 with -.01em * tracking; index.html had 52px, the reference template had 30px, * and neither tracked. Body is 15/1.65 at a 64ch measure; the * template had 14.5/1.65 at 66ch. Those are now one number each, * here. * * WHAT THE GUIDE FIXES, in its own words: * * 1 Ground and ink paper, desk, ink, plate red, and the three * greys for body, notes and labels * 2 Type seven roles, each a face, a size/leading * and a treatment --- the table is §2 * 3 Page 64ch text column, 186px margin, 28px * gutter with a hairline, 1.5px head rule * 6 Code Sometype 13/1.6 behind a red 2px left * rule; inline code is .92em of its * surrounding text, black, NO background * 7 Restraint no gradients, shadows, rounded cards or * third colours; no FILLED code blocks; no * red as decoration; red under a tenth of * the marks * * Token colours for Jock listings are NOT here: they are * jock-highlight.css, vendored from the compiler repo, and a page * showing code links both. */ /* 1 --- Ground and ink ------------------------------------- */ :root{ --paper:#f2ecdd; /* the page */ --desk:#dcd7cc; /* what the page sits on */ --ink:#1a1714; /* titles and rules */ --red:#b32a1c; /* plate red --- under a tenth of it */ --red-hover:#8c1f14; --ink-body:#231f1a; /* body */ --ink-soft:#3a342c; /* inline code */ --muted:#6b6459; /* notes */ --muted-2:#8c857a; /* labels */ --hair:rgba(0,0,0,.25); --hair-soft:rgba(0,0,0,.12); --serif:'Zilla Slab',Georgia,serif; --mono:'Sometype Mono',monospace; --measure:64ch; /* §3: the text column */ --margin-col:186px; /* §3: the margin column */ --gutter:28px; /* §3 */ } *{margin:0;padding:0;box-sizing:border-box} html{background:var(--desk)} body{ background:var(--desk); color:var(--ink-body); font-family:var(--serif); -webkit-font-smoothing:antialiased; } /* 3 --- Page architecture ---------------------------------- */ .page{ max-width:900px;margin:0 auto;background:var(--paper); border-left:1px solid var(--hair);border-right:1px solid var(--hair); min-height:100vh; } main{padding:34px 40px 60px} header.bar,footer.bar{ display:flex;align-items:baseline;justify-content:space-between; padding:18px 48px; font:400 10px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--muted-2); } header.bar{border-bottom:1px solid var(--hair)} footer.bar{border-top:1px solid var(--hair)} header.bar a,footer.bar a{color:var(--muted-2);text-decoration:none} header.bar a:hover,footer.bar a:hover{color:var(--red)} header.bar nav{display:flex;gap:22px} .bar .right{margin-left:auto} /* Two page shapes. A SECTIONED page (index, philosophy, reviewers, * supporters) carries its own vertical rhythm in its sections, so * main is horizontal padding only. A PROSE page --- the generated * reference --- has no sections and needs the rhythm here. */ main{padding:0 48px} main.prose{padding:34px 48px 60px} /* §3 again: the text column beside the 186px margin column, * 28px gutter, hairline on the margin. */ /* minmax(0,1fr), not 1fr. A bare `1fr` floors at the column's * MIN-CONTENT width, so one wide table or an unwrapped listing * pushes the text column past the page and shoves the margin rail * off-screen --- which is exactly what a reference page full of * tables did. minmax(0,…) lets it shrink and the content scroll. */ .grid{ display:grid; grid-template-columns:minmax(0,1fr) var(--margin-col); gap:0 var(--gutter); } /* and the wide things inside it stay inside it */ .grid table{max-width:100%} .grid pre{max-width:100%} .notes{ border-left:1px solid var(--hair-soft);padding-left:18px; display:flex;flex-direction:column;gap:18px;padding-top:6px; } .hero{padding:44px 0 8px} /* 2 --- Type ------------------------------------------------ * Page title · Zilla 600 · 42/1.05 · -.01em tracking * Section head · Sometype 600 · 11/1.2 · .22em, upper, rule under * Body · Zilla 400 · 15/1.65 · max 64ch * Margin note · Zilla 400 · 11/1.5 · notes grey * Figure caption · Zilla 400 italic · 14/1.3 * Code · Sometype 400 · 13/1.6 · red 2px left rule * Figure value · Sometype 500 · 11/1 */ h1{ font:600 42px/1.05 var(--serif); letter-spacing:-.01em;color:var(--ink); margin-bottom:16px; } /* §3: 1.5px black under every TITLE, hairline elsewhere. The site * spells this as a
after the title; h1.ruled is * the same rule as a border, for a page with no such div. */ .rule{height:1.5px;background:var(--ink);margin-bottom:18px} h1.ruled{padding-bottom:10px;border-bottom:1.5px solid var(--ink)} /* kicker, lede and section head --- the site's own vocabulary for * the guide's §2 roles */ .kicker{ font:400 10px/1 var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--red);margin-bottom:16px; } .lede,.sub{ font:400 16px/1.65 var(--serif);color:var(--ink-soft); max-width:60ch;margin-bottom:8px; } .sub{margin-bottom:24px} h2.head{ font:600 11px/1.2 var(--mono);letter-spacing:.22em; text-transform:uppercase;color:var(--ink);margin-bottom:4px; } h2{ font:600 11px/1.2 var(--mono); letter-spacing:.22em;text-transform:uppercase;color:var(--ink); margin:38px 0 12px;padding-bottom:7px; border-bottom:1px solid var(--hair-soft); } h3{ font:500 15px/1.3 var(--mono);color:var(--ink); margin:26px 0 8px;scroll-margin-top:18px; } h3 code{font:inherit;color:var(--red)} p,li{font:400 15px/1.65 var(--serif);max-width:var(--measure)} p{margin-bottom:10px} ul,ol{margin:0 0 12px 18px} li{margin-bottom:3px} a{color:var(--red);text-decoration:none} a:hover{color:var(--red-hover);text-decoration:underline} .sub{font:400 15px/1.65 var(--serif);color:var(--muted); max-width:var(--measure);margin-bottom:24px} /* §2 margin note --- Zilla 400 11/1.5, notes grey, red numeral. * This is the SITE's meaning of .note and it is a margin note, not * a callout; the generated reference's bordered provenance block * is .meta below, which used to be called .note and collided. */ .note{font:400 11.5px/1.55 var(--serif);color:var(--muted)} .note .n{color:var(--red);font-family:var(--mono);margin-right:2px} /* A MARGINAL --- a note that sits beside the text it belongs to, * not at the top of a column. Floated rather than placed in a * grid cell for exactly that reason: a grid puts every note in * one stack, so the second one lands a screenful away from its * referent. Floating anchors each where it was written. * * margin-right of -(rail + gutter) pulls the box out into the * padding, and since the resulting margin box is 28px NARROWER * than nothing, the text column does not wrap around it --- which * is what keeps the measure honest. */ main.prose{ padding-right:calc(48px + var(--margin-col) + var(--gutter)); } .marginal{ float:right;clear:right; width:var(--margin-col); margin-right:calc(-1 * (var(--margin-col) + var(--gutter))); margin-bottom:18px; font:400 11.5px/1.55 var(--serif);color:var(--muted); } .marginal .n{color:var(--red);font-family:var(--mono);margin-right:2px} /* a quotation --- a compiler message, a spec sentence. §7 forbids * filled blocks, so this is a rule and an indent, like the code * plate but in the text face. */ blockquote{ border-left:2px solid var(--hair);padding:1px 0 1px 14px; margin:0 0 10px;max-width:var(--measure); font:400 14px/1.6 var(--serif);color:var(--ink-soft); } .marginal code{font-size:.9em} /* label --- Sometype, small caps, label grey */ .label,p.label{ font:500 10px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2);margin:10px 0 5px; } figcaption{font:italic 400 14px/1.3 var(--serif); color:var(--muted);text-align:center;margin-top:8px} table{border-collapse:collapse;margin:0 0 18px;font-size:13.5px} th{ font:500 10px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--muted); text-align:left;padding:0 18px 7px 0; border-bottom:1px solid var(--hair); } td{ padding:5px 18px 5px 0;vertical-align:top; border-bottom:1px solid var(--hair-soft); font-family:var(--serif); } /* 6 --- Code ------------------------------------------------- * "Inline code takes Sometype at 0.92em of its surrounding text, * black, with no background." §7: no FILLED code blocks. */ code{font:400 .92em var(--mono);color:var(--ink-soft)} pre.code, pre.highlight, .language-jock pre, pre.code.jock{ border-left:2px solid var(--red); padding:2px 0 2px 16px; background:none; /* §7: never filled */ font:400 13px/1.6 var(--mono); color:var(--ink-body); overflow-x:auto;white-space:pre;margin-bottom:10px; } pre code{font-size:inherit;color:inherit} /* a listing that MUST refuse is marked, and says so in the margin * rather than passing for a worked example */ pre.code[data-refuses]{border-left-color:var(--muted-2)} pre.code[data-refuses]::after{ content:'refuses %' attr(data-refuses); display:block;margin-top:6px; font:500 10px/1 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2); } /* ---- railroad diagrams --------------------------------------- * Generated by tools/grammar.py from the productions it checks * against crates/jockc/hoon/lib/parse.hoon. Geometry only --- no * script runs, because a diagram is finished before the page is * served. * * LAYOUT ONLY. Every colour, stroke and dash rides on the SVG * elements themselves as presentation attributes, so a diagram * saved or pasted somewhere without this stylesheet is still * legible rather than a field of black blobs. A CSS rule * OUTRANKS a presentation attribute, so a blanket `svg.rr rect` * here would repaint every box alike and take the * terminal-versus-production distinction with it --- which is * what the first draft of this block did. Restyling is possible; * it has to be done per class (.rr-t, .rr-n, .rr-x ...), never * across the element. * * A wide production SCROLLS rather than scaling down: shrunk to * fit, p-post's labels stop being readable, and an unreadable * diagram is worse than one you have to drag. */ .rr-wrap{overflow-x:auto;margin:1.1rem 0 1.5rem} svg.rr{display:block;max-width:none} pre.code.rr-ebnf{margin-bottom:0} @media (max-width:760px){ .grid{grid-template-columns:1fr} } @media (max-width:700px){ :root{--measure:100%} header.bar,footer.bar{padding:12px 18px} main,main.prose{padding:24px 18px 40px} h1{font-size:32px} }