{ "id": "v1-wl-4243", "long_id": "v1.weblogs-2000s.blog.s04.p02.t04.u03", "name": "Date-gutter journal with a left column, 2005", "era": { "slug": "weblogs-2000s", "code": "wl", "name": "Weblogs", "years": [ 2002, 2007 ], "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A one-author journal as published between 2002 and 2007 with the publishing tools of the day: a white sheet standing clear of a tinted page, a flat banner drawn across its top with the site name in the middle, and under it a narrow left column that carries the menu, a month calendar and the link lists. The entries run down the wider right column, each hung on a small calendar leaf in a date gutter, and between them a linklog of one-line items keeps the same gutter for its dates. This token set makes it a peach and rust page in 13px Trebuchet with small tracked capitals for every heading, purple links without underlines, corners eased by a few pixels and one soft shadow under the sheet.", "url": "https://chrono.skin/s/v1-wl-4243", "preview_url": "https://chrono.skin/s/v1-wl-4243/specimen.html", "files": { "STYLE.md": "# Date-gutter journal with a left column, 2005\n\n## Summary\n\nA one-author journal as published between 2002 and 2007 with the publishing tools of the day: a white sheet standing clear of a tinted page, a flat banner drawn across its top with the site name in the middle, and under it a narrow left column that carries the menu, a month calendar and the link lists. The entries run down the wider right column, each hung on a small calendar leaf in a date gutter, and between them a linklog of one-line items keeps the same gutter for its dates. This token set makes it a peach and rust page in 13px Trebuchet with small tracked capitals for every heading, purple links without underlines, corners eased by a few pixels and one soft shadow under the sheet.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (780px) wide and always centred, in `--color-canvas` on `--fill-page`, outlined on all four sides with a 1px `--color-border` line, with `--space-4` (10px) of padding inside the outline and `--space-6` of page showing above it. No text is ever placed on the page outside the sheet. Never widen the sheet, never let it stretch and never move it to one side.\n- `.ds-page__columns` holds the header and the page in a floated layout, as the period built it, `--size-side` (170px) for the left column and the rest (about 540px) for the right, `--space-6` apart. From the top: `.ds-nav__banner` across the sheet; then `.ds-nav__menu` floats at the head of the left column and `.ds-sidebar` floats under it (`clear: left`), while `.ds-page__main` keeps clear of both by its left margin and runs down the right. `.ds-nav` itself has no box (`display: contents`): it only groups the banner and the menu. The `.ds-footer` clears the floats and closes the sheet.\n- The banner is `--size-banner` (116px) high, filled with `--fill-bar`, with the `.ds-brand` and a one-line tagline centred in it. There is no horizontal navigation bar anywhere: the site navigation is the vertical `.ds-nav__menu` at the head of the left column, six to eight words one under the other between hairlines, the current one filled with `--fill-bar`.\n- The left column is always on the left and always narrow. Under the menu it carries, in this order when present: the `.ds-calendar`, the search box, category and archive lists, the list of other sites, a short colophon. Blocks are `--space-6` apart and have no boxes, only a title on a hairline.\n- `.ds-page__main` is ruled off from the left column by a 1px `--color-border` line with `--space-6` of padding inside it. It is a single stack. An entry (`.ds-post`) is a grid of the date gutter (`--size-gutter`, 46px) and the text, `--space-5` apart; the linklog (`.ds-list`) uses the same gutter for its dates, so leaves, dates and text line up down the page. Other blocks (`.ds-page__section`) take the full width of the column. Entries and blocks are closed by a 1px rule with `--space-6` above and below it; `.ds-page__label` is the small heading on a hairline above a block.\n- Inner pages (a single entry, a field list or archive, the about page, a listing or settings page of an application) keep the sheet, the left column with the menu, and the footer. The banner shrinks to one line, `.ds-nav__banner--slim` (`--size-banner-slim`, 44px), with the brand at the left and the tagline small at the right. The hero is not used: the right column opens with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one muted line, one button at the right, a 1px `--color-border-strong` rule below). Under it, in this order when present: the `.ds-stats` row, `.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 on its date leaf, related links, the `.ds-comments` thread, and the comment form last. Tabs never go in the banner or the menu. The left column keeps the menu and swaps its blocks for lists that belong to the page. In the specimen the banner turns slim by a selector on every view but the home view; a real inner page puts `.ds-nav__banner--slim` on its banner.\n- Views: the specimen is one small journal with four views. `journal` is the front page: the pinned note, the newest entry on its date leaf, the linklog, the grid of field lists, and the left column with the calendar. `entry` is one entry with its comments: related links, the thread, the dialog that deletes your own comment, the notices that answer a posted comment, and the comment form. `lists` is one field list: figures, tabs over the table of months, pagination, and an empty list. `about` is the panel on the keeper, a short description and a form for notes. The menu links to all four; entries are also reached from titles, comment counts, the calendar and the left column.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs and sidebar rows; `--space-2` 3px is the padding of menu rows, table cells, tabs and badges, and the gap between a title and its hairline; `--space-3` 6px is the padding of linklog rows, the gap between buttons and the gap under a sidebar title; `--space-4` 10px is the padding of the sheet, panels, notices, the form and the hero, and the grid gap; `--space-5` 15px is the gap between paragraphs, between the gutter and the text, and between tabs; `--space-6` 20px is the gap between columns, between sidebar blocks and around the rules between blocks; `--space-7` 30px is list indent and the bottom of the page.\n- Fixed sizes: `--size-label` 100px 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`; `.ds-page__columns` holds `.ds-nav`, then `.ds-sidebar` and `.ds-page__main` (the breadcrumb is the first thing in the main column of an inner page). `.ds-page__section` is a block of the main column closed by a 1px rule (`--last` drops the rule); `.ds-page__label` is its small heading.\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, centred in the banner (at the left of the slim banner on inner pages); a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button of this layout (`--fill-button` over `--color-button`, the 2px `outset` border in the button colour, `--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` with `--weight-display`, `--display-tracking` and `--heading-transform`, in `--color-bar-text` because it sits on the banner. In the slim banner both drop to `--text-h1`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo; keep the classes and swap the text and the drawing.\n- `.ds-nav`: the site header and navigation, a group without a box of its own, written once above the views. `.ds-nav__banner` is the drawn banner with the `.ds-brand` and a `.ds-nav__tagline` (`--slim` for inner pages); `.ds-nav__menu` is the vertical list of `.ds-nav__link` rows at the head of the left column, bold 11px between hairlines. The current item is filled with `--fill-bar` and lettered in `--color-bar-text`: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href`. Hover tints the row with `--color-surface-alt`.\n- `.ds-breadcrumb`: an 11px boxed strip in `--color-surface-alt` at the head of the right column of an inner page: `.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 `--color-fill-1` box with a 1px outline and centred text: `.ds-hero__title` (`--text-h1`), `.ds-hero__lead` and `.ds-hero__actions` with one button and one text link. It is a note, 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` and one `.ds-page-header__text` line (11px, muted); `.ds-page-header__action` at the right holds one button, aligned to the bottom of the text. A 1px `--color-border-strong` rule closes it. No box, no tint.\n- `.ds-stat`: one summary figure: a `.ds-stat__value` (`--text-h1`, bold) over a `.ds-stat__label` (11px, muted, lowercase), under a 2px `--color-border-strong` rule of its own. Three to five of them sit in a `.ds-stats` row, equal in width and `--space-4` apart. Do not box the figures and do not enlarge the numbers.\n- `.ds-post`: one entry: the `.ds-post__date` leaf in the gutter (a `.ds-post__month` strip in `--fill-bar-alt` over a `.ds-post__day` number on `--color-surface-alt`, 1px outline), and `.ds-post__body` with a `.ds-prose` text and a `.ds-post__meta` line (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 `--color-border-muted` rules.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, square-bulleted lists with `--color-accent` 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 quiet meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: bevelled push button in `--color-button` with a 2px `outset` border, bold, for the main action. `.ds-button--secondary` is lighter with normal weight. `.ds-button--danger` is the destructive action (delete, discard): the same bevelled button with its bold label in `--color-danger`; the button itself is never filled with the danger colour. `disabled` or `is-disabled` greys it; `is-active` flips the bevel. Hover does not change the fill. Group with `.ds-buttons`.\n- `.ds-form`: the comment form: a `--color-surface-alt` box with a 1px outline 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.\n- `.ds-table`: data table (archives, field lists, statistics) at 11px: a `--color-surface-strong` head row with bold `--color-heading` text and a 1px `--color-border-strong` rule under it, no outer outline, rows divided by 1px `--color-border` lines, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row.\n- `.ds-list`: the linklog, a list of short dated items. Each `.ds-list__item` has its date in `.ds-list__time` (11px, muted, centred in the gutter) and a `.ds-list__body` with one `.ds-list__excerpt` paragraph that opens with the bold `.ds-list__title` link and continues with a sentence of remark, and a `.ds-list__meta` line. Rows are divided by 1px `--color-border-muted` lines. Use it for any list of items that have a date or a short key; put the key in the gutter.\n- `.ds-panel`: 1px bordered box with a `--color-surface-strong` `.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`: a row of words standing on a 1px rule, `--space-5` apart; each `.ds-tabs__tab` is a link, and `is-current` is bold in `--color-heading` with a 3px `--color-border-strong` underscore that replaces the rule beneath it. The content goes in `.ds-tabs__body`. No boxes, no fills.\n- `.ds-badge`: small square count on `--fill-accent`. `.ds-badge--alt` is a bare coloured word (\"new\", \"updated\"); `.ds-badge--tag` is an 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 square label on `--color-surface` with a 1px outline and bold small 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`: the left column under the menu, at 11px. Each `.ds-sidebar__block` has a `.ds-sidebar__title` (`--text-h3`, `--color-heading-alt`, on a hairline) and a `.ds-sidebar__list` of `.ds-sidebar__item` rows with `.ds-sidebar__link` and optional `.ds-sidebar__count`; `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button. `.ds-calendar` is the month calendar: a `--color-surface-alt` box with a `.ds-calendar__caption` (previous month, month, next month) and a seven-column `.ds-calendar__grid` of `.ds-calendar__head` initials and `.ds-calendar__day` cells; `--link` marks a day with entries, `--off` a day that has not come, and `is-current` is today on `--fill-accent`.\n- `.ds-notice`: one-line message, `--color-notice` with a 1px `--color-border-strong` outline, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and outline. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small 1px boxed `.ds-pagination__link` items: previous, numbers, next. `is-current` is `--color-surface-strong` and bold; `is-disabled` is faded.\n- `.ds-dialog`: a 1px bordered box with a `--fill-bar` `.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), under the soft `--shadow-dialog`. No dimmed overlay.\n- `.ds-empty`: outlined box with a centred muted `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a `--fill-inverse` strip closing the sheet, inset like the banner, with centred 11px text: one `.ds-footer__text` line and a row of underlined `.ds-footer__link` items in `.ds-footer__links`.\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 <= 40px`: blocks sit one 1px rule apart, never further.\n- `content-width <= 780px`: 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`: the gloss is on square bars; nothing is rounded.\n- `box-shadow = none`: no box casts a shadow.\n- `gradient-fills <= 8%`: only the strip, the table head and the dialog title carry the gloss.\n- `border-width <= 3px`: lines are 1px, emphasis rules 3px.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new boxed block copies `.ds-panel` (1px `--color-border` outline, `--color-surface-strong` title strip, `--space-4` padding), a new row type copies `.ds-list__item` (the key in the `--size-gutter` column, a 1px rule below, `--space-3` padding), a new left-column block copies `.ds-sidebar__block` (a title on a hairline, then a plain list), a new tinted box copies `.ds-grid__cell`. Anything that has a date hangs it in the gutter rather than printing it inline. 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 corners square, fills flat, the left column narrow, and separate things with a 1px solid or dotted line before reaching for a box.\n", "components.css": "/* Layout tokens (structure part). A journal with a date gutter, 2002 to 2007:\n a drawn banner, the menu and a calendar in a left column, entries hung on date leaves. */\n:root {\n --size-page: 780px;\n --size-side: 170px;\n --size-banner: 116px;\n --size-banner-slim: 44px;\n --size-gutter: 46px;\n --size-label: 100px;\n --size-field: 220px;\n --size-dialog: 340px;\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: var(--space-6) 0 var(--space-7);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet: a fixed centred card standing clear of the window, outlined all round. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n/* The banner across, then a floated layout as the period built it: the menu and, in each view,\n the sidebar float down the narrow left column; the entries keep clear of it by their margin. */\n.ds-page__columns {\n display: flow-root;\n}\n.ds-page__main {\n box-sizing: border-box;\n min-width: 0;\n min-height: calc(var(--size-banner) * 2);\n margin: var(--space-5) var(--space-4) 0 calc(var(--size-side) + var(--space-6));\n padding: 0 0 var(--space-6) var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section {\n margin: 0 0 var(--space-6);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: 0;\n}\n/* Caption above a group of components: a small heading on a hairline. */\n.ds-page__label {\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\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-alt);\n}\n\n/* ---------- nav: a drawn banner across the sheet, the menu at the head of the left column ---------- */\n.ds-nav {\n display: contents;\n}\n.ds-nav__banner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--size-banner);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar);\n border-radius: var(--radius-page);\n color: var(--color-bar-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__banner--slim,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n min-height: var(--size-banner-slim);\n padding-top: 0;\n padding-bottom: 0;\n}\n/* The site's mark and name, centred in the banner. The tile is dressed like the primary button. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: max(calc(var(--text-display) * 1.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-bar-text);\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/* On the one-line banner of an inner page the brand drops to title size. */\n.ds-nav__banner--slim .ds-brand__mark,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-brand__mark {\n width: calc(var(--text-h1) * 1.6);\n height: calc(var(--text-h1) * 1.6);\n}\n.ds-nav__banner--slim .ds-brand__name,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-brand__name {\n font-size: var(--text-h1);\n}\n.ds-nav__tagline {\n margin: var(--space-2) 0 0;\n font-size: var(--text-base);\n color: var(--color-bar-text);\n}\n.ds-nav__banner--slim .ds-nav__tagline,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-nav__tagline {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-nav__menu {\n float: left;\n box-sizing: border-box;\n width: calc(var(--size-side) - var(--space-4));\n margin: var(--space-5) 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\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: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item. One selector per view marks it; with no view named, the home item. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#entry:target) .ds-nav__link[href=\"#entry\"],\n.ds-page:has(#lists:target) .ds-nav__link[href=\"#lists\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb: a boxed line at the head of the right column ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\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 note pinned above the first entry ---------- */\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: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\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 justify-content: center;\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-strong);\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: figures in a row, each under its own short rule ---------- */\n.ds-stats {\n display: flex;\n gap: var(--space-4);\n margin: 0 0 var(--space-6);\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1;\n min-width: 0;\n padding: var(--space-2) 0 0;\n border-top: calc(var(--border-width) * 2) var(--border-style) var(--color-border-strong);\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: an entry hung on its date leaf ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-gutter) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\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-post__date {\n margin: var(--space-2) 0 0;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n overflow: hidden;\n text-align: center;\n}\n.ds-post__month {\n display: block;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-post__day {\n display: block;\n padding: var(--space-2) 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-post__body {\n min-width: 0;\n}\n.ds-post__meta {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- comments: the thread under an entry ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-comment:last-child {\n border-bottom: 0;\n}\n/* The keeper'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/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n color: var(--color-heading-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/* ---------- 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/* ---------- 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.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding-left: var(--size-label);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-small);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: left;\n}\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: top;\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n width: var(--size-num);\n text-align: right;\n}\n.ds-table__group td {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- list: the linklog, short items with the time in the date gutter ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-gutter) minmax(0, 1fr);\n column-gap: var(--space-5);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.ds-list__time {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__excerpt {\n margin: 0;\n}\n.ds-list__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n 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: words on a rule, the current one underscored ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-1);\n border-bottom: calc(var(--border-width) * 3) var(--border-style) transparent;\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 border-bottom-color: var(--color-border-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-tabs__body {\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-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: the left column under the menu ---------- */\n.ds-sidebar {\n float: left;\n clear: left;\n box-sizing: border-box;\n width: calc(var(--size-side) - var(--space-4));\n margin: 0 0 0 var(--space-4);\n padding: 0 0 var(--space-6);\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: var(--space-6) 0 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\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-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n}\n.ds-sidebar__search {\n display: flex;\n gap: var(--space-2);\n}\n/* The month calendar: days with entries are links, today is the accent square. */\n.ds-calendar {\n padding: var(--space-2);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-calendar__caption {\n display: flex;\n justify-content: space-between;\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-2) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-calendar__grid {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-calendar__head {\n color: var(--color-text-muted);\n}\n.ds-calendar__day {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n}\n.ds-calendar__day--link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-calendar__day--link:hover,\n.ds-calendar__day--link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-calendar__day.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-calendar__day--off {\n color: var(--color-text-muted);\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: a centred strip closing the sheet ---------- */\n.ds-footer {\n clear: both;\n margin: var(--space-4) 0 0;\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n border-radius: var(--radius-page);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n margin: var(--space-2) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--space-4) * 2);\n height: calc(var(--space-4) * 2);\n margin-right: var(--space-2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n vertical-align: middle;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-base) * 0.7);\n height: calc(var(--text-base) * 0.7);\n margin-left: var(--space-2);\n margin-bottom: calc(var(--space-2) + var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n display: block;\n flex: 1 1 auto;\n margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-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, date-gutter journal specimen\n\n\n\n\n
\n\n
\n\n
\n
\n \n \n chronoskin\n \n

moths, owls and the sky after midnight, written up the morning after

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

A night journal from the edge of a small town

\n

One garden, one moth trap, one pair of owls in the church tower. Entries go up most mornings.

\n
\n Read last night’s entry\n or start with the field lists »\n
\n
\n\n
\n

May 17

\n
\n
\n

Forty-one moths and one very cross wren

\n

The warm spell finally filled the trap. I opened the lid at five to find three lime hawk moths asleep on the egg boxes and a wren on the fence telling me exactly what she thought of the whole business.

\n

Everything was counted, photographed on the same grey card and let go into the hedge before the sun reached it.

\n

If the lamp is on, somebody is counting. If it is off, somebody is asleep.

\n

What changed since April

\n

Twice the species and three times the numbers, which is what a week of mild nights will do.

\n
    \n
  • First hawk moths of the year, eleven days earlier than last spring.
    • \n
  • No frost damage on the box lid this time.
    • \n
  • The red torch is still the best thing I own.
    • \n
\n

Keeping the tally

\n

The counts live in one text file. Running tally --month may prints the table that goes into the field lists.

\n
\n

Posted at 7:12 am in Moth trap | 3 comments | PermalinkLink to this entry only

\n
\n
\n\n
\n

Linklog, this week

\n \n
\n\n
\n

Field lists

\n
\n
\n

Moth trap

\n

Every night the lamp was lit. 126 entries. Open

\n
\n
\n

Owls

\n

The tower pair and their pellets. 58 entries. Open

\n
\n
\n

Night sky

\n

Clear nights, plainly described. 91 entries. Open

\n
\n
\n

Garden

\n

What was planted to feed the rest. 73 entries. Open

\n
\n
\n
\n\n
\n
\n\n \n
\n\n \n\n
\n\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Moth trap
    4. \n
  4. »
    5. \n
  5. The first warm night
    6. \n
\n\n
\n
\n

The first warm night

\n

22 April 2006, filed under Moth trap. Three comments so far.

\n
\n
The whole list
\n
\n\n
\n

Apr 22

\n
\n
\n

Eleven degrees at midnight, no wind, and cloud like a lid. I lit the lamp at nine and by ten the sheet behind it was moving.

\n

The first warm night is not in the calendar. You find it by leaving the lamp on.

\n

Fifty-three moths of fourteen kinds by first light, which is more than the whole of March. The owls took no notice at all.

\n
\n

Posted at 6:48 am in Moth trap | PermalinkLink to this entry only

\n
\n
\n\n
\n

More from that week

\n \n
\n\n
\n

Three comments

\n
    \n
  1. \n

    Same night here, forty miles east. The hedge was loud with them.

    \n

    WHWren Hallam | 22 April, 8:15 am

    \n
    2. \n
  2. \n

    Then it was the whole county. I shall stop taking the credit.

    \n

    IVIdris Vane | 22 April, 8:40 am

    \n
    3. \n
  3. \n

    Which bulb do you run in the trap? Mine brings in nothing but gnats.

    \n

    ATAgnes Thorne | 23 April, 7:40 am | edit | delete

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

Delete your comment?

\n
\n

The comment you left at 7:40 am will be taken off this entry. This cannot be undone.

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

Thank you. Your last comment is waiting to be read and will show up 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\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Field lists
    4. \n
  4. »
    5. \n
  5. Moth trap, 2006
    6. \n
\n\n
\n
\n

Moth trap, 2006

\n

Every night the lamp was lit this year, newest month first.

\n
\n
Last night
\n
\n\n
    \n
  • 63 nights
    • \n
  • 1,204 moths
    • \n
  • 87 species
    • \n
  • 212 comments
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthBest nightCommentsMoths
May 2006Forty-one moths and one very cross wrenopen318
April 2006The first warm nightopen402
March 2006Frost on the box lidclosing251
February 2006Two moths, both of them brownclosed96
January 2006A lamp in the snowclosed137
\n
\n
\n\n
\n \n
\n\n
\n

Newest list: Bats

\n
\n

Nothing is filed under “Bats” yet.

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

About, and how to write

\n

Who keeps this journal, and where a note should go.

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

Who keeps this

\n
\n

Idris Vane teaches woodwork by day and counts moths before breakfast. 9 entries this month, mostly under moth trap owls. Comments are open for four weeks, closing in the last few days and closed after that.

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

What gets written down

\n

Whatever came to the lamp, what the owls left under the tower, and the sky when there was one. The counts end up in the field lists.

\n

What does not

\n

Where the owls roost, and anything that would bring a crowd to a small garden at midnight.

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

Write to me

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

Answered before breakfast, most days.

\n
\n
\n
\n \n Cancel\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s04.p02.t04.u03\",\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-4243\",\n \"short\": \"v1-wl-4243\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ddddbb;\n --color-canvas: #eeeedd;\n --color-surface: #eeeedd;\n --color-surface-alt: #e8e8d0;\n --color-surface-strong: #ddddbb;\n --color-bar: #777744;\n --color-bar-text: #ffffee;\n --color-bar-alt: #bbcc99;\n --color-bar-alt-text: #182d04;\n --color-inverse: #182d04;\n --color-inverse-text: #ccccaa;\n --color-text: #777744;\n --color-text-muted: #808050;\n --color-heading: #182d04;\n --color-heading-alt: #99aa77;\n --color-link: #006d00;\n --color-link-quiet: #99aa77;\n --color-link-visited: #99aa77;\n --color-link-hover: #182d04;\n --color-link-active: #cc6600;\n --color-border: #ccccaa;\n --color-border-strong: #99aa77;\n --color-border-muted: #ddddbb;\n --color-accent: #777744;\n --color-accent-text: #ffffee;\n --color-accent-alt: #cc6600;\n --color-fill-1: #d0e0a8;\n --color-fill-2: #ddddbb;\n --color-fill-3: #cccc99;\n --color-fill-4: #ffffee;\n --color-button: #bbcc99;\n --color-button-text: #182d04;\n --color-button-hover-text: #182d04;\n --color-button-secondary: #ddddbb;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #ddddbb;\n --color-disabled-text: #99aa77;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffee;\n --color-success: #006d00;\n --color-warning: #cc6600;\n --color-notice: #ffffee;\n --color-notice-text: #777744;\n --color-focus: #777744;\n --color-shadow: #777744;\n --color-overlay: #ddddbb;\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-ui: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 28px;\n --text-h1: 14px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: 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: inset 0 1px 2px var(--color-shadow);\n --shadow-dialog: none;\n --shadow-text: 0 1px 0 var(--color-shadow);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 4L4 0' stroke='black' stroke-opacity='.25'/%3E%3C/svg%3E\") var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 28%) 0%, color-mix(in srgb, var(--color-bar), white 10%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 14%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 28%) 0%, color-mix(in srgb, var(--color-bar-alt), white 10%) 50%, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 14%) 100%);\n --fill-inverse: var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 28%) 0%, color-mix(in srgb, var(--color-accent), white 10%) 50%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 14%) 100%);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 18%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }