{ "id": "v1-wl-6546", "long_id": "v1.weblogs-2000s.blog.s06.p05.t04.u06", "name": "Linklog, 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 linklog as kept between 2003 and 2007 beside or instead of a weblog: several short dated items a day, each a link with one line of remark, a quotation or a note, filed under tags. The page is a wide parchment sheet hanging from the top of the window, the menu as small tabs on its top edge, the brand (mark and site name) under them, a dark tag bar across, and then day blocks ruled down the left beside a weighted tag index. Text is 13px Georgia with small tracked capitals in Trebuchet for every label; rules are dotted, corners square, and the sheet and its boxes carry a soft glow of shadow.", "url": "https://chrono.skin/s/v1-wl-6546", "preview_url": "https://chrono.skin/s/v1-wl-6546/specimen.html", "files": { "STYLE.md": "# Linklog, 2005\n\n## Summary\n\nA linklog as kept between 2003 and 2007 beside or instead of a weblog: several short dated items a day, each a link with one line of remark, a quotation or a note, filed under tags. The page is a wide parchment sheet hanging from the top of the window, the menu as small tabs on its top edge, the brand (mark and site name) under them, a dark tag bar across, and then day blocks ruled down the left beside a weighted tag index. Text is 13px Georgia with small tracked capitals in Trebuchet for every label; rules are dotted, corners square, and the sheet and its boxes carry a soft glow of shadow.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (880px) wide, centred, `--color-canvas` on `--fill-page`, flush with the top of the window and open there, with a 1px `--color-border` line down each side and along the foot and `--shadow-panel` around it. It never stretches.\n- Order from the top: `.ds-nav` (the `.ds-nav__menu` tabs hanging at the top right, the `.ds-nav__head` with the brand left and a two-line tagline right, then `.ds-nav__tags`, the `--fill-bar` tag bar across the sheet), the view, and `.ds-footer`, the inverted strip. The menu is never a bar of its own and never sits beside the name.\n- The home view is the `.ds-hero` (one tinted line across the sheet), then `.ds-page__columns`: the stream (`.ds-page__main`) on the left and `.ds-sidebar` at `--size-side` (230px) on the right, `--space-7` apart, and last the `.ds-grid`, four tinted cells across the whole sheet directly above the footer.\n- The stream is a stack of `.ds-day` blocks `--space-6` apart: a `.ds-day__date` line (small bold tracked capitals with the day's count at the right) over a `.ds-list` that is ruled down its left side with a `--border-width-strong` line. Items are divided by 1px rules, never by cards. Other blocks of a column are `.ds-page__section`, closed by a 1px rule with `--space-6` above and below; `.ds-page__label` is the small tracked caption over a block.\n- Inner pages keep the sheet, the tabs, the name, the tag bar and the footer. The hero and the closing grid are not used. A `.ds-breadcrumb` line sits under the tag bar, inside the sheet's padding. A page about one thing (an item, the about page) keeps both columns: the main column opens with `.ds-page-header` (18px title, one 11px grey line, one button at the right, a 3px `--color-border-muted` rule), then the text, related links, the `.ds-comments` thread and the form last; the sidebar carries lists that belong to that page. A page that is an index (the tags) drops the sidebar and uses `.ds-page__wide`: page header, `.ds-stats`, `.ds-tabs` with the panel in `.ds-tabs__body`, the table, `.ds-pagination`. Tabs stand on their own rule under the page header.\n- Views: the specimen is one linklog with four views. `links` is the front page: three days of items, the index column and the four counts. `item` is one link with its remark written out, related links, comments, the delete dialog, the notices that answer a posted comment and the comment form. `tags` is the tag index: figures, tabs over the weighted cloud, the table of the busiest tags, pagination and an empty tag. `about` is the keeper panel, what gets in, and the form for suggesting a link. The menu links to links, tags and about; items are reached from titles, comment counts and sidebar lists.\n- Spacing scale: `--space-1` 1px is the tracking of labels (doubled or tripled for titles and dates) and the padding of sidebar rows; `--space-2` 2px is the gap between tabs and between a line and its meta line; `--space-3` 5px is the padding of buttons, tabs, table cells and the tag bar; `--space-4` 8px is the padding of a list row, the inset of a day block and of notices; `--space-5` 12px is the gap between paragraphs and the padding of panels, the hero and the footer; `--space-6` 18px is the gap between blocks and day blocks; `--space-7` 28px is the side padding of the sheet and the gap between the columns.\n- Fixed sizes: `--size-kind` 52px is the column that names an item's kind, `--size-label` 100px the label column of a form, `--size-field` 250px a text input, `--size-num` 80px a numeric table column, `--size-dialog` 380px a dialog.\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- `--font-body` and `--font-heading` are \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial; `--font-ui` is Verdana, used for the menu, tabs, buttons, inputs and the month on a date leaf; `--font-mono` (Courier New) is only for code. All are system fonts, so nothing was substituted.\n- `--text-base` 13px with `--line-body` 1.35 is entry text; `--text-small` 11px is the whole left column, meta lines, tables, notices, breadcrumb and footer; `--text-ui` 11px is the menu, tabs, buttons and inputs. `--text-large` equals the base size: the lead line of the hero is not enlarged.\n- Headings are small bold tracked capitals, barely larger than the text: `--text-h1` 14px for entry titles, the hero and page-header titles and stats figures, `--text-h2` 13px for sub-headings, grid and form titles, `--text-h3` 12px for sidebar titles and block labels, all `--weight-heading` 700 with `--heading-transform` uppercase and `--heading-tracking` 1px. `--text-display` 28px bold, tracked 2px, is the site name in the banner and the only large text on the page.\n- `--color-text` and `--color-heading` are #000000; `--color-heading-alt` #f15a00, a strong orange, is sub-headings, sidebar titles, block labels and code; `--color-text-muted` #717171 is dates, counts and meta lines.\n- `--color-link` #330099, a dark purple. Links are not underlined (`--link-decoration` none) and gain an underline on hover, where they turn `--color-link-hover` #f15a00; visited links are `--color-link-visited` #0000a5, active #a51410, and `--color-link-quiet` #666666 is for category, permalink and tool links. Footer links are underlined at rest because they sit on the dark strip.\n- `--color-bar` #ab3c00, a flat dark rust (the references set white on a paler terracotta, #de9468, which is too weak a contrast for small white text, so the bar takes their darker rust), with white `--color-bar-text` fills the banner, the current menu item and dialog titles (`--fill-bar` is the plain colour, no gradient). `--color-bar-alt` #8d8d8d with white text is only the month strip of a date leaf. `--color-inverse` #424142 with #d2d2d2 text is the footer.\n- `--color-page` #fcdecc is the peach page; the sheet and every surface are white; `--color-surface-alt` #f7f7f7 is the calendar, the breadcrumb, the form, the day half of a date leaf and alternate table rows; `--color-surface-strong` #f0f0f0 is table heads, panel titles and the current page number.\n- Borders: `--color-border` #d2d2d2 for every ordinary 1px line, around boxes, under titles and between entries, all in `--border-style`; `--color-border-muted` #e8e8e8 between linklog rows and under block labels; `--color-border-strong` #ab3c00, the rust of the banner, for the rule under a page header, the 2px rule over each stat, the underscore of the current tab and the outline of notices. `--border-width-strong` (4px) is not used by this layout; it is the heavy rule other layouts of the era draw on top of a sheet or beside a notice.\n- `--color-fill-1` #fff8f0, `--color-fill-2` #f7f7f7, `--color-fill-3` #ffe0d0 and `--color-fill-4` #fffff8 are the flat tints of grid cells; fill-1 is also the hero. `--color-accent` #f15a00 with white text is the count badge, today in the calendar and list bullets.\n- Status colours: `--color-danger` #a51410 and `--color-warning` #ab3c00 are measured reds and rusts of the references; `--color-success` #538620 is the green of the era's first set, because the peach references show no green. They are used only as the text and 1px outline of status labels and as the lettering of a destructive button, never as a fill.\n- Buttons and inputs look like the operating system's: buttons are `--color-button` #f0f0f0 with a 2px `outset` border of the same colour and black text; inputs are white with a 2px `inset` `--color-input-border` border. The 2px is `calc(var(--border-width) * 2)`, the 3px tab underscore `calc(var(--border-width) * 3)`; `outset` and `inset` are written as keywords in `components.css` because `--border-style` holds only `solid`. The brand tile is sized by `calc()` over `--text-display`, as the vocabulary has no token for it.\n- Hover, visited, active and focus colours were not measurable on static captures; they are taken from other measured colours of the same palette. Focus is a 1px dotted `--color-focus` outline.\n- Surface: corners are eased, not round: `--radius-control` 3px on buttons, inputs and the calendar, `--radius-panel` 5px on panels, the form and the dialog, `--radius-page` 8px on the sheet, the banner and grid cells, `--radius-pill` 9px on tags, as the rounded templates of 2005 did with corner images. The sheet, panels and grid cells cast `--shadow-panel` (1px down, 4px soft), the dialog `--shadow-dialog`. `--fill-page` darkens the top 240px of the page a little; every other fill is flat.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Everything goes in `.ds-page__frame`. `.ds-page__columns` holds `.ds-page__main` and `.ds-sidebar`; `.ds-page__wide` is the body of a view without a sidebar; `.ds-page__section` is a block 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 under the tabs; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, a 1px `--color-input-border` outline that is 2px along the bottom, `--radius-control`, `--shadow-control`), 1.3 times `--text-display` on a side and never less than twice `--text-base`; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at `--text-display` 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`: the header, written once above the views. `.ds-nav__menu` is the row of `.ds-nav__link` tabs hanging from the top edge at the right, filled with `--fill-bar-alt`; the current one takes `--fill-bar` and bold `--color-bar-text`: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href` (a single item counts as the links). `.ds-nav__head` holds the `.ds-brand` and `.ds-nav__tagline`. `.ds-nav__tags` is the tag bar: a `.ds-nav__tags-label` and `.ds-nav__tag` links on `--fill-bar`.\n- `.ds-breadcrumb`: a line of small tracked capitals under the tag bar: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`/`), ending in `.ds-breadcrumb__current`. No strip, no fill.\n- `.ds-hero`: the front page's introduction, once: a `--color-fill-1` line across the sheet with a rule below, `.ds-hero__text` (`.ds-hero__title` at 18px and a `.ds-hero__lead` at 15px) on the left and `.ds-hero__actions` (one button over one text link) at the right. Not a banner: no large type, no picture.\n- `.ds-page-header`: the head of an inner page, never together with the hero: `.ds-page-header__main` holds the `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A 3px `--color-border-muted` rule closes it.\n- `.ds-stat`: one summary figure, set as words in a sentence: a `.ds-stat__value` (18px Georgia, navy) followed on the same line by its `.ds-stat__label` (10px tracked capitals, grey). Three to five follow each other in `.ds-stats`, one `--color-surface-alt` line with a 3px `--color-border-strong` left edge. Do not stack the label under the number and do not box the figures.\n- `.ds-day`: one day of the log: `.ds-day__date` (the date in small bold tracked capitals, the day's count as a `.ds-badge` at the right) over one `.ds-list`.\n- `.ds-list`: the items of a day, ruled down the left. Each `.ds-list__item` has a `.ds-list__kind` (link, quote, note, in grey capitals) and a `.ds-list__body`. A link is one `.ds-list__excerpt` paragraph that opens with the bold `.ds-list__title` link and continues with the remark; a quotation is a `.ds-list__quote` (15px, navy); a note is a plain `.ds-list__excerpt`. Each ends with a `.ds-list__meta` line: time, source, comments, tags.\n- `.ds-tags`: the weighted tag index, a wrapping run of `.ds-tags__tag` links whose size follows their use: plain is 11px, `--2` 13px, `--3` 15px, `--4` 18px in the heading face. Use it in the sidebar and in a panel; four weights are enough.\n- `.ds-prose`: running text: h1, h2 (orange), h3 (bold Trebuchet, navy), paragraphs, square-bulleted lists with orange markers, `code`, and `blockquote` with a 1px `--color-border-strong` left rule. `.ds-post__meta` is the small grey line under it.\n- `.ds-comment`: one comment, inside a `.ds-comments` list: a `.ds-comment__text` paragraph over a `.ds-comment__meta` line, divided by 1px rules. `.ds-comment--author` tints the keeper's own reply.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the grey meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a small button lettered in bold tracked capitals, `--fill-button` with a 1px `--color-input-border` outline that is 2px along the bottom. `.ds-button--secondary` is paler and not bold. `.ds-button--danger` is the destructive action: the secondary button lettered and underscored in `--color-danger`, never filled red. `disabled` or `is-disabled` fades it. Group with `.ds-buttons`.\n- `.ds-form`: a `--color-surface-alt` block under a 3px rule: `.ds-form__title`, rows (`.ds-form__row`) of a bold capital `.ds-form__label` and a `.ds-form__field`. Controls take `.ds-form__input` (`--wide` full width, `--auto` for selects); `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` starts the buttons under the fields and keeps them on one row.\n- `.ds-table`: data table at 11px with open sides: a head row of grey tracked capitals on a 3px rule, rows divided by 1px rules, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row. The head is not a bar.\n- `.ds-panel`: a 1px outlined box with the soft glow, a `--color-surface-strong` `.ds-panel__title` in tracked capitals and a `.ds-panel__body`. Use it for the tag cloud or one boxed note.\n- `.ds-grid`: four `.ds-grid__cell` blocks across the whole sheet, joined edge to edge and divided by 1px rules, each a flat tint (`--2`, `--3`, `--4` select the other fills) with a large `.ds-grid__count`, a `.ds-grid__title` in tracked capitals and a `.ds-grid__text` line. It closes the front page above the footer; do not put gaps between the cells.\n- `.ds-tabs`: a row of small boxed `.ds-tabs__tab` links in tracked capitals standing on a 1px rule; `is-current` takes the sheet's colour and joins the content below, which goes in `.ds-tabs__body`.\n- `.ds-badge`: small square orange count. `.ds-badge--alt` is a bare coloured word (\"new\"); `.ds-badge--tag` is a grey outlined tag. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a square label with a 1px outline and bold word, both in the status colour.\n- `.ds-sidebar`: the index column at 11px. Each `.ds-sidebar__block` has a navy `.ds-sidebar__title` in tracked capitals on a 1px rule and a `.ds-sidebar__list` of `.ds-sidebar__item` rows, the `.ds-sidebar__link` at the left and an optional `.ds-sidebar__count` at the right edge; `.ds-sidebar__list--two` sets a link list in two columns; `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button. `.ds-sidebar__block--box` boxes one block with `--fill-panel` and the glow.\n- `.ds-notice`: one-line message on `--color-notice` with a 1px `--color-border-strong` outline, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and outline. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small 1px boxed `.ds-pagination__link` items. `is-current` is `--color-surface-strong` with a `--color-border-strong` outline; `is-disabled` is faded.\n- `.ds-dialog`: a 1px outlined box with `--shadow-dialog`, a `--fill-bar` `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. It sits in the page flow on `.ds-dialog__backdrop` (`--color-overlay`). No dimmed overlay.\n- `.ds-empty`: a centred grey `.ds-empty__text` and one secondary button between two 1px rules; no box.\n- `.ds-footer`: the inverted strip closing the sheet, in tracked capitals: one `.ds-footer__row` with a line of text left and `.ds-footer__links` of underlined `.ds-footer__link` items right.\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 <= 30px`: blocks sit one rule apart.\n- `content-width <= 900px`: a fixed centred sheet; the page does not stretch with the window.\n- `font-size <= 28px`: the site name in the banner is the largest text; titles are 14px.\n- `font-size >= 10px`: the smallest text measured is 10px; the pack itself stops at 11px.\n- `font-weight <= 700`: bold is the heaviest weight in use.\n- `font-families <= 3`: Trebuchet MS, Verdana for controls and a monospace for code.\n- `line-height <= 1.6`: text is set close, at 1.35.\n- `line-height >= 1.2`: but never solid.\n- `letter-spacing <= 2px`: headings are tracked 1px, the site name 2px.\n- `uppercase-text <= 12%`: capitals are for headings, block labels and the site name, never for running text.\n- `border-radius <= 0px`: every box and control is square.\n- `box-shadow-blur <= 16px`: the sheet and its boxes glow softly; nothing casts a deep shadow.\n- `text-shadow = none`: text is flat, including on the bars.\n- `border-width <= 3px`: rules are 1px, button feet 2px, heavy rules 3px.\n- `gradient-fills <= 6%`: only the bars, the footer strip and the page are shaded; tints and controls are flat.\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 kind of item copies `.ds-list__item` (its kind in the `--size-kind` column, a 1px rule below), a new group of items copies `.ds-day` (a tracked date line over a block ruled down the left), a new boxed block copies `.ds-panel`, a new line of figures copies `.ds-stats`, a new band across the sheet copies `.ds-grid` (flat tints joined edge to edge). Every label is `--font-ui` at `--text-ui`, in `--ui-transform` and tracked; every title is unbolded `--font-heading`. 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 text at 10px to 27px, corners square, fills flat, and separate things with a rule before reaching for a box.\n", "components.css": "/* Layout tokens (structure part). A linklog, 2003 to 2006: the menu hangs as tabs from the top of the\n sheet, a tag bar runs under the name, short dated items stand in day blocks beside a tag index. */\n:root {\n --size-page: 880px;\n --size-side: 230px;\n --size-kind: 52px;\n --size-label: 100px;\n --size-field: 250px;\n --size-dialog: 380px;\n --size-num: 80px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 18px;\n --space-7: 28px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: 0 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 wide fixed column hanging from the top of the window, open at the 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-style: var(--border-style);\n border-color: var(--color-border);\n border-width: 0 var(--border-width) var(--border-width);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__wide {\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n/* The stream on the left, the index on the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-7);\n align-items: start;\n padding: var(--space-6) var(--space-7) var(--space-7);\n}\n.ds-page__main {\n min-width: 0;\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/* Caption above a group of components: small tracked capitals. */\n.ds-page__label {\n margin: 0 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: calc(var(--space-1) * 2);\n text-transform: var(--ui-transform);\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: tabs hanging from the top edge, the name under them, then the tag bar ---------- */\n.ds-nav {\n margin: 0;\n}\n.ds-nav__menu {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-7);\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5) var(--space-4);\n background: var(--fill-bar-alt);\n border-radius: 0 0 var(--radius-control) var(--radius-control);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item: the tab takes the primary bar. One selector per view; a single item belongs to the links. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#links\"],\n.ds-page:has(#links:target) .ds-nav__link[href=\"#links\"],\n.ds-page:has(#item:target) .ds-nav__link[href=\"#links\"],\n.ds-page:has(#tags:target) .ds-nav__link[href=\"#tags\"],\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}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\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-4) var(--space-7) var(--space-6);\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-4);\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.3), calc(var(--text-base) * 2));\n height: max(calc(var(--text-display) * 1.3), calc(var(--text-base) * 2));\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-bottom-width: calc(var(--border-width) * 2);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 68%;\n height: 68%;\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 text-align: right;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* The tag bar: the most used tags, on the primary bar, across the sheet. */\n.ds-nav__tags {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-5);\n margin: 0;\n padding: var(--space-3) var(--space-7);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tags-label {\n opacity: 0.7;\n}\n.ds-nav__tag {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__tag:hover,\n.ds-nav__tag.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) var(--space-7) 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\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: one tinted line of introduction across the sheet ---------- */\n.ds-hero {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-7);\n background: var(--color-fill-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__text {\n min-width: 0;\n}\n.ds-hero__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-hero__lead {\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex: none;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n\n/* ---------- page header: the title line of an inner page ---------- */\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-6);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-muted);\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: var(--space-2) 0 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 sentence of figures, the numbers set large ---------- */\n.ds-stats {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-2) var(--space-7);\n margin: 0 0 var(--space-6);\n padding: var(--space-4) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n}\n.ds-stat__value {\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 color: var(--color-heading-alt);\n}\n.ds-stat__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n color: var(--color-text-muted);\n}\n\n/* ---------- prose ---------- */\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);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n color: var(--color-heading-alt);\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-6);\n}\n.ds-prose ul {\n list-style: square;\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);\n}\n.ds-prose blockquote {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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\n/* ---------- comments: the thread under an item ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-4) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-comment:last-child {\n border-bottom: 0;\n}\n/* The keeper's own reply. */\n.ds-comment--author {\n background: var(--color-surface-alt);\n}\n.ds-comment__text {\n margin: 0 0 var(--space-2);\n}\n.ds-comment__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons: small lettered buttons, heavier along the bottom ---------- */\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-3) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-bottom-width: calc(var(--border-width) * 2);\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-heading);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\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 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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n/* Destructive action: the same button, lettered and underscored in the error red. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n border-bottom-color: var(--color-danger);\n background: var(--fill-button-secondary);\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-muted);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-form__title {\n margin: 0 0 var(--space-4);\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-form__row {\n display: flex;\n align-items: flex-start;\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: none;\n width: var(--size-label);\n padding-top: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n color: var(--color-text);\n}\n.ds-form__field {\n flex: 1;\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) 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-heading);\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: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-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/* The buttons start under the fields; the indent gives way before a button wraps. */\n.ds-form__actions {\n display: flex;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n}\n.ds-form__actions::before {\n content: \"\";\n flex: 0 1 calc(var(--size-label) - var(--space-3));\n}\n.ds-form__actions > .ds-button {\n flex: none;\n}\n\n/* ---------- table: a quiet head on a heavy rule, ruled rows ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-small);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: var(--space-1);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: baseline;\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 color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- day: one day of the log, its date over a block ruled down the left ---------- */\n.ds-day {\n margin: 0 0 var(--space-6);\n}\n.ds-day:last-child {\n margin-bottom: 0;\n}\n.ds-day__date {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n letter-spacing: calc(var(--space-1) * 3);\n text-transform: var(--ui-transform);\n color: var(--color-heading);\n}\n\n/* ---------- list: short items, the kind of each in a narrow column ---------- */\n.ds-list {\n margin: 0;\n padding: 0 0 0 var(--space-4);\n list-style: none;\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-kind) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n padding-top: var(--space-2);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: var(--space-2);\n}\n/* What the item is: link, quote, note. */\n.ds-list__kind {\n padding-top: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n color: var(--color-text-muted);\n}\n.ds-list__body {\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/* A quoted line: set larger, in the heading face. */\n.ds-list__quote {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-heading-alt);\n}\n.ds-list__meta {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tags: the weighted index, a tag's size following its use ---------- */\n.ds-tags {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n line-height: var(--line-heading);\n}\n.ds-tags__tag {\n color: var(--color-link);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tags__tag:hover,\n.ds-tags__tag.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tags__tag--2 {\n font-size: var(--text-base);\n}\n.ds-tags__tag--3 {\n font-size: var(--text-large);\n}\n.ds-tags__tag--4 {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\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-3) var(--space-5);\n background: var(--color-surface-strong);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\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 letter-spacing: calc(var(--space-1) * 2);\n text-transform: var(--ui-transform);\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- grid: four tinted cells across the sheet, one for each kind of item ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell {\n padding: var(--space-5) var(--space-6) var(--space-6);\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}\n.ds-grid__cell:first-child {\n border-left: 0;\n padding-left: var(--space-7);\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__count {\n display: block;\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 color: var(--color-heading);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n letter-spacing: calc(var(--space-1) * 2);\n text-transform: var(--ui-transform);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n}\n\n/* ---------- tabs: small boxed tabs on a rule ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: var(--space-1);\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(--color-canvas);\n border-bottom-color: var(--color-canvas);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-tabs__body {\n padding: var(--space-6) 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/* Text-only marker, the \"new\" word after a title. */\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n/* A tag: outlined, quiet. */\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/* Status labels: the tag's outline, drawn and lettered in the status colour. */\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}\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 index column on the right ---------- */\n.ds-sidebar {\n min-width: 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: 0 0 var(--space-6);\n}\n.ds-sidebar__block:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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 letter-spacing: calc(var(--space-1) * 2);\n text-transform: var(--ui-transform);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list--two {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n column-gap: var(--space-4);\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-3);\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 flex: none;\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n}\n.ds-sidebar__search {\n display: flex;\n gap: var(--space-2);\n}\n/* A boxed block for the one thing that must stand out. */\n.ds-sidebar__block--box {\n padding: var(--space-4) var(--space-5) var(--space-5);\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\n/* ---------- notice ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 ---------- */\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__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\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(--color-surface-strong);\n border-color: var(--color-border-strong);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a box with a title bar, in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-text-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\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 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: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n color: var(--color-text-muted);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- footer: the inverted strip closing the sheet ---------- */\n.ds-footer {\n padding: var(--space-5) var(--space-7);\n background: var(--fill-inverse);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n}\n.ds-footer__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\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 text-decoration: none;\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 margin-bottom: calc(var(--space-2) + var(--border-width));\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, linklog specimen\n\n\n\n\n
\n\n
\n \n
\n \n \n chronoskin\n \n

a linklog of odd sounds and the things that make them
a few short items a day, since autumn 2003

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

Things worth hearing, one line each

\n

Links, quotations and the odd note about bells, tape and home-made instruments.

\n
\n
\n Suggest a link\n or start from the tag index »\n
\n
\n\n
\n
\n
\n

Tuesday, 18 October 2005 6 items

\n \n
\n
\n

Monday, 17 October 2005 5 items

\n \n
\n
\n

Sunday, 16 October 2005 4 items

\n \n
\n
\n\n \n
\n\n
\n
\n 2,140\n

Links

\n

One line and an address. Browse »

\n
\n
\n 386\n

Quotations

\n

Overheard, read or misremembered. Browse »

\n
\n
\n 171\n

Notes

\n

Corrections and moved addresses. Browse »

\n
\n
\n 214\n

Tags

\n

From accordions to workshops. Open the index »

\n
\n
\n
\n\n \n
\n
    \n
  1. Links
    2. \n
  2. /
    3. \n
  3. Bells
    4. \n
  4. /
    5. \n
  5. A carillon you can play from a web page
    6. \n
\n
\n
\n\n
\n
\n

A carillon you can play from a web page

\n

Linked on Tuesday, 18 October 2005 at 11:40 am. Followed 96 times, eight comments.

\n
\n
Back to the log
\n
\n\n
\n
\n

Twenty-three bells and a slow connection

\n

A tower keeper in a small northern town has wired the practice keyboard of his carillon to a web page. You press a key; some seconds later, a real bell rings in a real tower, and a microphone sends it back to you.

\n

Please do not play after nine in the evening. The neighbours know where I live.

\n

Why it is worth the wait

\n

The delay is the instrument. Nobody can play fast, so everybody plays carefully, and the log of what was played reads like a very slow conversation.

\n
    \n
  • Two octaves, no sharps below middle C.
    • \n
  • One player at a time; the queue is shown on the page.
    • \n
  • Silent on Sundays until noon.
    • \n
\n

For the curious

\n

The page sends one line per note, such as ring 14 soft, and the tower answers with the time it struck.

\n
\n

Via a bell ringer's diary · tagged bells museums · Permanent link

\n
\n\n
\n

Filed near this

\n \n
\n\n
\n

Three of eight comments

\n
    \n
  1. \n

    I waited forty minutes for my turn and played three notes of a scale. Best forty minutes of the week.

    \n

    MOMaren Oake · 18 October 2005, 12:15 pm

    \n
    2. \n
  2. \n

    The keeper writes that the record so far is a whole hymn, played by somebody in a library over a lunch hour.

    \n

    THTobin Hale · 18 October 2005, 1:02 pm

    \n
    3. \n
  3. \n

    Does anyone know whether the lowest bell is really out of tune, or is that my speakers?

    \n

    ILIvo Lindgren · 18 October 2005, 2:30 pm · edit · delete

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

Delete your comment?

\n
\n

The comment you posted at 2:30 pm will be removed from this item. This cannot be undone.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n

Thank you. Your last comment is waiting for approval and will appear shortly.

\n

Not posted. One field below needs another look.

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

Add a comment

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

That does not look like an e-mail address.

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

Plain text. Line breaks are kept; addresses become links.

\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. Links
    2. \n
  2. /
    3. \n
  3. Tag index
    4. \n
  4. /
    5. \n
  5. All tags
    6. \n
\n
\n\n
\n
\n

Tag index

\n

Every tag used since autumn 2003; the larger the word, the more items it holds.

\n
\n
Latest links
\n
\n\n
    \n
  • 2,697 items
    • \n
  • 214 tags
    • \n
  • 25 months
    • \n
  • 61 dead links
    • \n
\n\n
\n \n
\n
\n

The forty most used

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

The busiest tags

\n \n \n \n \n \n \n \n \n \n \n \n \n
TagLatest itemLast usedStateItems
tapeA quotation about dropping recorders18 October 2005in use163
bellsA carillon you can play from a web page18 October 2005in use148
organsWe tuned the organ to the room17 October 2005in use121
birdsongDawn chorus from one window16 October 2005in use104
cylindersWax recordings of a street market2 June 2005going quiet37
ringtonesA choir sings the default tune11 March 2004retired9
\n
\n\n
\n \n
\n\n
\n

Newest tag: typewriters

\n
\n

Nothing is tagged “typewriters” yet. It was made for a link that turned out to be dead.

\n Suggest the first one\n
\n
\n\n
\n
\n\n \n
\n
    \n
  1. Links
    2. \n
  2. /
    3. \n
  3. About and suggest
    4. \n
\n
\n
\n\n
\n
\n

About and suggest

\n

Who keeps the log, what gets in, and how to send it a link.

\n
\n
Latest links
\n
\n\n
\n
\n

The keeper

\n
\n

Tobin Hale repairs reed organs in a rented railway arch and reads too many newsletters. 96 items so far this month, most of them tagged tape bells. A suggested link is posted within a day, held if it needs checking, or declined with a reason.

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

What gets in

\n

Anything that makes a noise worth describing, and the people who build, record or repair it. chronoskin has 214 tags and no opinions about music.

\n

What does not

\n

Reviews, shops and anything that plays by itself when the page opens.

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

Suggest a link

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

Say what it sounds like. The log will add the tags.

\n
\n
\n
\n \n Cancel\n
\n
\n
\n\n
\n\n \n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s06.p05.t04.u06\",\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-6546\",\n \"short\": \"v1-wl-6546\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #113355;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f0f0f0;\n --color-surface-strong: #e8f0f0;\n --color-bar: #224466;\n --color-bar-text: #ffffff;\n --color-bar-alt: #b8d0e0;\n --color-bar-alt-text: #305878;\n --color-inverse: #000000;\n --color-inverse-text: #a8b8d0;\n --color-text: #444444;\n --color-text-muted: #777777;\n --color-heading: #335588;\n --color-heading-alt: #bb9955;\n --color-link: #335588;\n --color-link-quiet: #666666;\n --color-link-visited: #6699aa;\n --color-link-hover: #447799;\n --color-link-active: #cc0000;\n --color-border: #ccccdd;\n --color-border-strong: #446699;\n --color-border-muted: #d8d8d8;\n --color-accent: #bb9955;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #e8f0f0;\n --color-fill-2: #f0f0f0;\n --color-fill-3: #b8d0e0;\n --color-fill-4: #f8f8f8;\n --color-button: #e8f0f0;\n --color-button-text: #103058;\n --color-button-hover-text: #000000;\n --color-button-secondary: #f8f8f8;\n --color-button-secondary-text: #444444;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #a8b8d0;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #f8f8f8;\n --color-success: #538620;\n --color-warning: #cc6600;\n --color-notice: #e8f0f0;\n --color-notice-text: #444444;\n --color-focus: #447799;\n --color-shadow: #a8b8d0;\n --color-overlay: #f0f0f0;\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-ui: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 28px;\n --text-h1: 14px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 2px;\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: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 10px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n --shadow-dialog: 0 0 16px var(--color-shadow);\n --shadow-text: none;\n --fill-page: linear-gradient(to right, color-mix(in srgb, var(--color-page), black 8%), var(--color-page) 18%, var(--color-page) 82%, color-mix(in srgb, var(--color-page), black 8%));\n --fill-bar: linear-gradient(to bottom, var(--color-bar), color-mix(in srgb, var(--color-bar), black 22%));\n --fill-bar-alt: linear-gradient(to bottom, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt), black 14%));\n --fill-inverse: linear-gradient(to bottom, var(--color-inverse), color-mix(in srgb, var(--color-inverse), black 22%));\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 solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }