.chips > .chip table of contents: big links to the anchors of the sheets () .sheet a card with the frame and the hard shadow of a panel. Give it an id: it is the anchor target and is marked red when the page is opened by that anchor. Starts with ; a plain inside is body text .cols two sheets side by side; one column on a narrow screen .beside a drawing next to the text inside a sheet: an svg.art, then .beside-body .steps > .step numbered steps inside a sheet (). The number badge is drawn by a CSS counter. Inside a step: .step-text (the short text), then .step-art (holds an svg.art) .tell «tell the assistant»: the phrase and its copy button — macro tell(phrase) .badge the status of a feature — macro badge(kind): .ok works, .warn works with a caveat, .no not yet .points a short list; .points.yes — check marks, .points.no — crosses .facts official facts, a : the label, the value (an address goes in code.addr) .cbtn the yellow button; also a link: .note a note that catches the eye (dashed box, defined with the splash) .tip a quiet hint under a drawing or a list (defined with the strip) .act, .phrase, .cbtn, .copy-status, .addr the copy row of the landing page; inside .doc it starts from the left. A copy button needs data-copy; its status line is the nearest [data-copy-status] inside the closest [data-copy-scope] (app.js) */ .doc { max-width: 880px; margin: 0 auto; } .doc-head { padding: 16px 0 4px; } .doc-head h1 { margin: 0; font-weight: 800; font-size: clamp(38px, 6.4vw, 68px); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; } .doc-head .hl { border-width: 3px; box-shadow: 6px 6px 0 var(--ink); } .doc-head .lead { margin-top: 26px; max-width: 32em; } .doc-head .act { margin-top: 22px; } /* An inner page reads from the left: the copy row and its status are not centred as in a panel. */ .doc .act { justify-content: flex-start; } .doc .copy-status { min-height: 0; text-align: left; } .doc .copy-status:empty { margin: 0; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; font-size: 16px; } .sheet { margin-top: 36px; padding: 22px 24px 24px; scroll-margin-top: 20px; } .sheet:target { box-shadow: 8px 8px 0 var(--red); } .sheet p:not([class]) { margin: 10px 0 0; } .sheet > .art { max-width: 400px; margin: 0 auto 14px; } .sheet .tip { text-align: left; } .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 36px; } .cols > .sheet { margin-top: 0; } .beside { display: flex; align-items: center; gap: 24px; margin-top: 14px; } .beside > .art { flex: none; width: 42%; max-width: 300px; } .beside-body { flex: 1 1 0; min-width: 0; } .steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: step; display: grid; gap: 18px; } .step { counter-increment: step; display: flex; align-items: flex-start; gap: 14px; } .step::before { content: counter(step); flex: none; width: 40px; height: 40px; font-size: 21px; box-shadow: 2px 2px 0 var(--ink); } /* The first line of the text sits on the middle of the badge. */ .step-text { flex: 1 1 0; min-width: 0; margin: 0; padding-top: 8px; font-weight: 700; font-size: 16.5px; line-height: 1.35; } .step-art { flex: none; width: 44%; max-width: 300px; } .tell { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px 12px 12px; background: var(--sky); border: 2.5px solid var(--ink); border-radius: 14px; } .tell-bot { flex: none; width: 44px; } .tell-body { flex: 1 1 0; min-width: 0; } .tell-label { margin: 0 0 8px; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } .tell .act { gap: 10px 12px; margin: 0; } .tell .phrase { padding: 7px 14px; font-size: 17px; } .tell .cbtn { padding: 8px 16px; font-size: 15.5px; box-shadow: 3px 3px 0 var(--ink); } .tell .copy-status { margin-top: 6px; font-size: 14.5px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; vertical-align: middle; font-weight: 800; font-size: 13px; line-height: 1.3; white-space: nowrap; border: 2px solid var(--ink); border-radius: 999px; } .badge::before { content: ""; flex: none; font-size: 15px; line-height: 1; } .badge.ok { background: var(--mint); } .badge.ok::before { width: 5px; height: 9px; margin: 0 3px 2px 2px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .badge.warn { background: var(--yellow); } .badge.warn::before { content: "!"; } .badge.no { background: var(--gray); } /* A cross is two bars turned by 45°: drawn, so that it sits in the middle whatever the font is. */ .badge.no::before { width: 10px; height: 10px; transform: rotate(45deg); background: linear-gradient(var(--ink), var(--ink)) center / 100% 2.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.5px 100% no-repeat; } .points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .points li { position: relative; padding-left: 34px; font-weight: 700; font-size: 16.5px; line-height: 1.35; } .points li::before { content: ""; position: absolute; left: 0; top: .02em; width: 22px; height: 22px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; } .points.yes li::before { background: var(--mint); } .points.yes li::after { content: ""; position: absolute; left: 8px; top: calc(.02em + 4px); width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .points.no li::before { background: var(--red); } .points.no li::after { content: ""; position: absolute; left: 5px; top: calc(.02em + 5px); width: 12px; height: 12px; transform: rotate(45deg); background: linear-gradient(#fff, #fff) center / 100% 3px no-repeat, linear-gradient(#fff, #fff) center / 3px 100% no-repeat; } .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px 14px; margin: 14px 0 0; } .facts dt { font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } .facts dd { min-width: 0; margin: 0; } @media (max-width: 760px) { .cols { grid-template-columns: 1fr; } .sheet { padding: 18px 16px 20px; box-shadow: 6px 6px 0 var(--ink); } .sheet:target { box-shadow: 6px 6px 0 var(--red); } .beside { flex-direction: column; align-items: stretch; gap: 14px; } .beside > .art { width: 100%; max-width: 340px; margin: 0 auto; } .step { flex-wrap: wrap; } .step-art { width: 100%; max-width: 340px; margin: 0 auto; } } /* Four links of the masthead need about 470px in one line: below that, two by two, in their order. */ @media (max-width: 480px) { .mast-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; } .mast-link { text-align: center; } } @media (max-width: 420px) { .mast-link { padding: 5px 11px; } .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 10px; } } /* ==== page: landing extras ==== */ /* What the board is for: two small drawings (`_why.html`, compact) with a caption each, in the place of the lead line of the splash. No frame, no shadow and no number, so it reads as a part of the promise, never as a step. The two stay side by side on a phone too: that keeps step 1 close. */ .why { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px 28px; margin: 28px 0 0; } .why-item { min-width: 0; margin: 0; } /* A fixed width keeps the block low on a wide screen; the caption under it stays on one line. */ .why-item .art { width: 168px; } .why-item figcaption { margin-top: 6px; font-weight: 800; font-size: 17px; line-height: 1.2; } @media (max-width: 520px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .why-item .art { width: 100%; max-width: 190px; } .why-item figcaption { font-size: 16px; } } @media (prefers-reduced-motion: no-preference) { .why { animation: pop .55s cubic-bezier(.2, 1.3, .4, 1) .08s both; } } /* Panel 2 is as tall as panel 1 beside it: its two drawings sit in the middle of the height that is left. */ .p2 { display: flex; flex-direction: column; } .p2 .duo { flex: 1 1 auto; } /* The button to `/help` under the four small panels. */ .minis + .act { margin-top: 28px; } /* ==== page: connect ==== */ /* The chooser of an assistant: the status badge sits inside the chip, after the name. */ .connect .chip .badge { margin-left: 8px; } /* The quiet line under the chooser reads from the left, as the page does. */ .connect .doc-head .tip { margin-top: 16px; text-align: left; } /* «Done» of ChatGPT: a small drawing, also on a phone, where .beside stacks and would stretch it to the full width. */ .connect .beside > .art { max-width: 180px; } /* ==== page: help ==== */ /* A word of the product's interface inside the text: the label of a button as the board shows it. */ .key { padding: 0 7px 1px; font-weight: 800; white-space: nowrap; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; } /* A long label may break on a phone: each line keeps its own frame. */ .key.wrap { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* The same label on a drawn button. */ .art .t-key { font-weight: 800; font-size: 11.5px; } /* The one fork of a topic — who does it: the first person of the organization or an invited one. */ .who { display: table; margin: 30px 0 0; padding: 3px 12px 4px; font-weight: 800; font-size: 13.5px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 6px; transform: rotate(-1deg); } /* A quiet line under the text of a step. */ .sub { display: block; margin-top: 6px; font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--muted); } /* The order that must not be mixed up: a note the eye cannot miss. */ .order { display: block; margin-top: 18px; font-size: 16px; line-height: 1.35; background: var(--yellow); transform: rotate(-.5deg); } .order b { display: block; font-weight: 800; font-size: 19px; letter-spacing: -.01em; text-transform: uppercase; } /* ==== page: why ==== */ /* `/why`, the page an advertisement leads to (body class `pitch`): the splash of the landing page with a longer heading, two numbered parts, the sheets of the inner pages with titles, one button at the end. */ .pitch .splash h1 { font-size: clamp(36px, 6.2vw, 78px); line-height: .98; } .pitch .splash .lead { max-width: 24em; margin-top: 30px; } .pitch .splash .act { justify-content: flex-start; margin-top: 26px; } .pitch .need { margin-top: 12px; } /* The number of a part: the red badge of a panel, in the line of the title. A CSS counter draws it, so the heading itself stays the words alone (its Markdown version too). */ .pitch .page { counter-reset: part; } .numbered { counter-increment: part; } .numbered::before { content: counter(part); display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin: 0 .3em .1em 0; vertical-align: middle; font-size: .9em; line-height: 1; color: #fff; background: var(--red); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-8deg); } .pitch-lead { max-width: 34em; margin: -4px auto 0; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.35; } .pitch .sheet > h3 { margin: 0; font-weight: 800; font-size: clamp(20px, 2vw, 25px); line-height: 1.12; letter-spacing: -.01em; text-transform: uppercase; } .pitch #routes .duo { margin: 14px 0 4px; } .pitch #routes .duo .art { max-width: 380px; } /* A word with a hyphen that must not break on a phone. */ .nobr { white-space: nowrap; } /* A gear: a thick dashed ring. */ .teeth { stroke-width: 6; stroke-dasharray: 3.2 3; fill: none; } .final { margin-top: 20px; text-align: center; } .final .after-title { margin-top: 72px; margin-bottom: 0; } .final .act { margin-top: 18px; } @media (max-width: 760px) { .pitch-lead { font-size: 16.5px; } }
inside is body text .cols two sheets side by side; one column on a narrow screen .beside a drawing next to the text inside a sheet: an svg.art, then .beside-body .steps > .step numbered steps inside a sheet (