for install steps
.note callout; add .note-warn for the amber one
.keys / kbd shortcut table and key caps
.code block; scrolls sideways, never the page
.legend / .dot status-dot legend, using the app's status colours
.table-scroll wrap any wide table in this
.stack vertical rhythm helper (gap between children)
.site-foot footer
COLOUR
------
Values are lifted from src/renderer/styles/tokens.css so the site and the
app are literally the same palette. Three web-only tokens are marked
`site-only`, each because the app's own value misses WCAG AA on a web page:
--text-quiet all secondary prose and small links. The app's
--text-secondary (#787774) is 4.48:1 on white — just under
the 4.5 needed — so light mode darkens it to #6b6966
(5.5:1). Dark mode keeps the app's #9b9b9b, already 6.3:1.
--link --accent (#2383e2) is 3.9:1 on white, so links take
--accent-dim in light. Dark keeps --accent.
--btn-bg/fg the primary button is neutral ink, not blue — partly for
contrast, mostly because the one blue in this palette means
"link or focus" and a filled blue button would spend it.
Everything else — surfaces, borders, radii, status dots, both fonts — is the
app's value unchanged. Run the contrast check again if you touch any of it.
============================================================================ */
/* --------------------------------------------------------------- fonts -- */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url('fonts/jetbrains-mono.woff2') format('woff2');
}
/* -------------------------------------------------------------- tokens -- */
:root {
/* Tells the browser to theme scrollbars and form controls both ways. */
color-scheme: light dark;
--bg-primary: #ffffff;
--bg-secondary: #f7f7f5;
--bg-tertiary: #f1f1ef;
--bg-hover: rgba(55, 53, 47, 0.06);
--bg-active: rgba(55, 53, 47, 0.09);
--text-primary: #37352f;
--text-secondary: #787774;
--text-muted: #9b9a97;
/* site-only: AA-safe secondary ink for prose. */
--text-quiet: #6b6966;
--accent: #2383e2;
--accent-dim: #1b6fc4;
--accent-soft: rgba(35, 131, 226, 0.09);
--accent-fg: #ffffff;
/* site-only: link colour that clears 4.5:1 on the page background. */
--link: var(--accent-dim);
--border: rgba(55, 53, 47, 0.09);
--border-subtle: rgba(55, 53, 47, 0.055);
--border-strong: rgba(55, 53, 47, 0.16);
--status-working: #337ea9;
--status-waiting: #cb912f;
--status-input: #d9730d;
--status-completed: #448361;
--status-idle: #9b9a97;
--color-warning: #cb912f;
--color-critical: #d44c47;
--shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06), 0 2px 4px rgba(15, 15, 15, 0.04);
/* site-only: neutral primary button, so blue stays a link colour. */
--btn-bg: #37352f;
--btn-fg: #ffffff;
--font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--wrap: 64rem;
--prose: 44rem;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #191919;
--bg-secondary: #202020;
--bg-tertiary: #252525;
--bg-hover: rgba(255, 255, 255, 0.055);
--bg-active: rgba(255, 255, 255, 0.085);
--text-primary: #d4d4d4;
--text-secondary: #9b9b9b;
--text-muted: #6f6f6f;
--text-quiet: #9b9b9b; /* 6.3:1 on #191919 — no adjustment needed */
--accent: #529cca;
--accent-dim: #3f87b4;
--accent-soft: rgba(82, 156, 202, 0.14);
--link: var(--accent);
--border: rgba(255, 255, 255, 0.094);
--border-subtle: rgba(255, 255, 255, 0.055);
--border-strong: rgba(255, 255, 255, 0.16);
--status-working: #529cca;
--status-waiting: #c9a227;
--status-input: #d9730d;
--status-completed: #4dab9a;
--status-idle: #6f6f6f;
--color-warning: #c9a227;
--color-critical: #ff7369;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--btn-bg: #d4d4d4;
--btn-fg: #191919;
}
}
/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* A bare URL or a long path in inline code is one unbreakable word. At 380px
that is enough to widen the page and give the whole site a sideways
scrollbar, which is how `github.com/asadev/…/advisories/new` used to do it.
`.code` blocks scroll themselves and are exempt below. */
overflow-wrap: break-word;
}
a,
code,
kbd,
samp {
overflow-wrap: anywhere;
}
/* Two places a break is wrong. A would silently rewrite the command
someone is about to paste. And a path in a table cell — `~/.claude/settings
.json` snapped across three lines — is harder to read than the sideways
scroll `.table-scroll` already provides. Both scroll instead of breaking. */
pre,
pre code {
overflow-wrap: normal;
}
.table-scroll td code,
.table-scroll th code {
overflow-wrap: normal;
white-space: nowrap;
}
img,
svg {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4 {
margin: 0;
line-height: 1.25;
font-weight: 600;
letter-spacing: -0.011em;
text-wrap: balance;
}
p,
ul,
ol,
dl,
pre,
table,
figure {
margin: 0;
}
a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
a:hover {
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
code,
kbd,
pre,
samp {
font-family: var(--font-mono);
font-size: 0.875em;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: 0;
}
/* ------------------------------------------------------------- helpers -- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding: 0 1.5rem;
}
.prose {
max-width: var(--prose);
}
.prose p + p,
.prose p + ul,
.prose ul + p {
margin-top: 0.9rem;
}
.stack > * + * {
margin-top: 1rem;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 20;
background: var(--bg-primary);
color: var(--text-primary);
padding: 0.6rem 1rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
text-decoration: none;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
.small {
font-size: 0.875rem;
color: var(--text-quiet);
}
.mono {
font-family: var(--font-mono);
}
/* -------------------------------------------------------------- header -- */
.site-head {
position: sticky;
top: 0;
z-index: 10;
background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
.site-head {
background: var(--bg-primary);
}
}
.site-head .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
min-height: 3.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
color: var(--text-primary);
text-decoration: none;
margin-right: auto;
}
.brand:hover {
text-decoration: none;
}
.brand-mark {
display: block;
color: var(--text-quiet);
}
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
font-size: 0.9rem;
}
.nav a {
display: inline-block;
padding: 0.3rem 0.55rem;
border-radius: var(--radius-sm);
color: var(--text-quiet);
text-decoration: none;
}
.nav a:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.nav a[aria-current='page'] {
color: var(--text-primary);
background: var(--bg-active);
}
/* --------------------------------------------------------------- bands -- */
.band {
padding: 4rem 0;
border-top: 1px solid var(--border);
}
.band-alt {
background: var(--bg-secondary);
}
.band-tight {
padding: 2.5rem 0;
}
.band-head {
max-width: var(--prose);
margin-bottom: 2rem;
}
.band-head h2 {
font-size: 1.5rem;
}
.band-blurb {
margin-top: 0.6rem;
color: var(--text-quiet);
}
.eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-quiet);
margin-bottom: 0.75rem;
}
/* ---------------------------------------------------------------- hero -- */
.hero {
padding: 5rem 0 3.5rem;
border-top: 0;
}
.hero h1 {
font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
letter-spacing: -0.025em;
max-width: 20ch;
}
.lede {
margin-top: 1.25rem;
max-width: 58ch;
font-size: 1.125rem;
color: var(--text-primary);
}
.hero-who {
margin-top: 0.9rem;
max-width: 58ch;
color: var(--text-quiet);
}
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
}
.cta-note {
margin-top: 1rem;
font-size: 0.85rem;
color: var(--text-quiet);
}
/* ------------------------------------------------------------- buttons -- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.05rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
font: inherit;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
background: var(--bg-hover);
text-decoration: none;
}
.btn-primary {
background: var(--btn-bg);
border-color: var(--btn-bg);
color: var(--btn-fg);
}
.btn-primary:hover {
background: var(--btn-bg);
opacity: 0.88;
}
.btn-quiet {
border-color: transparent;
background: transparent;
color: var(--text-quiet);
}
.btn-quiet:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
/* ------------------------------------------------------------ features -- */
.features {
display: grid;
gap: 3rem;
}
.feature {
display: grid;
gap: 0.75rem;
max-width: var(--prose);
}
.feature h3 {
font-size: 1.125rem;
}
.feature p {
color: var(--text-primary);
}
.feature p + p {
margin-top: 0.75rem;
}
@media (min-width: 60rem) {
.features-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem 3.5rem;
}
.features-2 .feature {
max-width: none;
}
}
/* --------------------------------------------------------------- cards -- */
.cards {
display: grid;
gap: 1rem;
/* 17.5rem lands on three columns at the page width, which is what the nine
panel cards want. Narrower and the last row is one lonely card. */
grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.card {
padding: 1.15rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-primary);
}
.card h3 {
font-size: 0.95rem;
}
.card p {
margin-top: 0.45rem;
font-size: 0.9rem;
color: var(--text-quiet);
}
/* ------------------------------------------------------- detail lists -- */
.detail {
display: grid;
grid-template-columns: minmax(8rem, max-content) 1fr;
gap: 0.35rem 1.25rem;
font-size: 0.9rem;
border-top: 1px solid var(--border-subtle);
padding-top: 0.85rem;
}
.detail dt {
color: var(--text-quiet);
}
.detail dd {
margin: 0;
}
@media (max-width: 34rem) {
.detail {
grid-template-columns: 1fr;
gap: 0.1rem;
}
.detail dd {
margin-bottom: 0.6rem;
}
}
/* --------------------------------------------------------------- lists -- */
.bullets {
padding-left: 1.15rem;
}
.bullets li + li {
margin-top: 0.4rem;
}
.bullets li::marker {
color: var(--text-muted);
}
/* ----------------------------------------------------------- checklist -- */
/* Done/not-done lists on the roadmap and the features page. The marker is a
glyph in the ::before rather than a list-style, because the two states have
to be distinguishable without colour — a green tick and a grey circle read
the same to a monochrome or colour-blind reader, so the shapes differ. */
.checklist {
list-style: none;
padding: 0;
margin: 0;
max-width: var(--prose);
}
.checklist li {
position: relative;
padding-left: 1.75rem;
}
.checklist li + li {
margin-top: 0.4rem;
}
.checklist li::before {
position: absolute;
left: 0;
font-family: var(--font-mono);
font-size: 0.9em;
}
.checklist .done::before {
content: '✓';
color: var(--status-completed);
}
.checklist .todo {
color: var(--text-quiet);
}
.checklist .todo::before {
content: '○';
color: var(--text-muted);
}
/* ---------------------------------------------------------- breadcrumb -- */
.breadcrumb {
font-size: 0.875rem;
color: var(--text-quiet);
}
.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0;
}
.breadcrumb li + li::before {
content: '/';
margin-right: 0.4rem;
color: var(--text-muted);
}
.breadcrumb a {
color: var(--text-quiet);
}
.steps {
counter-reset: step;
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.5rem;
max-width: var(--prose);
}
.steps > li {
counter-increment: step;
position: relative;
padding-left: 2.5rem;
}
.steps > li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0.1rem;
width: 1.65rem;
height: 1.65rem;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-quiet);
}
.steps h3 {
font-size: 1rem;
margin-bottom: 0.35rem;
}
.steps p + p {
margin-top: 0.6rem;
}
/* --------------------------------------------------------------- notes -- */
.note {
border: 1px solid var(--border);
border-left: 3px solid var(--border-strong);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--bg-secondary);
padding: 0.9rem 1.1rem;
font-size: 0.925rem;
max-width: var(--prose);
}
.note p + p {
margin-top: 0.6rem;
}
.note-warn {
border-left-color: var(--color-warning);
}
.note strong {
font-weight: 600;
}
/* ---------------------------------------------------------------- code -- */
.code {
overflow-x: auto;
padding: 0.9rem 1.1rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-secondary);
font-size: 0.8125rem;
line-height: 1.7;
max-width: var(--prose);
-webkit-overflow-scrolling: touch;
}
.code code {
font-size: inherit;
white-space: pre;
}
p code,
li code,
dd code,
td code {
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
padding: 0.1em 0.35em;
}
/* -------------------------------------------------------------- tables -- */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 0.925rem;
}
th,
td {
text-align: left;
padding: 0.55rem 1rem 0.55rem 0;
border-bottom: 1px solid var(--border-subtle);
vertical-align: top;
}
th {
font-weight: 600;
color: var(--text-quiet);
font-size: 0.8rem;
letter-spacing: 0.03em;
text-transform: uppercase;
border-bottom-color: var(--border);
white-space: nowrap;
}
.keys td:first-child {
white-space: nowrap;
width: 1%;
}
kbd {
display: inline-block;
min-width: 1.5rem;
padding: 0.15rem 0.4rem;
border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 0.8125rem;
line-height: 1.35;
text-align: center;
}
/* -------------------------------------------------------- status dots -- */
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
padding: 0;
margin: 0;
list-style: none;
font-size: 0.875rem;
}
.legend li {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.dot {
flex: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--status-idle);
transform: translateY(-0.05rem);
}
.dot-working {
background: var(--status-working);
}
.dot-waiting {
background: var(--status-waiting);
}
.dot-input {
background: var(--status-input);
}
.dot-done {
background: var(--status-completed);
}
.dot-idle {
background: var(--status-idle);
}
/* ------------------------------------------------------ schematic frame -- */
/* A drawn diagram of the window chrome — deliberately not a screenshot. */
.frame {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-secondary);
overflow: hidden;
max-width: 42rem;
}
.frame-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
background: var(--bg-tertiary);
overflow-x: auto;
}
.frame-tab {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: none;
padding: 0.3rem 0.65rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
color: var(--text-quiet);
white-space: nowrap;
}
.frame-tab-on {
background: var(--bg-primary);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.frame-body {
padding: 1rem 1.1rem;
font-size: 0.875rem;
color: var(--text-quiet);
background: var(--bg-primary);
}
.frame-body p + p {
margin-top: 0.5rem;
}
.frame-caption {
margin-top: 0.75rem;
font-size: 0.8125rem;
color: var(--text-quiet);
max-width: 42rem;
}
/* ---------------------------------------------------------- docs layout -- */
.docs {
display: grid;
/* minmax(0,…) not 1fr: a grid item's automatic minimum size is its
min-content, and one nowrap table cell would otherwise stretch the whole
column past the viewport and scroll the page sideways. */
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
padding: 2.5rem 0 4rem;
}
.docs > * {
min-width: 0;
}
@media (min-width: 60rem) {
.docs {
grid-template-columns: 15rem minmax(0, 1fr);
gap: 3.5rem;
align-items: start;
}
.docs-toc {
position: sticky;
top: 4.5rem;
max-height: calc(100vh - 6rem);
overflow-y: auto;
}
}
.docs-toc h2 {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-quiet);
margin-bottom: 0.6rem;
}
.docs-toc ol {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9rem;
border-left: 1px solid var(--border);
}
.docs-toc a {
display: block;
padding: 0.22rem 0.75rem;
color: var(--text-quiet);
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
}
.docs-toc a:hover {
color: var(--text-primary);
border-left-color: var(--border-strong);
}
.docs-main > section {
padding-top: 2.5rem;
margin-top: 2.5rem;
border-top: 1px solid var(--border);
scroll-margin-top: 5rem;
}
.docs-main > section:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
/* The sticky header wraps as the window narrows — one row to 590px, two to
440px, three below that — and `scroll-margin-top` has to clear whichever it
is. At 5rem a jump from the contents list on a phone parked the heading
exactly on the header's bottom edge, with the section's own rule and padding
hidden behind it. These match the measured header heights plus the same
1rem of air the wide layout gets. */
@media (max-width: 589px) {
.docs-main > section {
scroll-margin-top: 7.25rem;
}
}
@media (max-width: 439px) {
.docs-main > section {
scroll-margin-top: 9.5rem;
}
}
.docs-main h2 {
font-size: 1.375rem;
margin-bottom: 0.85rem;
}
.docs-main h3 {
font-size: 1rem;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}
.docs-main p,
.docs-main ul,
.docs-main ol,
.docs-main .code,
.docs-main .note,
.docs-main .table-scroll,
.docs-main dl {
max-width: var(--prose);
}
.docs-main p + p,
.docs-main p + ul,
.docs-main ul + p,
.docs-main p + .code,
.docs-main .code + p,
.docs-main p + .note,
.docs-main .note + p,
.docs-main p + .table-scroll,
.docs-main .table-scroll + p,
.docs-main p + dl {
margin-top: 0.9rem;
}
/* ---------------------------------------------------------- flow page -- */
/* A plain long-form page — h2/h3 and prose straight down the column, no bands.
The reset zeroes every margin, so a page that opts out of `.band` has to be
given its rhythm back explicitly or it renders as one wall of text. Used by
the features and roadmap pages, which are lists rather than a pitch. */
/* padding-top/bottom, never the shorthand: `.page` is worn alongside `.wrap`,
whose `padding: 0 1.5rem` is the only thing keeping text off the left edge on
a phone. A shorthand here wins on source order and zeroes it. */
.page {
padding-top: 2.5rem;
padding-bottom: 4rem;
}
.page > .breadcrumb {
margin-bottom: 1.25rem;
}
.page h1 {
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
letter-spacing: -0.025em;
margin-bottom: 0.75rem;
}
.page > .lede {
margin: 0 0 2rem;
max-width: 58ch;
font-size: 1.125rem;
color: var(--text-quiet);
}
.page h2 {
font-size: 1.375rem;
margin: 2.75rem 0 0.85rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.page h2:first-of-type {
margin-top: 2rem;
}
.page h3 {
font-size: 1rem;
margin: 1.75rem 0 0.6rem;
}
.page p,
.page ul,
.page ol,
.page dl,
.page .note,
.page .table-scroll {
max-width: var(--prose);
}
.page p + p,
.page p + ul,
.page p + ol,
.page ul + p,
.page ol + p,
.page p + .note,
.page .note + p,
.page .cards + p,
.page p + .cards,
.page .legend + p,
.page p + .legend {
margin-top: 0.9rem;
}
.page .cards,
.page .note {
margin-top: 1.25rem;
}
.page .cards {
max-width: none;
}
/* ----------------------------------------------------------- changelog -- */
.release {
padding-top: 2.5rem;
margin-top: 2.5rem;
border-top: 1px solid var(--border);
}
.release:first-of-type {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.release-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
.release-head h2 {
font-size: 1.375rem;
}
.tag {
display: inline-block;
padding: 0.1rem 0.5rem;
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: 0.75rem;
color: var(--text-quiet);
white-space: nowrap;
}
.change-group {
margin-top: 2rem;
max-width: var(--prose);
}
.change-group h3 {
font-size: 0.95rem;
margin-bottom: 0.6rem;
}
.changes {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.7rem;
}
.changes li {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: 0 0.9rem;
font-size: 0.95rem;
}
.changes .sha {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-quiet);
padding-top: 0.28rem;
}
@media (max-width: 34rem) {
.changes li {
grid-template-columns: 1fr;
gap: 0.1rem;
}
.changes .sha {
padding-top: 0;
}
}
/* -------------------------------------------------------------- footer -- */
.site-foot {
border-top: 1px solid var(--border);
padding: 2.5rem 0 3.5rem;
font-size: 0.875rem;
color: var(--text-quiet);
}
.site-foot .wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
align-items: baseline;
justify-content: space-between;
}
.foot-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.foot-nav a {
color: var(--text-quiet);
text-decoration: none;
}
.foot-nav a:hover {
color: var(--text-primary);
text-decoration: underline;
}