{ "id": "v1-wl-232b-dc", "long_id": "v1.weblogs-2000s.blog.s02.p03.t02.u11.dc", "name": "Three-column group weblog, 2005", "era": { "slug": "weblogs-2000s", "code": "wl", "name": "Weblogs", "years": [ 2002, 2007 ], "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "compact", "summary": "A group weblog as published between 2002 and 2007: a fixed cream sheet outlined with dotted lines on a khaki page, the brand (mark and site name) beside a search box, a single line of text links for navigation, and three columns below it, with the dated entries in the middle and a narrow column of link lists on each side. Everything is very small Verdana (10px and 11px, set open) under large regular-weight Tahoma titles, with square corners, flat olive and sage fills and operating-system form controls. It was the usual build of busy multi-author link blogs, where the side columns carried the authors' projects, the blogroll and the small \"made with\" labels.", "url": "https://chrono.skin/s/v1-wl-232b-dc", "preview_url": "https://chrono.skin/s/v1-wl-232b-dc/specimen.html", "files": { "STYLE.md": "# Three-column group weblog, 2005\n\n## Summary\n\nA group weblog as published between 2002 and 2007: a fixed cream sheet outlined with dotted lines on a khaki page, the brand (mark and site name) beside a search box, a single line of text links for navigation, and three columns below it, with the dated entries in the middle and a narrow column of link lists on each side. Everything is very small Verdana (10px and 11px, set open) under large regular-weight Tahoma titles, with square corners, flat olive and sage fills and operating-system form controls. It was the usual build of busy multi-author link blogs, where the side columns carried the authors' projects, the blogroll and the small \"made with\" labels.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (850px) wide, centred, in `--color-canvas` on `--color-page`, outlined on all four sides with a 1px `--color-border` line and standing `--space-5` clear of the top of the window. No text is ever placed on the page outside the sheet.\n- Order from the top, all inside the sheet: `.ds-nav` (a thin `--fill-bar-alt` utility strip with a tagline left and the time of the last update right; then the site name and its one-line tagline at the left with the search box and its button at the right; then one line of text links divided by short vertical strokes, ruled above and below), the `.ds-hero` band across the whole sheet, `.ds-page__columns`, and the `.ds-footer`. There is no navigation bar: navigation is words, not blocks.\n- `.ds-page__columns` holds three columns in this order: `.ds-sidebar.ds-sidebar--left` (`--size-side` 150px), `.ds-page__main` (the rest, about 458px of text) and `.ds-sidebar.ds-sidebar--right` (150px again). The middle column is ruled off by a 1px `--color-border` line on each side with `--space-6` of padding inside the lines and `--space-5` outside them. The left column carries link lists (projects, categories, rules, the copyright note); the right column carries the boxed call to subscribe, the blogroll and the small outlined labels. Never drop a column and never move both to one side.\n- The middle column is a single stack. A day's entries open with a `.ds-day` strip in `--fill-bar`; entries (`.ds-post`) and other blocks (`.ds-page__section`) are closed by a 1px `--color-border` rule with `--space-6` under it. `.ds-page__label` is the small bold caption above a block. Blocks in a side column are closed by a 2px `--color-border-strong` rule.\n- Inner pages (one entry, the suggestion form, the archives, the about page, a listing or settings page of an application) keep the sheet, the line of text links, all three columns at the same widths and the footer. The hero band is not used. The middle column opens with the `.ds-breadcrumb` as a plain 10px line, then `.ds-page-header` (22px title, one 10px line, one button at the right, a 2px rule below), then in this order when present: the `.ds-stats` line, `.ds-tabs` with the table or list in `.ds-tabs__body`, `.ds-pagination`, and last the form. On an entry page the order is the entry text, follow-up links, the `.ds-comments` thread and a short comment form. Tabs stand in the middle column under the page header, never in the header. The side columns carry lists that belong to the page (years, writers, neighbouring entries, a short note).\n- Views: the specimen is one small group weblog with five views. `front` is the front page: the hero band, the day strip with the newest entry in full, earlier entries as a dated list, the grid of shelves, and both link columns at full length. `entry` is one entry with its comments and a short comment form. `suggest` is the form readers use to send a link, under the notices that answer it. `archives` lists what readers sent in: figures, tabs over the table of months, pagination, the dialog that withdraws your own suggestion, and an empty shelf. `about` is the panel on the four writers and the linking policy. The line of links goes to front, suggest, archives and about; entries are reached from titles, comment counts and the side columns.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs, side-column rows and the small labels; `--space-2` 2px is the padding of the utility strip, table cells, tabs and title strips and the gap between a label and its field; `--space-3` 5px is list row padding, the padding of the link line, the gap between buttons and the padding under a page header; `--space-4` 8px is the padding of panels, notices, grid cells and the hero, and the gap between a date and its entry; `--space-5` 12px is the gap between paragraphs, the padding around a side-column block and the top padding of the columns; `--space-6` 16px is the side padding of the sheet, the padding of the middle column and the gap between blocks; `--space-7` 24px is list and quotation indent and the bottom padding of the columns.\n- Fixed sizes: `--size-date` 64px is the date column of a list, `--size-field` 200px a text input, `--size-search` 130px the search box, `--size-num` 64px a numeric table column, `--size-dialog` 320px a dialog, `--size-chip` 66px one small outlined label.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--color-page` #ddddbb is the khaki page; the sheet (`--color-canvas`, `--color-surface`) is cream #eeeedd, with `--color-surface-alt` #e8e8d0 for alternate rows, the empty state and the small labels, and `--color-surface-strong` #ddddbb for panel and form title strips and idle tabs.\n- `--color-bar` #777744 (olive) with `--color-bar-text` #ffffee is the day strip, the table head, the current tab and the dialog title, and the dialog's 2px frame; `--color-bar-alt` #bbcc99 (pale sage) with `--color-bar-alt-text` #182d04 is the utility strip on top of the sheet; `--color-inverse` #182d04 with #ccccaa text is the footer.\n- `--color-text` #777744 is body text, `--color-text-muted` #808050 meta lines, `--color-heading` #182d04 titles, side-column titles and the current navigation word, `--color-heading-alt` #99aa77 sub-headings and code.\n- `--color-link` #006d00, hover #182d04, visited and quiet #99aa77, active #cc6600.\n- Lines are `--color-border` #ccccaa, `--color-border-strong` #99aa77 (hero outline, notices, the 2px rules) and `--color-border-muted` #ddddbb. Block fills are #d0e0a8, #ddddbb, #cccc99 and #ffffee; fill-1 is also the hero band and the boxed side-column block. Buttons are sage #bbcc99 and khaki #ddddbb.\n- Status: `--color-success` #006d00, `--color-warning` #cc6600, `--color-danger` #cc0000, used only as the text and 1px outline of status labels on `--color-surface` and as the lettering of a destructive button; `--color-accent` is the olive #777744 with #ffffee text (count badge, current page number, list bullets).\n- `--font-body` and `--font-ui` are Verdana, Arial, sans-serif at `--text-base` 11px with `--line-body` 1.7; `--text-small` 10px is meta, both side columns and tables, `--text-ui` 11px buttons and navigation, `--text-large` 12px the hero lead and the figures of the stats line.\n- `--font-heading` is Tahoma, \"Trebuchet MS\", \"Lucida Grande\", Verdana, set regular (`--weight-heading` and `--weight-display` 400): `--text-display` and `--text-h1` 22px for the site name, entry titles and page titles, `--text-h2` 16px for sub-headings and the hero title, `--text-h3` 12px. Large light titles over very small text are the look.\n- `--weight-bold` 700 is kept for labels, strips, list titles and emphasis. Nothing is uppercased or tracked (`--ui-transform` none, `--heading-tracking` 0).\n- Links carry no underline (`--link-decoration` and `--link-decoration-quiet` none) and gain one on hover; the three footer links are the only ones underlined at rest, because they share the colour of the footer text.\n- Every box outline and rule is a `--border-width` 1px `--border-style` dotted line; 2px rules are `calc(var(--border-width) * 2)`. `--border-width-strong` is not used by this layout. The short strokes between navigation words, stats and footer links, the tab line and the dialog frame are written `solid`, and control bevels `outset` and `inset`, because `--border-style` holds one style only.\n- Bars, buttons and panels are flat: `--fill-bar`, `--fill-bar-alt`, `--fill-button` and `--fill-panel` are their plain palette colour. `--fill-page` lays a fine dot screen (one dot in a 3px tile) over `--color-page`, so the flat sheet stands out from it. All radii are 0 and all shadows `none`; `--focus-ring` is a 1px dashed outline; `--transition` is none.\n\n- Dashed and tiled: `--border-style` dashed at `--border-width` 1px for every outline; `--border-width-strong` 3px is the rule on top of a sheet or a hero.\n- `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are scanlines: every third pixel row is 12% darker. `--fill-page` is an 8px check over `--color-page`. Controls and panels are flat.\n- Panels and the dialog stand on a hard 2px and 4px offset in `--color-border` (`--shadow-panel`, `--shadow-dialog`), without blur. Tags and badges are eased by `--radius-pill` 6px; every other radius is 0.\n- `--focus-ring` is a 1px dotted outline; `--transition` none.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour and base type. Everything goes in `.ds-page__frame`; the three columns in `.ds-page__columns` with `.ds-page__main` between the two sidebars. `.ds-page__section` is a block of the middle column closed by a rule (`--last` drops it); `.ds-page__label` is its caption.\n- `.ds-view`: one screen of the example site. The specimen holds its views side by side in the markup and shows one at a time: the view named in the address, or the `.ds-view--home` view when none is named. In a real project each view is a page of its own; drop the class there.\n- `.ds-brand`: the site's mark and name, at the left of the header, above its one-line tagline and opposite the search box; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button of this layout (a square with the 2px `outset` border in the button fill, `--fill-button` over `--color-button`, `--color-button-text` for the drawing, `--radius-control`, `--shadow-control`), 1.2 times `--text-display` on a side and never less than twice `--text-base` (written with `max()` over the two tokens, so a set with a small display size still gets a legible mark), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at `--text-display` (22px here) with `--weight-display`, `--display-tracking` and `--heading-transform`, in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo; keep the classes and swap the text and the drawing.\n- `.ds-nav`: site header, written once above the views. `.ds-nav__strip` is the sage utility line; `.ds-nav__head` holds the `.ds-brand` over `.ds-nav__tagline`, and the `.ds-nav__search` form at the right; `.ds-nav__links` is the line of `.ds-nav__item` entries, each a lowercase `.ds-nav__link`. The current item is bold, in the heading colour, not a block: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href` (an entry counts as the front page).\n- `.ds-breadcrumb`: plain 10px line at the top of the middle column of an inner page: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`>`), ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome band, once, under the navigation line and across all three columns: a `--color-fill-1` box with a 1px outline, `.ds-hero__main` with `.ds-hero__title` (16px) and one `.ds-hero__lead` line at the left, and `.ds-hero__actions` (one button over one text link) at the right. One or two lines high; never taller and never inside a column.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: `.ds-page-header__main` holds the `.ds-page-header__title` (22px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A 2px `--color-border-strong` rule closes it.\n- `.ds-stat`: one summary figure written as running text: a bold `.ds-stat__value` (12px, heading colour) followed on the same line by its `.ds-stat__label` (10px, muted). Three to five sit in a `.ds-stats` line divided by short vertical strokes and closed by a rule. It is the era's \"site statistics\" sentence; do not stack the number over the label and do not box the figures.\n- `.ds-day`: the olive strip with the date that opens a day's entries.\n- `.ds-post`: one entry: a `.ds-prose` body and a `.ds-post__meta` line (author, time, permalink, comments separated by `|`).\n- `.ds-comment`: one comment in the thread under an entry, inside a `.ds-comments` list: a `.ds-comment__text` paragraph over a small `.ds-comment__meta` line (name, time, and the edit and delete links on your own). `.ds-comment--author` marks a reply by the site's writer: a `--color-surface-alt` tint. Comments are divided by 1px `--color-border-muted` lines.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists with olive markers, `code`, and `blockquote` indented on both sides with no rule. Use it for entry bodies and panel bodies.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the pale meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: bevelled push button, bold, for the main action. `.ds-button--secondary` is lighter with normal weight. `.ds-button--danger` is the destructive action: the same button with its label in `--color-danger`, never filled red. `disabled` or `is-disabled` fades it; `is-active` flips the bevel. Group with `.ds-buttons`.\n- `.ds-form`: the suggestion form, unboxed: a `.ds-form__title` strip, then `.ds-form__row` blocks with a bold `.ds-form__label` above its control. `.ds-form__cols` puts two short rows side by side. Controls take `.ds-form__input` (`--wide` full width, `--auto` for selects, `--search` for the header box); `is-invalid` plus `.ds-form__error` marks a validation error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` is the button row.\n- `.ds-table`: data table at 10px with no outline: olive `th` row, rows divided by `--color-border-muted`, a 2px rule under the last row, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row.\n- `.ds-list`: list of entries. Each `.ds-list__item` is two parts side by side: `.ds-list__date` in a 64px column, and `.ds-list__body` with a bold `.ds-list__title` link, a `.ds-list__excerpt` and a `.ds-list__meta` line. Items are divided by a `--color-border-muted` rule.\n- `.ds-panel`: 1px outlined box with a `.ds-panel__title` strip and a `.ds-panel__body`. Use it sparingly.\n- `.ds-grid`: one row of four joined `.ds-grid__cell` boxes with flat tints (`--2`, `--3`, `--4` select the other fills), sharing 1px lines and with no gap between them; each has a bold 11px `.ds-grid__title` and a `.ds-grid__text`. For category shelves and short indexes.\n- `.ds-tabs`: row of small `.ds-tabs__tab` blocks on a 2px line in the bar colour; `is-current` is filled with the bar. Content goes in `.ds-tabs__body`.\n- `.ds-badge`: small square olive count. `.ds-badge--alt` is a bare coloured word (\"new\"); `.ds-badge--tag` is an outlined category tag. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a cream label with a 1px outline and a bold word, both in the status colour.\n- `.ds-sidebar`: one of the two side columns at 10px; add `.ds-sidebar--left` or `.ds-sidebar--right`. Each `.ds-sidebar__block` has a plain bold `.ds-sidebar__title` ending in a colon and a `.ds-sidebar__list` of `.ds-sidebar__item` rows with `.ds-sidebar__link` and optional `.ds-sidebar__count`; `.ds-sidebar__text` is a paragraph. `.ds-sidebar__box` with `.ds-sidebar__box-text` is the tinted, outlined, centred box for one call to action; `.ds-sidebar__chips` is a wrapping set of `.ds-sidebar__chip` labels, the small outlined \"feed\" and \"valid markup\" buttons of the time.\n- `.ds-notice`: one-line message on `--color-notice`, ruled above and below, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rules. Stack several in `.ds-notices`, which keeps them `--space-5` apart so that two ruled messages never read as one box.\n- `.ds-pagination`: one line: \"newer\" at the left (`.ds-pagination__item--prev`), \"older\" at the right (`.ds-pagination__item--next`), page numbers between, all plain `.ds-pagination__link` words. `is-current` is an olive block; `is-disabled` is faded.\n- `.ds-dialog`: a small window with a 2px frame in the bar colour, an olive `.ds-dialog__title` bar, `.ds-dialog__body`, `.ds-dialog__text` and centred `.ds-dialog__actions`. It sits in the page flow, optionally on `.ds-dialog__backdrop`. No shadow.\n- `.ds-empty`: pale outlined box with a centred `.ds-empty__text` and one secondary button.\n- `.ds-footer`: dark strip closing the sheet, centred: `.ds-footer__links` with `.ds-footer__item` entries holding underlined `.ds-footer__link` words divided by strokes, then one `.ds-footer__text` line.\n- `ds-avatar`: a small square with initials beside a commenter name.\n- `ds-accordion`: a sidebar list that opens and closes, a details element whose summary holds the block title.\n\n## Never\n\n- `block-gap <= 24px`: blocks sit one rule apart, never further.\n- `content-width <= 850px`: a fixed centred sheet; the page does not stretch with the window.\n- `font-size <= 22px`: the largest text is a 22px regular title.\n- `font-size >= 10px`: meta text stops at 10px.\n- `font-families <= 3`: Verdana, Tahoma for titles and a monospace for code.\n- `line-height >= 1.6`: the small text is set open, at 1.7.\n- `line-height <= 1.8`: and never looser than the references' 1.8.\n- `letter-spacing <= 0px`: nothing is tracked in this layout.\n- `uppercase-text <= 0%`: navigation, titles and labels are lowercase or sentence case.\n- `underlined-links <= 15%`: links are told by colour; only footer links are underlined at rest.\n- `border-radius <= 6px`: only tags and badges are eased; every block is square.\n- `box-shadow-blur <= 0px`: the offset under a panel is hard, never soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 20%`: only bars and the footer strip carry scanlines; tints are flat.\n- `border-width <= 3px`: lines are 1px, bevels 2px, the top rule 3px.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new boxed block copies `.ds-panel` (1px `--color-border` outline, `--color-surface-strong` title strip, `--space-4` padding), a new row type copies `.ds-list__item` (a narrow fixed column, then the body, a muted rule above), a new strip copies `.ds-day`, a new side-column block copies `.ds-sidebar__block` and goes in the left column if it is a list and the right if it is a box. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`; if a size is missing, take the nearest step of the scale. Keep the three columns, keep text at 10px to 22px, corners square, fills flat, and prefer a line of words divided by strokes to a row of boxes.\n", "components.css": "/* Layout tokens (structure part). A three-column group weblog, 2002 to 2007:\n a link column on each side of the entries. */\n:root {\n --size-page: 850px;\n --size-side: 150px;\n --size-date: 64px;\n --size-field: 200px;\n --size-search: 130px;\n --size-dialog: 320px;\n --size-num: 64px;\n --size-chip: 66px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 13px;\n --space-7: 19px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 0 var(--space-7);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet: a fixed centred box outlined all round, standing clear of the window top. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n/* Three columns: links, entries, links. The middle one is ruled off on both sides. */\n.ds-page__columns {\n display: flex;\n align-items: stretch;\n padding: var(--space-5) var(--space-6) var(--space-7);\n}\n.ds-page__main {\n flex: 1;\n min-width: 0;\n padding: 0 var(--space-6);\n border-style: var(--border-style);\n border-color: var(--color-border);\n border-width: 0 var(--border-width);\n}\n.ds-page__section {\n margin: 0 0 var(--space-6);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-page__label {\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text-muted);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- nav: a utility strip, the wordmark with the search box, a line of text links ---------- */\n.ds-nav {\n margin: 0;\n}\n.ds-nav__strip {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6) var(--space-4);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so every token set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: max(calc(var(--text-display) * 1.2), calc(var(--text-base) * 2));\n height: max(calc(var(--text-display) * 1.2), calc(var(--text-base) * 2));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: calc(var(--border-width) * 2) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n margin: 0 var(--space-6);\n padding: var(--space-3) 0;\n list-style: none;\n border-style: var(--border-style);\n border-color: var(--color-border);\n border-width: var(--border-width) 0;\n line-height: var(--line-heading);\n}\n.ds-nav__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) solid var(--color-text-muted);\n}\n.ds-nav__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__link {\n padding: 0 var(--space-1);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item. One selector per view marks it; with no view named, the home item. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#front\"],\n.ds-page:has(#front:target) .ds-nav__link[href=\"#front\"],\n.ds-page:has(#entry:target) .ds-nav__link[href=\"#front\"],\n.ds-page:has(#suggest:target) .ds-nav__link[href=\"#suggest\"],\n.ds-page:has(#archives:target) .ds-nav__link[href=\"#archives\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb: a plain line at the top of the middle column ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- hero: a welcome band across all three columns ---------- */\n.ds-hero {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-7);\n margin: var(--space-5) var(--space-6) 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__main {\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n flex: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-3);\n border-bottom: calc(var(--border-width) * 2) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n font-size: var(--text-small);\n}\n\n/* ---------- stats: one ruled line of figures, the number and its word side by side ---------- */\n.ds-stats {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n margin: 0 0 var(--space-5);\n padding: var(--space-3) 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat {\n padding: 0 var(--space-5);\n border-left: var(--border-width) solid var(--color-text-muted);\n line-height: var(--line-heading);\n}\n.ds-stat:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-stat__value {\n font-family: var(--font-body);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- day strip, post and prose ---------- */\n.ds-day {\n margin: 0 0 var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-post {\n margin: 0 0 var(--space-6);\n padding: 0 0 var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-post__meta {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n color: var(--color-heading-alt);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-family: var(--font-body);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-7);\n}\n.ds-prose li::marker {\n color: var(--color-accent);\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n color: var(--color-heading-alt);\n}\n/* A quoted passage is indented on both sides, with no rule. */\n.ds-prose blockquote {\n margin: 0 var(--space-7) var(--space-5);\n padding: 0;\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- comments: the thread under an entry ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-comment:first-child {\n border-top: 0;\n}\n/* A reply by one of the writers is tinted. */\n.ds-comment--author {\n background: var(--color-surface-alt);\n}\n.ds-comment__text {\n margin: 0;\n}\n.ds-comment__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons: the operating system's push button ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n border: calc(var(--border-width) * 2) outset var(--color-button);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n border-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-disabled);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* ---------- form: labels above the fields, no box ---------- */\n.ds-form {\n margin: 0;\n}\n.ds-form__title {\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-heading);\n}\n.ds-form__cols {\n display: flex;\n gap: var(--space-6);\n}\n.ds-form__row {\n margin: 0 0 var(--space-4);\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: calc(var(--border-width) * 2) inset var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--search {\n width: var(--size-search);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-style: solid;\n border-color: var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-5) 0 0;\n}\n\n/* ---------- table: no outline, a bar head and a double-weight foot rule ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-bottom: calc(var(--border-width) * 2) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n vertical-align: top;\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n width: var(--size-num);\n text-align: right;\n}\n.ds-table__group td {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- list: the date in a narrow column, the entry beside it ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__date {\n flex: none;\n width: var(--size-date);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__excerpt {\n margin: 0;\n}\n.ds-list__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-heading);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- grid: four joined cells in one row ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-fill-1);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell:first-child {\n border-left: 0;\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n}\n\n/* ---------- tabs: small blocks on a line in the bar colour ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: calc(var(--border-width) * 2) solid var(--color-bar);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__body {\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n.ds-badge--tag {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) currentColor;\n font-weight: var(--weight-bold);\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n\n/* ---------- sidebar: the two link columns ---------- */\n.ds-sidebar {\n flex: none;\n width: var(--size-side);\n font-size: var(--text-small);\n}\n.ds-sidebar--left {\n padding-right: var(--space-5);\n}\n.ds-sidebar--right {\n padding-left: var(--space-5);\n}\n.ds-sidebar__block {\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-5);\n border-bottom: calc(var(--border-width) * 2) var(--border-style) var(--color-border-strong);\n}\n.ds-sidebar__block:last-child {\n margin-bottom: 0;\n border-bottom: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-heading);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n}\n/* A tinted, outlined box for the one block that asks for something. */\n.ds-sidebar__box {\n padding: var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-sidebar__box-text {\n margin: 0 0 var(--space-3);\n}\n/* The stack of small outlined labels: feeds, validators, \"made with\". */\n.ds-sidebar__chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__chip {\n display: block;\n box-sizing: border-box;\n width: var(--size-chip);\n padding: var(--space-1) 0;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__chip:hover,\n.ds-sidebar__chip.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- notice: a tinted line ruled above and below ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border-style: var(--border-style);\n border-color: var(--color-border-strong);\n border-width: var(--border-width) 0;\n border-radius: var(--radius-panel);\n color: var(--color-notice-text);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n\n/* ---------- pagination: newer left, older right, page numbers between ---------- */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__item--prev {\n margin-right: auto;\n}\n.ds-pagination__item--next {\n margin-left: auto;\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-3);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a small window framed in the bar colour, in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n margin: 0 auto;\n background: var(--fill-panel);\n border: calc(var(--border-width) * 2) solid var(--color-bar);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-4);\n font-size: var(--text-small);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n color: var(--color-text-muted);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- footer: two centred lines on the inverted strip ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n margin: 0 0 var(--space-2);\n padding: 0;\n list-style: none;\n line-height: var(--line-heading);\n}\n.ds-footer__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) solid var(--color-inverse-text);\n}\n.ds-footer__item:first-child {\n border-left: 0;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-canvas);\n}\n.ds-footer__text {\n margin: 0;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--space-4) * 2);\n height: calc(var(--space-4) * 2);\n margin-right: var(--space-2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n vertical-align: middle;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-base) * 0.7);\n height: calc(var(--text-base) * 0.7);\n margin-left: var(--space-2);\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n display: block;\n flex: 1 1 auto;\n margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, three-column group weblog specimen\n\n\n\n\n
\n\n
\n

Four people, one page, updated when something turns up Last update 11:20 am

\n
\n
\n \n \n chronoskin\n \n

a group weblog of maps, kites and shortwave

\n
\n
\n \n \n
\n
\n \n
\n\n \n
\n\n
\n
\n

Things we found and could not keep to ourselves

\n

A dozen short entries a day about paper maps, home-made kites and voices on the radio.

\n
\n
\n Suggest a link\n how we choose »\n
\n
\n\n
\n\n \n\n
\n\n

Thursday, 9 June 2005

\n\n
\n
\n

A county map drawn from bus timetables

\n

Somebody in the hill villages has redrawn the whole county using nothing but the printed bus timetables: places sit as far apart as the ride takes, not as far as the road runs. The coast comes out twice as long as the atlas has it.

\n

Distances are in minutes. Where no bus goes, there is no land.

\n

Why it works

\n

The valleys with one bus a day stretch out like taffy, and the market town shrinks to a dot.

\n
    \n
  • Printed on one sheet, folded in eight.
    • \n
  • Sunday services are drawn as dotted lines.
    • \n
  • The legend is longer than the map.
    • \n
\n

Make your own

\n

The author’s script reads a timetable as plain text: busmap --minutes routes.txt writes the outline.

\n
\n

posted by Ines Varga at 11:20 am | permalink | 3 comments

\n
\n\n
\n

Earlier this week

\n \n
\n\n
\n

The shelves

\n
\n
\n

Maps

\n

312 entries. Open

\n
\n
\n

Kites

\n

148 entries. Open

\n
\n
\n

Radio

\n

205 entries. Open

\n
\n
\n

Weather

\n

96 entries. Open

\n
\n
\n
\n\n
\n\n \n\n
\n
\n\n \n
\n
\n\n \n\n
\n\n
    \n
  1. front page
    2. \n
  2. >
    3. \n
  3. kites
    4. \n
  4. >
    5. \n
  5. the newspaper kite
    6. \n
\n\n
\n
\n

Kite made from one newspaper and no glue

\n

Wednesday, 8 June 2005, by Tobias Renn. Three comments.

\n
\n
Front page
\n
\n\n
\n
\n

A retired printer has worked out how to fold a full broadsheet into a kite that needs no glue, no tape and no sticks. The spine is the paper itself, rolled tight along the fold.

\n

Use yesterday’s paper. Today’s is still too damp to hold a crease.

\n

I built one at lunch and it flew for nine minutes over the allotments before the sports pages gave way.

\n
\n

posted by Tobias Renn at 1:05 pm | filed under kites

\n
\n\n
\n

Follow it up

\n \n
\n\n
\n

Three comments

\n
    \n
  1. \n

    Works with a tabloid too, but it wants a longer tail.

    \n

    SSolveig | 8 June, 2:12 pm

    \n
    2. \n
  2. \n

    A longer tail and a calmer day. Noted for the next one.

    \n

    TRTobias Renn | 8 June, 2:40 pm

    \n
    3. \n
  3. \n

    Mine lasted until the crossword. Wonderful.

    \n

    HAHenrik Aune | 8 June, 5:31 pm

    \n
    4. \n
\n
\n\n
\n
\n

Add a comment

\n
\n \n \n
\n
\n \n \n
\n
\n \n Back to the front page\n
\n
\n
\n\n
\n\n \n\n
\n
\n\n \n
\n
\n\n \n\n
\n\n
    \n
  1. front page
    2. \n
  2. >
    3. \n
  3. suggest a link
    4. \n
\n\n
\n
\n

Suggest a link

\n

One of us reads every suggestion within a day.

\n
\n
What others sent
\n
\n\n
\n
\n

Received. Your last suggestion is in the queue; one of us reads it within a day.

\n

Not sent. A suggestion needs an address that starts with http.

\n
\n
\n\n
\n
\n

Your suggestion

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n

The address has to start with http.

\n
\n
\n \n \n

Two or three lines. We may shorten them.

\n
\n
\n \n
\n
\n \n \n \n \n
\n
\n
\n\n
\n\n \n\n
\n
\n\n \n
\n
\n\n \n\n
\n\n
    \n
  1. front page
    2. \n
  2. >
    3. \n
  3. archives
    4. \n
  4. >
    5. \n
  5. suggested links
    6. \n
\n\n
\n
\n

Suggested links

\n

What readers sent in this spring and what became of it.

\n
\n
Suggest one
\n
\n\n
    \n
  • 1,332 entries
    • \n
  • 846 suggestions
    • \n
  • 219 posted
    • \n
  • 4 writers
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthMost talked aboutStatusSent in
June 2005The bus timetable mapwaiting27
May 2005Kite aerial photographsposted141
April 2005A radio in a biscuit tinposted118
March 2005The longest street namedeclined93
February 2005Snow gauge made of tinsposted76
\n
\n
\n\n
\n \n
\n\n
\n

Your own suggestion, sent this morning

\n
\n
\n

Withdraw your suggestion?

\n
\n

The link you sent this morning will be taken out of the queue. You can send it again later.

\n
\n \n Keep it\n
\n
\n
\n
\n
\n\n
\n

Newest shelf: Lighthouses

\n
\n

Nothing is filed under “Lighthouses” yet.

\n Suggest the first one\n
\n
\n\n
\n\n \n\n
\n
\n\n \n
\n
\n\n \n\n
\n\n
    \n
  1. front page
    2. \n
  2. >
    3. \n
  3. about the four of us
    4. \n
\n\n
\n
\n

About the four of us

\n

Who writes this and how a link gets on the page.

\n
\n
Suggest a link
\n
\n\n
\n
\n

Who writes this

\n
\n

Four friends who met on a kite field and never stopped sending each other links. 38 entries this week, mostly under maps radio. A suggested link is posted, waiting or declined, and we say which.

\n
\n
\n
\n\n
\n
\n

Our linking policy

\n

We link to things one person made and to pages that will still be there next year. We do not link to shops, and we never take anything for a link.

\n

Corrections

\n

When we get something wrong we strike it through and say so underneath. Nothing is quietly removed; the archives keep everything.

\n

Write to us

\n

Links go through the suggestion form. For anything else, a postcard to the kite field finds all four of us.

\n
\n
\n\n
\n\n \n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s02.p03.t02.u11.dc\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"weblogs-2000s\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-wl-232b-dc\",\n \"short\": \"v1-wl-232b-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #4a525a;\n --color-canvas: #4a525a;\n --color-surface: #4a525a;\n --color-surface-alt: #505860;\n --color-surface-strong: #586068;\n --color-bar: #687078;\n --color-bar-text: #ffffff;\n --color-bar-alt: #606870;\n --color-bar-alt-text: #eeeeee;\n --color-inverse: #dddddd;\n --color-inverse-text: #4a525a;\n --color-text: #eeeeee;\n --color-text-muted: #aaaaaa;\n --color-heading: #ffffff;\n --color-heading-alt: #cccccc;\n --color-link: #ffcc66;\n --color-link-quiet: #cccccc;\n --color-link-visited: #cccc99;\n --color-link-hover: #ffffff;\n --color-link-active: #ff9900;\n --color-border: #777777;\n --color-border-strong: #888888;\n --color-border-muted: #666666;\n --color-accent: #ff9900;\n --color-accent-text: #333333;\n --color-accent-alt: #ffcc66;\n --color-fill-1: #505860;\n --color-fill-2: #586068;\n --color-fill-3: #606870;\n --color-fill-4: #687078;\n --color-button: #586068;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #505860;\n --color-button-secondary-text: #dddddd;\n --color-input: #dddddd;\n --color-input-text: #333333;\n --color-input-border: #888888;\n --color-disabled: #505860;\n --color-disabled-text: #98a0a0;\n --color-danger: #cc9999;\n --color-danger-surface: #505860;\n --color-success: #bbcc99;\n --color-warning: #ffcc66;\n --color-notice: #586068;\n --color-notice-text: #eeeeee;\n --color-focus: #ffffff;\n --color-shadow: #333333;\n --color-overlay: #586068;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Arial, sans-serif;\n --font-heading: Tahoma, \"Trebuchet MS\", \"Lucida Grande\", Verdana, Arial, sans-serif;\n --font-ui: Verdana, Arial, sans-serif;\n --font-mono: monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 22px;\n --text-h1: 22px;\n --text-h2: 16px;\n --text-h3: 12px;\n --line-body: 1.7;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: dashed;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 6px;\n --radius-page: 0;\n --shadow-panel: 2px 2px 0 var(--color-border);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 4px 4px 0 var(--color-border);\n --shadow-text: none;\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h4v4H0zM4 4h4v4H4z' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\") var(--color-page);\n --fill-bar: repeating-linear-gradient(to bottom, var(--color-bar) 0, var(--color-bar) 2px, color-mix(in srgb, var(--color-bar), black 12%) 2px, color-mix(in srgb, var(--color-bar), black 12%) 3px);\n --fill-bar-alt: repeating-linear-gradient(to bottom, var(--color-bar-alt) 0, var(--color-bar-alt) 2px, color-mix(in srgb, var(--color-bar-alt), black 12%) 2px, color-mix(in srgb, var(--color-bar-alt), black 12%) 3px);\n --fill-inverse: repeating-linear-gradient(to bottom, var(--color-inverse) 0, var(--color-inverse) 2px, color-mix(in srgb, var(--color-inverse), black 12%) 2px, color-mix(in srgb, var(--color-inverse), black 12%) 3px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }