{ "id": "v1-wl-2232", "long_id": "v1.weblogs-2000s.blog.s02.p02.t03.u02", "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 }, "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-2232", "preview_url": "https://chrono.skin/s/v1-wl-2232/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- The whole page is dark slate: `--color-page`, `--color-canvas` and `--color-surface` are #4a525a; `--color-surface-alt` #505860 and `--color-surface-strong` #586068 are the steps for alternate rows, tags and the current page number. The same steps (#505860, #586068, #606870, #687078) are the block fills of the grid bands; `--color-fill-3` #606870 is also the banner.\n- `--color-bar` #687078 with `--color-bar-text` #ffffff is the table head and dialog title, and the line on top of the banner; `--color-bar-alt` #606870 with #eeeeee text is the strip under the banner, breadcrumb included. `--color-inverse` #dddddd with #4a525a text is the light footer band.\n- `--color-text` #eeeeee is body text, `--color-text-muted` #aaaaaa meta and form labels, `--color-heading` #ffffff titles, the site name and the banner tagline, `--color-heading-alt` #cccccc sub-headings, code and foot-column titles.\n- `--color-link` #ffcc66 (pale amber) is the one warm colour; hover #ffffff, visited #cccc99, active #ff9900, quiet #cccccc. `--color-accent` #ff9900 with #333333 text is the count badge and list bullets.\n- Lines are `--color-border` #777777, `--color-border-strong` #888888 (stats rules, the rule above the foot columns, the left edge of a notice) and `--color-border-muted` #666666. Buttons stay dark (#586068 and #505860 with light text) with a 1px `--color-input-border` outline; inputs are light #dddddd with #333333 text.\n- Status colours are pale so they read on slate: `--color-success` #bbcc99, `--color-warning` #ffcc66, `--color-danger` #cc9999 on `--color-danger-surface` #505860. They are the text and 1px outline of status labels on `--color-surface` and the lettering of a destructive button, never a fill.\n- One family throughout: `--font-body`, `--font-heading` and `--font-ui` are \"Lucida Grande\" with Trebuchet MS and Verdana behind it; `--font-mono` is Courier New.\n- `--text-base` 13px with `--line-body` 1.4; `--text-small` and `--text-ui` 11px (meta, tables, grid text, foot columns, footer, strip, buttons); `--text-large` 14px is the hero lead.\n- Headings are bold and barely larger than the text: `--text-display` 18px for the site name; the hero title and the page-header title are the smaller of `--text-display` and 1.3 times `--text-h1` (18px here, written with `min()`), so a token set with a large display size cannot blow them up, `--text-h1` 14px for entry titles, stats figures and the form title, `--text-h2` 13px, `--text-h3` 11px, all `--weight-heading` 700. The only uppercase, tracked text is `.ds-sidebar__title` (11px bold, 2px tracking written as `calc(var(--space-1) * 2)`, because the type part has no token for it).\n- Every link is underlined at rest (`--link-decoration` and `--link-decoration-quiet` underline), including the strip, tabs, list titles and footer navigation; the underline goes on hover (`--link-decoration-hover` none). Only the site name and buttons are not underlined.\n- `--fill-bar`, `--fill-bar-alt` and `--fill-accent` are a two-step gloss over their colour with a hard break in the middle; it appears on the strip, the table head, the dialog title and the count badge, and text on the bars carries a 1px `--shadow-text` below it in `--color-shadow`. `--fill-page` lays a fine diagonal hatch over `--color-page`, so the flat sheet shows against it. The banner and all other fills are flat; a hovered button lightens by `--fill-button-hover`.\n- Lines are `--border-width` 1px; every rule and outline, between blocks and table rows, around the panel and around controls, is drawn in `--border-style`, so a dotted, dashed or grooved surface set changes all of them. `--border-width-strong` 3px is the line on top of the banner, the rule over each stat and over the foot columns, and the left edge of a notice; the current tab's underscore is `calc(var(--border-width) * 3)`. All radii are 0 and no box casts a shadow at rest (a pressed button takes a 2px inset shade, `--shadow-control-pressed`); `--focus-ring` is a 1px solid outline; `--transition` none.\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 <= 18px`: the site name and page titles are 18px; entry titles are 14px bold.\n- `font-size >= 11px`: small text stops at 11px.\n- `font-families <= 2`: Lucida Grande and a monospace.\n- `line-height <= 1.5`: text is set tight, at 1.4.\n- `line-height >= 1.4`: but never solid.\n- `letter-spacing <= 2px`: only the foot-column titles are tracked.\n- `uppercase-text <= 3%`: only the foot-column titles are uppercase.\n- `underlined-links >= 80%`: links are underlined everywhere, strip and footer included.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: boxes are told apart by dotted lines and flat tints.\n- `text-shadow = none`: text is flat, also on strips.\n- `gradient-fills <= 0%`: strips and buttons are one flat colour.\n- `border-width <= 2px`: lines are 1px; control bevels and emphasis rules are 2px.\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: 5px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 16px;\n --space-7: 24px;\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.p02.t03.u02\",\n \"library\": \"2026.10.09-1036\",\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-2232\",\n \"short\": \"v1-wl-2232\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ddddbb;\n --color-canvas: #eeeedd;\n --color-surface: #eeeedd;\n --color-surface-alt: #e8e8d0;\n --color-surface-strong: #ddddbb;\n --color-bar: #777744;\n --color-bar-text: #ffffee;\n --color-bar-alt: #bbcc99;\n --color-bar-alt-text: #182d04;\n --color-inverse: #182d04;\n --color-inverse-text: #ccccaa;\n --color-text: #777744;\n --color-text-muted: #808050;\n --color-heading: #182d04;\n --color-heading-alt: #99aa77;\n --color-link: #006d00;\n --color-link-quiet: #99aa77;\n --color-link-visited: #99aa77;\n --color-link-hover: #182d04;\n --color-link-active: #cc6600;\n --color-border: #ccccaa;\n --color-border-strong: #99aa77;\n --color-border-muted: #ddddbb;\n --color-accent: #777744;\n --color-accent-text: #ffffee;\n --color-accent-alt: #cc6600;\n --color-fill-1: #d0e0a8;\n --color-fill-2: #ddddbb;\n --color-fill-3: #cccc99;\n --color-fill-4: #ffffee;\n --color-button: #bbcc99;\n --color-button-text: #182d04;\n --color-button-hover-text: #182d04;\n --color-button-secondary: #ddddbb;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #ddddbb;\n --color-disabled-text: #99aa77;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffee;\n --color-success: #006d00;\n --color-warning: #cc6600;\n --color-notice: #ffffee;\n --color-notice-text: #777744;\n --color-focus: #777744;\n --color-shadow: #777744;\n --color-overlay: #ddddbb;\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Grande\", \"Trebuchet MS\", \"Bitstream Vera Sans\", Verdana, Helvetica, sans-serif;\n --font-heading: \"Lucida Grande\", \"Trebuchet MS\", \"Bitstream Vera Sans\", Verdana, Helvetica, sans-serif;\n --font-ui: \"Lucida Grande\", Verdana, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 18px;\n --text-h1: 14px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\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: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='black' fill-opacity='.14'/%3E%3C/svg%3E\") var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\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 dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }