{ "id": "v1-wl-32b3", "long_id": "v1.weblogs-2000s.blog.s03.p02.t11.u03", "name": "Single-column weblog with a banner, 2004", "era": { "slug": "weblogs-2000s", "code": "wl", "name": "Weblogs", "years": [ 2002, 2007 ], "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "A one-author weblog as published between 2002 and 2007 in its plainest build: a tall tinted banner across the whole window with the brand (mark and site name), a thin glossy strip under it with two or three words of navigation, and one centred reading column with nothing beside it. Entries, link runs and boxes follow each other down the column between hairline rules; the link lists a sidebar would have held sit in three columns at the foot of the sheet, and the full site navigation is in the footer band. This token set makes it a dark slate page in Lucida Grande with underlined amber links, square corners and no shadows.", "url": "https://chrono.skin/s/v1-wl-32b3", "preview_url": "https://chrono.skin/s/v1-wl-32b3/specimen.html", "files": { "STYLE.md": "# Single-column weblog with a banner, 2004\n\n## Summary\n\nA one-author weblog as published between 2002 and 2007 in its plainest build: a tall tinted banner across the whole window with the brand (mark and site name), a thin glossy strip under it with two or three words of navigation, and one centred reading column with nothing beside it. Entries, link runs and boxes follow each other down the column between hairline rules; the link lists a sidebar would have held sit in three columns at the foot of the sheet, and the full site navigation is in the footer band. This token set makes it a dark slate page in Lucida Grande with underlined amber links, square corners and no shadows.\n\n## Layout\n\n- Three full-width bands and one column. `.ds-nav` and `.ds-footer` run the full width of the window; between them `.ds-page__frame` is one centred sheet, `--size-page` (600px) wide, in `--color-canvas`, with no outline and `--space-7` of padding at each side, which leaves 528px of text. The contents of the bands are aligned to the same 600px by `.ds-nav__inner` and `.ds-footer__inner`. No text is ever placed on the page outside the sheet and the bands.\n- There is no sidebar column and no navigation bar. Order from the top: `.ds-nav__banner` (`--size-banner` 104px high, `--color-fill-3`, a `--border-width-strong` line in `--color-bar` on top, the site name at the bottom left and a one-line tagline at the bottom right), `.ds-nav__strip` (a thin `--fill-bar-alt` line with the main sections as words at the left and a pointer to the foot of the page at the right), the sheet, and the footer band with the navigation.\n- The sheet is a single stack: `.ds-hero` first, then entries (`.ds-post`) and blocks (`.ds-page__section`), each closed by a 1px `--color-border` rule with `--space-6` under it. `.ds-page__label` is the small bold caption above a block. The sheet ends with `.ds-sidebar`: three equal columns of link lists under a `--border-width-strong` rule, `--space-7` below the last block.\n- The full navigation is in `.ds-footer`: three columns of links (`.ds-footer__nav`) with the current page in bold, a 1px rule, then the copyright line.\n- Inner pages (one essay, the ride log, the about page, a listing or settings page of an application) keep the banner, the strip, the single column, the link columns at the foot and the footer navigation; nothing is added at the sides. The hero is not used: the sheet opens with the `.ds-breadcrumb` as one small line, then `.ds-page-header` (18px title, one muted line, one button at the top right, no rule), then 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 essay page the order is the text, further reading, the `.ds-comments` thread, and the comment form last. Tabs stand in the column under the page header, never in the banner or the strip. The foot columns carry lists that belong to the page.\n- Views: the specimen is one small weblog with four views. `journal` is the front page: the hero words, the newest essay in full, the run of short links, the bands that say what is here, and the foot columns. `entry` is one essay with its comments: further reading, the thread, the dialog that removes your own comment, the notices that answer a posted comment, and the comment form. `rides` is the ride log: figures, tabs over the table of months, pagination, and an empty shelf. `about` is the panel on the writer, a short description and a form for letters. The strip links to journal, ride log and about, the footer lists everything; essays are reached from titles, comment counts and the foot columns.\n- Spacing scale: `--space-1` 1px is the gap between grid bands and the padding of foot-column rows, and doubled it is the tracking of foot-column titles; `--space-2` 4px is the padding of the strip, of table cells, buttons, inputs, tabs and list rows; `--space-3` 8px is the gap between buttons, the padding of grid bands and notices and the space under a title; `--space-4` 12px is the padding of panels and the dialog, the bottom padding of the banner and the gap between label and field; `--space-5` 18px is the gap between paragraphs and between stats; `--space-6` 24px is the gap between blocks, the list indent, the top padding of the sheet and the gap between foot columns; `--space-7` 36px is the side padding of the sheet and the space above the foot columns.\n- Fixed sizes: `--size-label` 110px is the label column of a form and the title column of a grid band, `--size-field` 240px a text input, `--size-num` 80px 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` is Times at the browser's size: `--text-base` 16px with `--line-body` 1.375 (22px). It is the unstyled-serif look of hosted journals and early default themes; do not swap it for a sans.\n- `--font-heading` and `--font-ui` are Arial: `--text-display` 24px bold, `--text-h1` 18px bold, `--text-h2` 16px bold, `--text-h3` 13px bold. `--text-small` and `--text-ui` are 13px. Nothing is uppercased or tracked.\n- Every link is underlined, at rest and on hover, quiet links and navigation included (`--link-decoration`, `--link-decoration-hover` and `--link-decoration-quiet` all underline). `--font-mono` is Courier New.\n\n## Components\n\n- `.ds-page` on ``: page colour and base type. The column is `.ds-page__frame`; `.ds-page__section` is a block closed by a 1px rule (`--last` drops it); `.ds-page__label` is its caption.\n- `.ds-view`: one screen of the example site. The specimen holds its views side by side in the markup and shows one at a time: the view named in the address, or the `.ds-view--home` view when none is named. In a real project each view is a page of its own; drop the class there.\n- `.ds-brand`: the site's mark and name, at the bottom left of the banner; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button of this layout (a flat square with the 1px `--color-input-border` outline, `--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` (18px 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`: the site header, full width, written once above the views. `.ds-nav__banner` is the tall tinted band; `.ds-nav__strip` the thin line under it; each wraps its content in `.ds-nav__inner`. The banner holds the `.ds-brand` and `.ds-nav__tagline`. The strip holds `.ds-nav__menu`: two or three `.ds-nav__link` words for the main sections at the left and a `.ds-nav__note` at the right that points to the footer, where every section is listed. The current word is bold: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href` (an essay counts as the journal). The strip never grows into a bar of blocks.\n- `.ds-breadcrumb`: on inner pages, the first line of the sheet above the page header, small and muted: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`/`), ending in `.ds-breadcrumb__current` in the text colour.\n- `.ds-hero`: the opening words of the journal, once, at the top of the column: `.ds-hero__title` (18px), a `.ds-hero__lead` paragraph (14px) and `.ds-hero__actions` with one button and one text link, closed by a 1px rule. No box, no fill, no band.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: `.ds-page-header__main` holds the `.ds-page-header__title` (18px) and one muted `.ds-page-header__text` line; `.ds-page-header__action` at the top right holds one button. No rule and no box.\n- `.ds-stat`: one summary figure hanging from its own 3px rule: a `.ds-stat__value` (14px bold, white) over a `.ds-stat__label` (11px, muted). Three to five sit side by side in `.ds-stats`, equal in width with `--space-5` between them; they are separate figures, not one boxed strip.\n- `.ds-post`: one entry: a `.ds-prose` body, then `.ds-post__foot` with `.ds-post__meta` (category, comments, permanent link separated by middle dots) at the left and a bold `.ds-post__date` at the right. The date closes the entry; it does not open it.\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: it is set in under a `--border-width-strong` rule on its left edge, like a notice. Comments are divided by 1px dotted rules.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists with amber 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`: flat button with a 1px outline, bold. `.ds-button--secondary` is darker and quieter with normal weight. `.ds-button--danger` is the destructive action: the same button with its label in `--color-danger`, never filled. `disabled` or `is-disabled` fades it. Group with `.ds-buttons`.\n- `.ds-form`: the comment form, unboxed: a `.ds-form__title`, then `.ds-form__row` pairs of a right-aligned muted `.ds-form__label` (110px) 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 at 11px with open sides: glossy `th` row, rows divided by 1px rules, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row.\n- `.ds-list`: an indented run of links, one `.ds-list__item` each, with no rules between them: the `.ds-list__title` link, an optional `.ds-list__excerpt` in parentheses on the same line, and a small muted `.ds-list__meta` after it. For link logs and recent entries; it is running text, not a set of rows.\n- `.ds-panel`: a 1px outlined box with the `.ds-panel__title` on a 1px rule inside it and a `.ds-panel__body`. Use it sparingly.\n- `.ds-grid`: four `.ds-grid__cell` bands one above the other, 1px apart, each a step of the block fills (`--2`, `--3`, `--4` select the others), with the `.ds-grid__title` in a 110px column at the left and the `.ds-grid__text` beside it. For a section index. Cells are never placed side by side.\n- `.ds-tabs`: a row of `.ds-tabs__tab` words on a 1px rule; `is-current` is bold white with a 3px underscore. Content goes in `.ds-tabs__body`.\n- `.ds-badge`: small square amber count. `.ds-badge--alt` is a bare coloured word (\"new\"); `.ds-badge--tag` is an outlined category tag. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a slate label with a 1px outline and a bold word, both in the status colour.\n- `.ds-sidebar`: not a column in this layout but the three link columns at the foot of the sheet. Each `.ds-sidebar__block` has an uppercase tracked `.ds-sidebar__title` on a 1px rule 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.\n- `.ds-notice`: one-line message on `--color-notice` with a 3px rule on its left edge, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rule. Stack several in `.ds-notices`.\n- `.ds-pagination`: one line: later at the left (`.ds-pagination__item--prev`), earlier at the right (`.ds-pagination__item--next`), page numbers between, as plain `.ds-pagination__link` words. `is-current` is a 1px box; `is-disabled` is faded.\n- `.ds-dialog`: a 1px bordered box with a glossy `.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`. No shadow.\n- `.ds-empty`: a centred muted `.ds-empty__text` over one secondary button; no box and no rule of its own, the block's rules are enough.\n- `.ds-footer`: the light inverted band, full width, content in `.ds-footer__inner`. `.ds-footer__nav` is the site navigation in three columns, each a bold `.ds-footer__title` over a `.ds-footer__list` of underlined `.ds-footer__link` items (`is-current` is bold); `.ds-footer__text` is the copyright line under a 1px rule.\n- `ds-accordion`: a sidebar list that opens and closes, a details element whose summary holds the block title.\n- `ds-progress`: a native progress bar for a meter such as weeks left or frames used.\n\n## Never\n\n- `block-gap <= 36px`: blocks sit one 1px rule apart; the largest gap is above the foot columns.\n- `content-width <= 600px`: one fixed reading column; only the bands stretch with the window.\n- `font-size <= 32px`: the largest text measured is 32px; the set itself stops at 24px.\n- `font-size >= 10px`: the smallest text measured is 10px; the set itself stops at 13px.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Times, Arial and a monospace.\n- `line-height >= 1.1`: text is set close, at 1.375.\n- `line-height <= 1.5`: and never open.\n- `underlined-links >= 60%`: links are underlined everywhere.\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 outline, title on a 1px rule, `--space-4` padding), a new run of items copies `.ds-list` (indented, no rules between items), a new row of figures copies `.ds-stat` (a 3px rule above each), a new tinted band copies `.ds-grid__cell`. New navigation goes in a `.ds-footer__nav` column and new link lists in a `.ds-sidebar__block` at the foot, never beside the column. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`; if a size is missing, take the nearest step of the scale. Keep the single column, keep text at 11px to 18px, corners square, and separate things with a 1px rule before reaching for a box.\n", "components.css": "/* Layout tokens (structure part). A single reading column under a tall banner,\n 2002 to 2007: no sidebar, link columns at the foot, navigation in the footer. */\n:root {\n --size-page: 600px;\n --size-banner: 104px;\n --size-label: 110px;\n --size-field: 240px;\n --size-dialog: 340px;\n --size-num: 80px;\n --space-1: 1px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 18px;\n --space-6: 24px;\n --space-7: 36px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: 0;\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 reading column: one centred sheet without an outline. Bands above and below run the full window. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-6) var(--space-7) var(--space-7);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-page__section {\n margin: 0 0 var(--space-6);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-page__label {\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text-muted);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- nav: a tall tinted banner with the wordmark, and a thin strip that says where you are ---------- */\n.ds-nav {\n margin: 0;\n}\n.ds-nav__banner {\n display: flex;\n align-items: flex-end;\n box-sizing: border-box;\n min-height: var(--size-banner);\n background: var(--color-fill-3);\n border-top: var(--border-width-strong) var(--border-style) var(--color-bar);\n}\n.ds-nav__inner {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-7);\n}\n.ds-nav__banner .ds-nav__inner {\n padding-bottom: 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: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-heading);\n}\n.ds-nav__strip {\n padding: var(--space-2) 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n/* The strip's short menu: the main sections at the left, a pointer to the footer at the right. */\n.ds-nav__menu {\n justify-content: flex-start;\n list-style: none;\n}\n.ds-nav__note {\n margin-left: auto;\n}\n.ds-nav__link {\n padding: 0 var(--space-2);\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-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=\"#journal\"],\n.ds-page:has(#rides:target) .ds-nav__link[href=\"#rides\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--color-bar-alt-text);\n color: var(--color-bar-alt);\n text-shadow: none;\n font-weight: var(--weight-bold);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb: a small line at the head of the sheet ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- hero: the opening words of the column, set large, closed by a rule ---------- */\n.ds-hero {\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-hero__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: min(var(--text-display), calc(var(--text-h1) * 1.3));\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 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 ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: var(--space-5);\n margin: 0 0 var(--space-6);\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: min(var(--text-display), calc(var(--text-h1) * 1.3));\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 color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: 0;\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: separate figures, each hanging from its own heavy rule ---------- */\n.ds-stats {\n display: flex;\n gap: var(--space-5);\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: var(--border-width-strong) 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 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__foot {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-post__meta {\n margin: 0;\n}\n.ds-post__date {\n flex: none;\n margin: 0;\n font-weight: var(--weight-bold);\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-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-6);\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-4);\n padding: 0 var(--space-5) 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 essay ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-comment:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-comment:last-child {\n padding-bottom: 0;\n}\n/* The writer's own reply is set in from the left under a heavy rule, like a notice. */\n.ds-comment--author {\n padding-left: var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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: a flat outlined 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-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n 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 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-border);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-muted);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* ---------- form: right-aligned labels beside the fields, no box ---------- */\n.ds-form {\n margin: 0;\n}\n.ds-form__title {\n margin: 0 0 var(--space-4);\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-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\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 color: var(--color-text-muted);\n text-align: right;\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-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-style: solid;\n border-color: var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding-left: calc(var(--size-label) + var(--space-4));\n}\n\n/* ---------- table: open sides, a bar head, ruled rows ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-small);\n}\n.ds-table th {\n padding: var(--space-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-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: an indented run of one-line links, each with its note beside it ---------- */\n.ds-list {\n margin: 0;\n padding: 0 0 0 var(--space-6);\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n}\n.ds-list__title {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 color: var(--color-text);\n}\n.ds-list__meta {\n white-space: nowrap;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel: an outlined box, the title on a rule inside it ---------- */\n.ds-panel {\n padding: var(--space-3) var(--space-4) var(--space-4);\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 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-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- grid: four tinted bands, one above the other, title left and text right ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-grid__cell {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__title {\n flex: none;\n width: var(--size-label);\n margin: 0;\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 flex: 1;\n min-width: 0;\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: words on a rule, the current one underscored ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-6);\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 padding: var(--space-2) 0;\n border-bottom: calc(var(--border-width) * 3) solid 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-heading);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\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.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n.ds-badge--tag {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) currentColor;\n font-weight: var(--weight-bold);\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n\n/* ---------- sidebar: not a column here but three link columns across the foot of the sheet ---------- */\n.ds-sidebar {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n margin: var(--space-7) 0 0;\n padding: var(--space-5) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n min-width: 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-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-heading-alt);\n text-transform: uppercase;\n letter-spacing: calc(var(--space-1) * 2);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list--two {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n column-gap: var(--space-3);\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\n/* ---------- notice: a tinted line with a heavy rule on its left edge ---------- */\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-left: var(--border-width-strong) 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: plain words and numbers, the current one boxed ---------- */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__item--prev {\n margin-right: auto;\n}\n.ds-pagination__item--next {\n margin-left: auto;\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-2);\n border: var(--border-width) solid transparent;\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 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 line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-4);\n font-size: var(--text-small);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty: no box, a muted centred line and one button ---------- */\n.ds-empty {\n padding: var(--space-3) 0;\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: the inverted band that holds the whole site navigation ---------- */\n.ds-footer {\n padding: var(--space-6) 0 var(--space-7);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-7);\n}\n.ds-footer__nav {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-inverse-text);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n color: var(--color-inverse-text);\n}\n.ds-footer__list {\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.ds-footer__link.is-current {\n font-weight: var(--weight-bold);\n}\n.ds-footer__text {\n margin: 0;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-base) * 0.7);\n height: calc(var(--text-base) * 0.7);\n margin-left: var(--space-2);\n margin-bottom: calc(var(--space-2) + var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n display: block;\n flex: 1 1 auto;\n margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-progress {\n display: block;\n width: 100%;\n height: var(--space-3);\n margin-top: var(--space-1);\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\n}\n.ds-progress::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress::-webkit-progress-value {\n background: var(--fill-bar);\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, single-column weblog specimen\n\n\n\n\n\n
\n
\n
\n \n \n chronoskin\n \n

slow essays on bicycles and bread

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

One long page, written slowly

\n

An essay every week or two, and between them a handful of links. Nothing in the margins; everything else is at the bottom.

\n
\n Start with last week’s essay\n or read the ride log\n
\n
\n\n
\n
\n

Forty kilometres for a loaf

\n

The bakery in the next valley fires its oven on Saturdays only. I rode over the ridge with an empty saddlebag and came back with two loaves of the dark rye, one of which did not survive the descent. It was worth every metre of the climb.

\n

We bake until the wood is gone, the baker said, and then we go home.

\n

What I carried

\n

Less than usual, and I still had too much.

\n
    \n
  • One spare tube and the small pump.
    • \n
  • A cotton bag, because paper tears on the cobbles.
    • \n
  • Coins. The bakery has never seen a card.
    • \n
\n

The gearing, for those who ask

\n

I keep the ratios in a text file and print the table with gears --wheel 700c; the lowest is lower than I like to admit.

\n
\n
\n

Filed under Rides · 17 comments · permanent link

\n

4 Jun 05

\n
\n
\n\n
\n

Short links

\n \n
\n\n
\n

What is here

\n
\n
\n

Rides

\n

Routes, climbs and where the water is. 63 essays. Read them

\n
\n
\n

Bread

\n

Flour, ovens and failures. 48 essays. Read them

\n
\n
\n

Repairs

\n

Hubs, chains and one bent fork. 29 essays. Read them

\n
\n
\n

Short links

\n

A line each, several a week. 906 links. Read them

\n
\n
\n
\n\n \n\n
\n
\n\n\n
\n
\n\n
    \n
  1. journal
    2. \n
  2. /
    3. \n
  3. repairs
    4. \n
  4. /
    5. \n
  5. a week without the front brake
    6. \n
\n\n
\n
\n

A week without the front brake

\n

28 May 2005, filed under Repairs. Three comments so far.

\n
\n
Newest essay
\n
\n\n
\n
\n

The cable snapped on Monday at the bottom of the mill hill, which is the right place for it to happen and the wrong day. The shop had none of the old thick kind, so for a week I rode on the back brake and a great deal of foresight.

\n

You do not ride slower without a front brake. You ride earlier.

\n

By Friday I was braking for corners I could not yet see. The new cable went in on Saturday, and I have kept the habit.

\n
\n
\n

Filed under Repairs · permanent link

\n

28 May 05

\n
\n
\n\n
\n

Read next

\n \n
\n\n
\n

Three comments

\n
    \n
  1. \n

    The tandem shop on the quay still keeps the thick cable, in a biscuit tin behind the till.

    \n

    Anselm Roe · 28 May, 6:10 pm

    \n
    2. \n
  2. \n

    Of course it does. I will take the tin.

    \n

    Petra Hollis · 28 May, 7:02 pm

    \n
    3. \n
  3. \n

    Which side of the ridge has the better surface, if one is braking early?

    \n

    Lorcan Wray · this afternoon · remove

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

Remove your comment?

\n
\n

Your comment from this afternoon will be taken off the essay for good.

\n
\n \n Leave it\n
\n
\n
\n
\n
\n\n
\n
\n

Saved. Your last comment will show once it has been read.

\n

Not saved. One line of the form below needs another look.

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

Say something

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

That is not an address a browser can open.

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

Plain text only. Blank lines make paragraphs.

\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. rides
    4. \n
  4. /
    5. \n
  5. ride log 2005
    6. \n
\n\n
\n
\n

Ride log for 2005

\n

Every ride longer than an hour, with what was baked afterwards.

\n
\n
Send me a route
\n
\n\n \n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthLongest rideRoadKilometres
June 2005Over the ridge for breaddry212
May 2005The reservoir loop, twicedry486
April 2005To the mill and backgravel391
March 2005The ridge road in fogice174
February 2005Station to stationice98
\n
\n
\n\n
\n \n
\n\n
\n

Rides by tandem

\n
\n

There is nothing under “Tandems” so far.

\n Return to the journal\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 is behind this page and where a letter should go.

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

The person behind this

\n
\n

Petra Hollis rides an old steel tourer and bakes badly but often. 9 essays this season, filed under rides bread. Comments are open for six weeks, ending in the last few days and closed from then on.

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

What you will find

\n

Long pieces about short rides, a log of every ride since 2003, and bread that mostly rose. No advice on what to buy.

\n

How it is made

\n

Typed in a plain editor and put up by hand, one page at a time. There is nothing in the margins because there are no margins.

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

Write to me

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

Answers come by the next essay at the latest.

\n
\n
\n
\n \n Never mind\n
\n
\n
\n\n \n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s03.p02.t11.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\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wl-32b3\",\n \"short\": \"v1-wl-32b3\"\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: Times, \"Times New Roman\", serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 24px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.375;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\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" } }