/* sidewalk.sh — one stylesheet. * * The page is the pane's family (Kerb v3): the pane's ground, * its slabs, its one accent, its face. A card is a flat slab with a 4 px kerb * down its left edge; the kerb is painted the slab colour unless the card has * a state. One card on this page has one: the hero, where Go was pressed, so * its kerb is blue and breathes the way the pane's current card does. Nothing * else moves. * * The face is Atkinson Hyperlegible, the extension's own, OFL, served from * fonts/ beside this file. Nothing is fetched from anywhere else. */ @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/atkinson-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/atkinson-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- the pane's palette, light then dark ---------- */ :root{ color-scheme:light; --ground:#e4e3de; --slab:#f4f3ef; --well:#ffffff; --ink:#1e1f1c; --muted:#66675f; --edge:#9d9e97; --rule:#c9c8c2; --accent:#1f4fbf; --on-accent:#ffffff; --face:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* A reading page's base, not the pane's 15.5: the column is wider and the eye is further from it. The ratios below are the pane's. */ --base:17px; --t-h1:clamp(30px,4.6vw,50px); --t-card:calc(var(--base) * 1.065); /* card title */ --t-caption:calc(var(--base) * 0.968);/* the pass line */ --t-label:calc(var(--base) * 0.871); /* buttons, footer */ --t-meta:calc(var(--base) * 0.839); /* section names, mono */ --gap:20px; --kerb:4px; } @media (prefers-color-scheme: dark){ :root{ color-scheme:dark; --ground:#26272a; --slab:#333438; --well:#2b2c30; --ink:#f0efe9; --muted:#a1a2a8; --edge:#6c6d73; --rule:#3b3c41; --accent:#8fb0ff; --on-accent:#101216; } } *{box-sizing:border-box} html{background:var(--ground)} body{ margin:0;padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 56px; background:var(--ground);color:var(--ink); font-family:var(--face);font-size:var(--base);line-height:1.5; } p,h1,h2,h3,ol,pre{margin:0} a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} :focus-visible{outline:2px solid currentColor;outline-offset:2px} img{display:block;max-width:100%;height:auto} code{font-family:var(--mono);font-size:0.94em} .page{max-width:1000px;margin:0 auto;display:grid;gap:40px} /* ---------- the top: the mark, the name, the one line ---------- */ .top{display:grid;gap:22px} .brand{display:flex;align-items:center;gap:12px} .brand .tile{width:40px;height:40px;flex:none} .brand .name{font-size:calc(var(--base) * 1.3);font-weight:700;letter-spacing:-0.01em;line-height:1} h1{font-size:var(--t-h1);font-weight:700;line-height:1.12;letter-spacing:-0.015em;max-width:16em;text-wrap:balance} /* The mark on the left, the three places to get it on the right, the line under both. The row wraps before it crowds the name: the links keep the right edge on their own line. */ .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px} /* ---------- where to get it: three links, the pane's outlined button ---------- */ /* The same box the strip's buttons wear — 1 px edge, 2 px corner, the slab — because it does the same job. The accent is not used here: on this page and in the pane it means *current*, and a place to go is not a state. */ .links{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .links a{ position:relative; display:inline-flex;align-items:center;gap:7px; padding:5px 11px;border:1px solid var(--edge);border-radius:2px; background:var(--slab);color:var(--ink);text-decoration:none; font-size:var(--t-label);font-weight:700;line-height:1.35; } .links a:hover{border-color:var(--ink)} .links svg{width:17px;height:17px;flex:none} /* On a phone the labels go to the screen reader and the glyphs carry the row. */ @media (max-width: 480px){ .links a{gap:0;padding:6px 9px} .links .label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* ---------- a slab, and its kerb ---------- */ .card{ background:var(--slab);border-radius:2px; padding:16px 16px 14px; /* 4 px always, painted the slab colour when the card has no state. */ border-left:var(--kerb) solid var(--slab); display:grid;gap:12px; } .card picture{display:block;min-width:0} .card img{width:100%;background:var(--well);border-radius:2px} .caption{font-style:italic;color:var(--muted);font-size:var(--t-caption);line-height:1.45} /* The hero is the card whose Go was pressed: the one current card on the page. Its kerb breathes in colour, never width, the pane's own 3.2 s. */ .card.current{--kerb-breath:var(--accent);border-left-color:var(--accent);animation:kerb 3.2s cubic-bezier(.45,0,.55,1) infinite alternate} @keyframes kerb{from{border-left-color:var(--kerb-breath)}to{border-left-color:color-mix(in srgb,var(--kerb-breath) 50%,var(--slab))}} @media (prefers-reduced-motion: reduce){.card.current{animation:none}} /* The still and the gif share one cell: the still paints with the page, the gif lands on top of it when it arrives. */ .hero .frame{display:grid} .hero .frame > picture{grid-area:1/1} .hero .frame img{background:transparent} .lede{max-width:62ch;font-size:calc(var(--base) * 1.06)} /* ---------- section names: the pane's group heading ---------- */ h2{font-size:var(--t-meta);font-weight:700;color:var(--muted);line-height:1.3} section{display:grid;gap:14px} section > p{max-width:62ch} /* ---------- the clips: a strip, then one slab ---------- */ .clips{gap:12px} .clips h2{margin-bottom:2px} /* The strip is the pane's settings row: outlined buttons, the one that is on filled in the accent, the way Go is. It wraps on a phone. */ .strip{display:flex;flex-wrap:wrap;gap:6px} .strip[hidden]{display:none} button{ font-family:var(--face);font-size:var(--t-label);font-weight:700; padding:5px 12px;border:1px solid var(--edge);border-radius:2px; background:var(--slab);color:var(--ink);cursor:pointer; } .strip [aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent} .clip[hidden]{display:none} /* ---------- install: one command in a well ---------- */ /* The pane's command row: a well with an edge, the words in mono, Copy at the end. A command never breaks inside a word: on a narrow screen the block scrolls sideways instead, so what is copied is what is read. */ .command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start} pre{ font-family:var(--mono);font-size:var(--t-meta);line-height:1.5; padding:10px 12px;border:1px solid var(--edge);border-radius:2px; background:var(--well);color:var(--ink); white-space:pre;overflow-x:auto; } pre code{font-size:inherit} .command button{padding:3px 9px;margin-top:6px} /* ---------- the foot ---------- */ .foot{ display:flex;flex-wrap:wrap;gap:6px 24px; padding-top:14px;border-top:1px solid var(--edge); font-size:var(--t-label);color:var(--muted); } /* A heart at the row's far right. Quiet until the pointer or focus is on it, then it says what it is for; the link itself goes to Ko-fi. */ .foot .support{margin-left:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted)} .foot .support .heart{font-size:1.05em;line-height:1} .foot .support .say{opacity:0;transition:opacity .15s} .foot .support:hover .say,.foot .support:focus-visible .say{opacity:1} .foot .support:hover,.foot .support:focus-visible{color:var(--ink)} @media (prefers-reduced-motion:reduce){.foot .support .say{transition:none}} /* ---------- privacy: one column of text ---------- */ /* Only `privacy.html` wears `.prose`; `index.html` has no shape for a page of text. These rules used to be a