{ "id": "v1-wl-1111", "long_id": "v1.weblogs-2000s.blog.s01.p01.t01.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": "pure", "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-1111", "preview_url": "https://chrono.skin/s/v1-wl-1111/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\n- `--font-body` and `--font-ui` are Verdana, Geneva, Arial, sans-serif. `--font-heading` is \"Trebuchet MS\", \"Lucida Grande\", Verdana, sans-serif, used for the site name, entry titles, list titles and form and grid titles. `--font-mono` (Courier New) is only for code. No other family is used; all are system fonts, so nothing was substituted.\n- `--text-base` 12px with `--line-body` 1.5 is entry text. `--text-small` 11px is the whole sidebar, meta lines, tables, notices, breadcrumb, footer and form labels; `--text-ui` 11px is navigation, buttons and inputs. `--text-large` 13px is only the lead line of the hero.\n- `--text-h1` 18px bold is an entry title, `--text-h2` 14px bold a sub-heading or list title, `--text-h3` 12px bold Verdana a minor heading. `--text-display` 26px bold is the site name and the largest text on the page. Headings are never uppercased and never tracked (`--heading-tracking` 0).\n- The only uppercase text is `.ds-sidebar__title`: 11px bold, uppercase, tracked 2px (`calc(var(--space-1) * 2)`, because the type part has no token for the tracking of secondary titles).\n- `--color-text` #333333 is body text; `--color-heading` #000000 is titles; `--color-heading-alt` #7b9905 is h2 inside an entry and the entry date; `--color-text-muted` #888888 is dates, counts and captions.\n- `--color-link` #40659b. Links are not underlined (`--link-decoration: none`) and gain an underline on hover, where they turn `--color-link-hover` #173797; visited links fade to `--color-link-visited` #888888; `--color-link-active` is #cc0000. `--color-link-quiet` #666666 is for category, permalink and tool links. Footer links are the one place links are underlined at rest, because they sit on the dark strip.\n- `--color-bar` #3874bb with `--fill-bar` (12% lighter at the top) fills the navigation bar, table heads and dialog titles; text on it is white, bold 11px. `--color-bar-alt` #538620 with `--fill-bar-alt` fills sidebar title strips and the 4px line at the top of the sheet. `--color-inverse` #333333 with `--color-inverse-text` #cccccc is the footer only.\n- Surfaces: `--color-surface` white; `--color-surface-alt` #f8f8f8 for alternate table rows, the form and the breadcrumb strip; `--color-surface-strong` #e8e8e8 for panel titles, idle tabs and the current page number.\n- Borders: `--color-border` #cccccc for every ordinary 1px line, around boxes and between entries and list rows alike, all in `--border-style` so a dotted, dashed or grooved surface set changes every one of them; `--color-border-muted` #eeeeee between table rows; `--color-border-strong` #a2bd43 for the 4px rule on top of the hero and the outline of notices. `--border-width-strong` is 4px and is used only as a top rule.\n- `--color-fill-1` #e8f7e8, `--color-fill-2` #efefef, `--color-fill-3` #cce181 and `--color-fill-4` #eaeaee are the flat tints of grid cells; fill-1 is also the hero and the boxed sidebar block. `--color-accent` #ff9900 is the count badge and list bullets; `--color-accent-alt` #cc6600 is the \"updated\" word.\n- Status colours come from the same family, not from a new one: `--color-success` #538620 is the green of the sidebar strips, `--color-warning` #cc6600 the dark orange of the \"updated\" word, `--color-danger` #cc0000 the error red. 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` #e1e1de 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)`; `outset` and `inset` are written as keywords in `components.css` because `--border-style` holds only `solid`.\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\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\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 <= 26px`: the largest text measured is the 26px site name; entry titles are 18px.\n- `font-size >= 9px`: the smallest text measured is 9px; the pack itself stops at 11px.\n- `font-families <= 3`: Verdana, Trebuchet MS for headings and a monospace for code.\n- `line-height <= 1.7`: body line height ranges from 1.4 to 1.7 across the references.\n- `line-height >= 1.4`: text is small but never set solid.\n- `letter-spacing <= 2px`: only the small sidebar titles are tracked.\n- `uppercase-text <= 3%`: only sidebar titles are uppercase.\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", "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 | Permalink

\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 | Permalink

\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

    Ilse 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

    Mara 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

    Jonas 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.p01.t01.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"weblogs-2000s\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-wl-1111\",\n \"short\": \"v1-wl-1111\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #eaeaee;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #e8e8e8;\n --color-bar: #3874bb;\n --color-bar-text: #ffffff;\n --color-bar-alt: #538620;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #333333;\n --color-inverse-text: #cccccc;\n --color-text: #333333;\n --color-text-muted: #888888;\n --color-heading: #000000;\n --color-heading-alt: #7b9905;\n --color-link: #40659b;\n --color-link-quiet: #666666;\n --color-link-visited: #888888;\n --color-link-hover: #173797;\n --color-link-active: #cc0000;\n --color-border: #cccccc;\n --color-border-strong: #a2bd43;\n --color-border-muted: #eeeeee;\n --color-accent: #ff9900;\n --color-accent-text: #000000;\n --color-accent-alt: #cc6600;\n --color-fill-1: #e8f7e8;\n --color-fill-2: #efefef;\n --color-fill-3: #cce181;\n --color-fill-4: #eaeaee;\n --color-button: #e1e1de;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #efefef;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #f5f0f1;\n --color-success: #538620;\n --color-warning: #cc6600;\n --color-notice: #e8f7e8;\n --color-notice-text: #333333;\n --color-focus: #333333;\n --color-shadow: #333333;\n --color-overlay: #eaeaee;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", \"Lucida Grande\", Verdana, sans-serif;\n --font-ui: Verdana, Geneva, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 26px;\n --text-h1: 18px;\n --text-h2: 14px;\n --text-h3: 12px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --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" } }