{ "id": "v1-wl-1341", "long_id": "v1.weblogs-2000s.blog.s01.p03.t04.u01", "name": "Personal weblog, 2004", "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 hand-built, standards-era personal weblog as published between 2002 and 2007: a fixed white sheet centred on a pale page, the brand (mark and site name) over a gradient navigation bar, one long column of dated entries and a narrow right-hand column of link lists. Everything is small Verdana (11px and 12px) with bold Trebuchet headings, square corners, 1px grey rules, flat tinted boxes and operating-system form controls. It was the common look of single-author journals and early technology blogs from the first CSS layouts until rounded, glossy themes took over around 2007.", "url": "https://chrono.skin/s/v1-wl-1341", "preview_url": "https://chrono.skin/s/v1-wl-1341/specimen.html", "files": { "STYLE.md": "# Personal weblog, 2004\n\n## Summary\n\nA hand-built, standards-era personal weblog as published between 2002 and 2007: a fixed white sheet centred on a pale page, the brand (mark and site name) over a gradient navigation bar, one long column of dated entries and a narrow right-hand column of link lists. Everything is small Verdana (11px and 12px) with bold Trebuchet headings, square corners, 1px grey rules, flat tinted boxes and operating-system form controls. It was the common look of single-author journals and early technology blogs from the first CSS layouts until rounded, glossy themes took over around 2007.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (740px) wide, centred, white (`--color-canvas`) on `--color-page`, with a 1px `--color-border` line down each side and no gap at the top of the viewport. Never widen it and never let it stretch.\n- Order from the top: `.ds-nav` (a 4px `--color-bar-alt` line, a `--size-header` 76px band with the site name left and a two-line tagline right, then the bar of links), `.ds-page__columns`, and the `.ds-footer` flush with the sheet edges. The home page has no breadcrumb.\n- `.ds-page__columns` holds two columns: `.ds-page__main` at `--size-main` (470px) on the left and `.ds-sidebar` at `--size-sidebar` (210px) on the right. The 20px remaining between them is the gutter. The sidebar is always on the right.\n- The main column is a single stack. Entries (`.ds-post`) and other blocks (`.ds-page__section`) are separated by a 1px `--color-border` rule in the set's `--border-style` with `--space-6` below it, not by cards or whitespace alone. `.ds-page__label` is the small bold grey caption above a block.\n- Inner pages (the archives, a single entry, the about page, a settings or listing page of an application) keep the same sheet, header, bar and footer, and keep both columns at the same widths; nothing goes full width. The `.ds-breadcrumb` strip sits directly under the navigation bar, across the whole sheet. The hero is not used: in its place the main column opens with `.ds-page-header` (18px title, one 11px grey line, one button at the right, a 1px solid rule below). Under it, in this order when present: the `.ds-stats` strip, then `.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, related links, the `.ds-comments` thread, and the comment form last. Tabs never go in the header or the navigation bar; they stand on their own rule below the page header. The sidebar stays on the right and carries lists that belong to that page (years, categories, neighbouring entries, a short note) instead of the home page's blocks. Blocks after the page header are `.ds-page__section` as on the home page.\n- Views: the specimen is one small weblog with four views. `journal` is the front page: the hero note, the newest entry in full, earlier entries as a list, the section grid, and the long sidebar. `entry` is one entry with its comments: related links, the thread, the delete dialog a commenter opens on their own comment, the notices that answer a posted comment, and the comment form. `archives` is a year of entries: figures, tabs over the table of months, pagination, and an empty section. `about` is the author panel, a short description and the contact form. The bar links to journal, archives and about; entries are reached from titles, comment counts and sidebar lists.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs, sidebar rows and title strips, and doubled it is the tracking of sidebar titles; `--space-2` 3px is the padding of table cells, tabs, badges and the gap between a title and its meta line; `--space-3` 6px is list row padding, the padding under a page header and the vertical padding of a stat cell, the gap between buttons and the inset of sidebar lists; `--space-4` 10px is the padding of panels, notices, form and hero, and the grid gap; `--space-5` 15px is the gap between paragraphs and the top padding of the columns; `--space-6` 20px is the side padding of the sheet and the gap between blocks; `--space-7` 30px is list indent and the bottom padding of the columns.\n- Fixed sizes: `--size-label` 110px is the label column of a form, `--size-field` 220px a text input, `--size-num` 70px a numeric table column, `--size-dialog` 340px 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 colour and base type. Everything goes in `.ds-page__frame`; the two columns in `.ds-page__columns` with `.ds-page__main` first. `.ds-page__section` is a block of the main column closed by a 1px rule (`--last` drops the rule); `.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 band, above the navigation bar; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button of this layout (a grey bevelled square with the 2px `outset` border, `--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` (26px 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__head` holds the `.ds-brand` and `.ds-nav__tagline`; `.ds-nav__bar` is the blue bar of `.ds-nav__link` items divided by faint vertical lines. The current item is a tab in the sheet's colour with heading-coloured text and no text shadow: `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 journal).\n- `.ds-breadcrumb`: pale 11px strip under the bar: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`ยป`), ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the journal's introduction, once, at the top of the main column: a pale green box with a 4px green top rule, `.ds-hero__title` (18px), `.ds-hero__lead` (13px) and `.ds-hero__actions` with one button and one text link. It is not a banner: no large type, no full-width band.\n- `.ds-page-header`: the head of an inner page, used instead of the hero and never together with it: `.ds-page-header__main` holds the `.ds-page-header__title` (18px Trebuchet, black) and one `.ds-page-header__text` line (11px grey); `.ds-page-header__action` at the right holds one button or one text link, aligned to the bottom of the text. A 1px solid `--color-border` rule closes it. No box, no tint, no top rule.\n- `.ds-stat`: one summary figure: a `.ds-stat__value` (18px bold Trebuchet, black) over a `.ds-stat__label` (11px grey, lowercase). Three to five of them sit in a `.ds-stats` strip: one pale `--color-surface-alt` box with a 1px outline, the cells equal in width and divided by 1px vertical rules. This is the era's \"site statistics\" line made into a row; do not turn the cells into separate cards and do not enlarge the numbers.\n- `.ds-post`: one entry: `.ds-post__date` above, a `.ds-prose` body, `.ds-post__meta` below (time, category, comment count, permalink 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 rules.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, square-bulleted lists with orange markers, `code`, `blockquote` with a 1px left 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 grey meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: grey bevelled push button, bold, for the main action. `.ds-button--secondary` is lighter with normal weight. `.ds-button--danger` is the destructive action (delete, discard): the same grey bevelled button with its bold label in `--color-danger`; the button itself is never filled red. `disabled` or `is-disabled` greys it; `is-active` flips the bevel. The surface set shades it faintly from a lighter top (`--fill-button`); on hover the shade lightens (`--fill-button-hover`) and nothing else changes. Inputs carry a 5px shade under their top edge (`--fill-input`), and the footer strip is shaded like the bars (`--fill-inverse`). Group with `.ds-buttons`.\n- `.ds-form`: the comment form: a pale bordered box with `.ds-form__title`, rows (`.ds-form__row`) of a bold `.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` aligns buttons with the fields and keeps them on one row: its indent shrinks before a button wraps.\n- `.ds-table`: data table (archives, statistics) at 11px: blue `th` row, 1px outline, rows divided by `--color-border-muted`, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a grey group row.\n- `.ds-list`: list of entries or links divided by 1px rules. Each `.ds-list__item` has a `.ds-list__title` link, an optional `.ds-list__excerpt` and a `.ds-list__meta` line.\n- `.ds-panel`: 1px bordered box with a grey `.ds-panel__title` strip and a `.ds-panel__body`. Use it sparingly, for an author note or a boxed aside; most content is not boxed.\n- `.ds-grid`: two-column grid of `.ds-grid__cell` boxes with flat tints (`--2`, `--3`, `--4` select the other fills), each with `.ds-grid__title` and `.ds-grid__text`. For section indexes and link boxes.\n- `.ds-tabs`: row of square `.ds-tabs__tab` links standing on a 1px rule; `is-current` is white and joined to 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\", \"updated\"); `.ds-badge--tag` is a grey outlined category tag. Status labels are `.ds-badge--success` (open, paid, online), `.ds-badge--warning` (pending, closing, due soon) and `.ds-badge--danger` (closed, failed, overdue): a white square label with a 1px outline and bold 11px lowercase word, both in the status colour. Use them in table cells and meta lines; one or two words, no icon, no fill.\n- `.ds-sidebar`: right column at 11px. Each `.ds-sidebar__block` has a green uppercase `.ds-sidebar__title` strip and a `.ds-sidebar__list` of `.ds-sidebar__item` rows with `.ds-sidebar__link` and optional `.ds-sidebar__count`; `.ds-sidebar__list--two` sets a blogroll in two columns; `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button. `.ds-sidebar__block--box` tints one block.\n- `.ds-notice`: one-line message, pale green with a 1px green 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: previous, numbers, next. `is-current` is grey and bold; `is-disabled` is faded.\n- `.ds-dialog`: a 1px bordered box with a blue `.ds-dialog__title` bar, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. It sits in the page flow, optionally on `.ds-dialog__backdrop` (the page colour). No shadow, no dimmed overlay.\n- `.ds-empty`: outlined box with a centred grey `.ds-empty__text` and one secondary button.\n- `.ds-footer`: dark strip closing the sheet: one `.ds-footer__row` with a copyright line 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- `ds-tooltip`: a hint shown on hover or focus of a link; the tip is a child with class ds-tooltip__tip.\n\n## Never\n\n- `block-gap <= 30px`: blocks sit one text line or one rule apart, never further.\n- `content-width <= 760px`: 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`: no reference has a CSS radius; every box is square.\n- `box-shadow = none`: nothing casts a shadow; boxes are told apart by 1px lines and flat tints.\n- `text-shadow = none`: text is flat, including on bars.\n- `border-width <= 4px`: lines are 1px, control bevels 2px, emphasis rules 4px.\n- `gradient-fills <= 12%`: bars, buttons and the footer strip are faintly shaded from top to bottom; panels, tints and the page 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 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` (1px rule below, `--space-3` padding), a new strip copies `.ds-sidebar__title` or the blue bar, a new tinted box copies `.ds-grid__cell`. 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 rather than a new number. Keep text at 11px to 18px, corners square, fills flat, and separate things with a 1px line in `--border-style` before reaching for a box.\n", "components.css": "/* Layout tokens (structure part). Taken from the 2004 to 2006 weblog references. */\n:root {\n --size-page: 740px;\n --size-main: 470px;\n --size-sidebar: 210px;\n --size-header: 76px;\n --size-label: 110px;\n --size-field: 220px;\n --size-dialog: 340px;\n --size-bullet: 5px;\n --size-num: 70px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 15px;\n --space-6: 20px;\n --space-7: 30px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: 0 0 var(--space-6);\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 white sheet: a fixed centred column with hairline sides. */\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: var(--radius-page);\n}\n.ds-page__columns {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: var(--space-5) var(--space-6) var(--space-7);\n}\n.ds-page__main {\n width: var(--size-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/* Small caption above a group of components inside the main column. */\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/* Meta, tool and footer links. */\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/* Bold inline link, for the one link a paragraph is about. */\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 ---------- */\n.ds-nav {\n border-top: var(--border-width-strong) var(--border-style) var(--color-bar-alt);\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n box-sizing: border-box;\n min-height: var(--size-header);\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 text-align: right;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__bar {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-4);\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 25%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\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: a tab in the sheet's colour. One selector per view; an entry belongs to the journal. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#entry:target) .ds-nav__link[href=\"#journal\"],\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(--color-canvas);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\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-3) var(--space-6);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\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: the weblog's masthead note ---------- */\n.ds-hero {\n margin: 0 0 var(--space-6);\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\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: 0 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\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-5);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\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 strip of figures, a number over its label ---------- */\n.ds-stats {\n display: flex;\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat {\n flex: 1;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\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);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- post and prose ---------- */\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__date {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading-alt);\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}\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 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-alt);\n}\n.ds-prose blockquote {\n margin: 0 0 var(--space-5) var(--space-5);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\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 border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-comment {\n padding: var(--space-3) 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 padding-bottom: 0;\n}\n/* The author's own reply is tinted. */\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: 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/* Destructive action: the same push button, lettered in the error red. */\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: the comment form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4) 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 box-shadow: var(--shadow-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 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-size: var(--text-small);\n font-weight: var(--weight-bold);\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 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: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: var(--border-style);\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 is a spacer that gives way first, so four\n buttons stay on one row when a type set makes them wide (capitals, a broader face). */\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 white-space: nowrap;\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\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: recent entries ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.ds-list__title {\n color: var(--color-link);\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 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: var(--space-2) 0 0;\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/* ---------- 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 border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\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: tinted link boxes ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n box-shadow: var(--shadow-panel);\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 border-color: var(--color-border-strong);\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n}\n\n/* ---------- tabs: square tabs on a rule ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-3);\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-2) var(--space-4);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\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(--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-4) var(--space-3) 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\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\" or \"updated\" word after a title. */\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n/* A category 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 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 ---------- */\n.ds-sidebar {\n width: var(--size-sidebar);\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: 0 0 var(--space-6);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-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-transform: uppercase;\n letter-spacing: calc(var(--space-1) * 2);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0 var(--space-3);\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 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 padding: 0 var(--space-3);\n}\n.ds-sidebar__search {\n display: flex;\n gap: var(--space-2);\n padding: 0 var(--space-3);\n}\n/* A tinted box for the one block that must stand out (subscribe, search). */\n.ds-sidebar__block--box {\n padding: 0 0 var(--space-4);\n background: var(--color-fill-1);\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-3) var(--space-4);\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: 0 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-text-muted);\n color: var(--color-heading);\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 bordered box with a title bar, 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: 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-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 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-5);\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 ---------- */\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}\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-4);\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 color: var(--color-canvas);\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-tooltip {\n position: relative;\n display: inline-block;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 5;\n width: max-content;\n max-width: calc(var(--space-6) * 8);\n padding: var(--space-1) 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-ui);\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, weblog specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n

notes on print, type and small machines
written most weekdays since 2002

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

A journal about making small things well

\n

One person, one press and a drawer of half-finished circuits. New entries appear at the top.

\n
\n Read the latest entry\n or browse the archives »\n
\n
\n\n
\n

14 March 2005

\n
\n

The drying rack is finished

\n

After three weekends of sanding, the rack finally holds forty sheets without sagging. I built it from offcuts that the timber yard on Fennick Row was about to throw away, and it cost less than a tin of ink.

\n

The first run on it was a set of two-colour postcards. Registration drifted by about a millimetre, which nobody but me will notice.

\n

What I would change

\n

The shelves are a little too close together. If you build one, leave room for your hand.

\n
    \n
  • Space the dowels at 35mm rather than 25mm.
    • \n
  • Wax the runners before the first use.
    • \n
  • Label the shelves, or you will lose track of the order.
    • \n
\n

A note on the counter script

\n

The sheet counter on this page is a few lines of shell. Run count-sheets --week and it prints the total; the source is in the projects section.

\n
\n

Posted at 9:42 pm in Workshop | 3 comments | PermalinkLink to this entry only

\n
\n\n
\n

Earlier this month

\n
    \n
  • \n Ink that will not dry in February updated\n

    Cold rooms and oil-based ink do not get along. Three fixes that worked and one that ruined a blanket.

    \n

    9 March 2005 | Workshop | 7 comments

    \n
    • \n
  • \n A week with the borrowed plotter\n

    It is slow, it is loud, and it draws a better circle than I ever will.

    \n

    5 March 2005 | Machines | 21 comments

    \n
    • \n
  • \n Reading list for the spring\n

    Five books on paper, two on glue, none on productivity.

    \n

    1 March 2005 | Reading | 3 comments

    \n
    • \n
\n
\n\n
\n

Sections

\n
\n
\n

Workshop

\n

Jigs, racks and benches. 84 entries. Browse »

\n
\n
\n

Machines

\n

Plotters, presses and repairs. 51 entries. Browse »

\n
\n
\n

Reading

\n

Books and short reviews. 37 entries. Browse »

\n
\n
\n

Asides

\n

One-line links, no comments. 412 entries. Browse »

\n
\n
\n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Workshop
    4. \n
  4. »
    5. \n
  5. Ink that will not dry in February
    6. \n
\n
\n
\n\n
\n
\n

Ink that will not dry in February

\n

9 March 2005, filed under Workshop. Three comments so far.

\n
\n
All entries
\n
\n\n
\n
\n

Cold rooms and oil-based ink do not get along. The cards I printed on the first of the month were still tacky on the eighth, and the shed has not been above nine degrees since Christmas.

\n

Ink dries by taking up air, not by losing water. Warm the sheet, not the tin.

\n

Three things worked: a drop of drier in the ink, a fan heater under the rack for the first hour, and thinner paper. Laying the sheets on the press blanket to warm them did not; the blanket now has forty faint postcards on it.

\n
\n

Posted at 8:15 pm in Workshop | Updated 11 March | PermalinkLink to this entry only

\n
\n\n
\n

More on this

\n \n
\n\n
\n

Three comments

\n
    \n
  1. \n

    Cobalt drier, two drops to a walnut of ink. Any more and it skins over in the tin.

    \n

    IBIlse Brandt | 9 March 2005, 9:02 pm

    \n
    2. \n
  2. \n

    Two drops it is. The tin I ruined had about ten in it.

    \n

    MEMara Ellison | 9 March 2005, 9:40 pm

    \n
    3. \n
  3. \n

    Which wax did you use on the runners of the rack? Mine stick in this weather.

    \n

    JPJonas Pell | 9 March 2005, 10:05 pm | edit | delete

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

Delete your comment?

\n
\n

The comment you posted at 10:05 pm will be removed from this entry. This cannot be undone.

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

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

\n

Not posted. One field below needs another look.

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

Leave 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. Journal
    2. \n
  2. »
    3. \n
  3. Archives
    4. \n
  4. »
    5. \n
  5. 2005
    6. \n
\n
\n
\n\n
\n
\n

Archives for 2005

\n

Every entry written this year, newest month first.

\n
\n
Latest entries
\n
\n\n
    \n
  • 57 entries
    • \n
  • 483 comments
    • \n
  • 4 sections
    • \n
  • 31,400 words
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthLongest entryDiscussionComments
March 2005Ink that will not dry in Februaryopen43
February 2005Paper weights, explained badlyopen118
January 2005Resolutions I have already brokenclosing96
December 2004Cards for people I likeclosed72
November 2004The shed gets a windowclosed154
\n
\n
\n\n
\n \n
\n\n
\n

Newest section: Bookbinding

\n
\n

No entries are filed under “Bookbinding” yet.

\n Back to the journal\n
\n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. About and contact
    4. \n
\n
\n
\n\n
\n
\n

About and contact

\n

Who writes this, how it is made and how to reach her.

\n
\n
Read the journal
\n
\n\n
\n
\n

About the author

\n
\n

Mara Ellison prints cards and repairs old plotters in a shed behind her house. She answers mail slowly and comments quickly. 12 entries this month, filed under workshop machines. Comments on an entry are open for thirty days, closing in the last week and closed after that.

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

What this is

\n

chronoskin began in 2002 as a list of things that went wrong on the press. It still is that, with three years of archives and the occasional thing that went right.

\n

What it is not

\n

A shop, a tutorial or a place to ask what your old press is worth. I do not know what your old press is worth.

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

Write to me

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

Replies take about a week.

\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.s01.p03.t04.u01\",\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-1341\",\n \"short\": \"v1-wl-1341\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #4a525a;\n --color-canvas: #4a525a;\n --color-surface: #4a525a;\n --color-surface-alt: #505860;\n --color-surface-strong: #586068;\n --color-bar: #687078;\n --color-bar-text: #ffffff;\n --color-bar-alt: #606870;\n --color-bar-alt-text: #eeeeee;\n --color-inverse: #dddddd;\n --color-inverse-text: #4a525a;\n --color-text: #eeeeee;\n --color-text-muted: #aaaaaa;\n --color-heading: #ffffff;\n --color-heading-alt: #cccccc;\n --color-link: #ffcc66;\n --color-link-quiet: #cccccc;\n --color-link-visited: #cccc99;\n --color-link-hover: #ffffff;\n --color-link-active: #ff9900;\n --color-border: #777777;\n --color-border-strong: #888888;\n --color-border-muted: #666666;\n --color-accent: #ff9900;\n --color-accent-text: #333333;\n --color-accent-alt: #ffcc66;\n --color-fill-1: #505860;\n --color-fill-2: #586068;\n --color-fill-3: #606870;\n --color-fill-4: #687078;\n --color-button: #586068;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #505860;\n --color-button-secondary-text: #dddddd;\n --color-input: #dddddd;\n --color-input-text: #333333;\n --color-input-border: #888888;\n --color-disabled: #505860;\n --color-disabled-text: #98a0a0;\n --color-danger: #cc9999;\n --color-danger-surface: #505860;\n --color-success: #bbcc99;\n --color-warning: #ffcc66;\n --color-notice: #586068;\n --color-notice-text: #eeeeee;\n --color-focus: #ffffff;\n --color-shadow: #333333;\n --color-overlay: #586068;\n}\n\n/* @part type */\n:root {\n --font-body: \"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: 4px;\n --border-style: solid;\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: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 12%), var(--color-bar));\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 12%), var(--color-bar-alt));\n --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%), var(--color-inverse));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 55%), var(--color-button));\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 75%), color-mix(in srgb, var(--color-button), white 20%));\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 55%), var(--color-button-secondary));\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 8%), var(--color-input) 5px);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }