{ "id": "v1-hp-5224", "long_id": "v1.home-pages-90s.forum.s05.p02.t02.u04", "name": "Personal home page: the club notice board, 1999", "era": { "slug": "home-pages-90s", "code": "hp", "name": "Personal home pages", "years": [ 1996, 2001 ], "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "The home page of a small hobby club with its own notice board, as volunteers built them between 1996 and 2001: a banner box with the club's name and a line of bracketed links, then one table of three columns, small boxes at the left and right and the welcome, the boards and the newest messages in the middle. Text is dark brown Georgia on parchment and cream, headings are maroon and forest green in an old-style book face, links are blue and underlined, and every box sits in a 3px sunken border on a speckled paper tile. A visitor counter, \"seen this week\", a poll, a web ring and a join form are its furniture; the kind gave way to hosted forums after 2001.", "url": "https://chrono.skin/s/v1-hp-5224", "preview_url": "https://chrono.skin/s/v1-hp-5224/specimen.html", "files": { "STYLE.md": "# Personal home page: the club notice board, 1999\n\n## Summary\n\nThe home page of a small hobby club with its own notice board, as volunteers built them between 1996 and 2001: a banner box with the club's name and a line of bracketed links, then one table of three columns, small boxes at the left and right and the welcome, the boards and the newest messages in the middle. Text is dark brown Georgia on parchment and cream, headings are maroon and forest green in an old-style book face, links are blue and underlined, and every box sits in a 3px sunken border on a speckled paper tile. A visitor counter, \"seen this week\", a poll, a web ring and a join form are its furniture; the kind gave way to hosted forums after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 776px, centred in an 800px window. `.ds-page__frame` has no fill and no border: the boxes stand on `--fill-page`, the tile.\n- `.ds-nav` is written once at the top: a banner box on `--fill-panel` in a `--border-width-strong` border, the `.ds-brand` centred in it at `--text-display`, the italic `.ds-nav__tagline`, a rule and `.ds-nav__links`, text links in square brackets.\n- The specimen is one example site, a garden birdwatchers' club, of five views.\n- Home view, `.ds-page__main`, is three columns `--space-4` apart: the `.ds-sidebar` (`--size-left` 150px: club pages, seen this week, new members, the `.ds-counter`), `.ds-page__column` (the centred `.ds-hero`, the `.ds-stat` row of three plaques, a `.ds-heading` over the two by two `.ds-grid` of boards, a heading over the `.ds-list` of newest messages) and `.ds-page__aside` (`--size-right` 180px: three or four `.ds-panel` boxes and the `.ds-construction` strip). The three columns end near each other.\n- Inner pages keep the banner and the footer and drop the side columns, the hero and the plaques. `.ds-page__inner` is one column the full 776px wide and opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` box (title and one italic line at the left, a button at the right) and, on a board, the `.ds-tabs` row. Below it: the table of topics, page numbers and the empty state; or `.ds-posts`, the messages of one topic, each with its writer in a `--size-author` (132px) cell at the left; or notices and the form. Only the guide uses `.ds-page__columns`: `.ds-prose` and a `--size-side` (190px) `.ds-sidebar` at the right.\n- Views: `home`; `board` (tabs, the topic table with its badge key, page numbers, the empty list of your own messages); `topic` (three messages, page numbers, the message box for removing one); `guide` (running text, the sidebar, link states); `join` (notices, the form).\n- Spacing: `--space-1` 2px between table cells; `--space-2` 5px strip and cell padding, between tabs; `--space-3` 8px box padding, the gap between plaques, grid cells and buttons, under a heading; `--space-4` 12px between boxes and between the three columns; `--space-5` 18px between the blocks of an inner page, hero padding; `--space-6` 30px list indent.\n- Fixed sizes: `--size-label` 160px form labels, `--size-field` 240px inputs, `--size-area` 360px textarea, `--size-check` 16px, `--size-dialog` 380px, `--size-icon` 44px board drawings.\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\nThe conventions for which text sits on which fill are those of the era's first layout: text, heading, link and status colours are legible on page, canvas, surfaces and the four fills; bars, the inverse, the accent and notices bring their own text colour; status colours as fills are lettered in `--color-canvas`.\n\n- `--font-body`, `--font-heading` and `--font-ui` are one rounded hand-drawn stack (Comic Sans MS, then Chalkboard SE and Comic Neue). Body 14px at line height 1.35; small print 11px; controls 12px bold; headings 16, 21 and 28px bold; the name 40px with 1px tracking. `--font-mono` (Lucida Console) sets counter digits, code and the textarea. Links are always underlined.\n- `--color-page` pink `#ffd6ea`, `--color-canvas` `#fff0f7`, `--color-surface` white, `--color-surface-alt` sky `#d6efff` (alternate rows, the empty state), `--color-surface-strong` lilac `#e6d9ff` (the ground of the counters and of the grid).\n- `--color-text` `#330066`; `--color-heading` hot pink `#cc0099` (name, titles, section headings, icons); `--color-heading-alt` teal `#008080` (tagline, lead lines, h2, form labels). Links `#0000ff`, visited `#800080`, hover `#ff0066`.\n- `--fill-bar` purple with white text is the link bar, table heads, the current page number and the dialog title; `--fill-bar-alt` teal with white text is every title strip and the current tab; `--fill-inverse` deep purple with pale yellow text is counter digits and awards; `--fill-accent` pink with white text is the current link in the bar and the \"NEW!\" badge. `--color-fill-1` to `-4` (pink, sky, mint, lemon) fill the cells of the grid and carry body text and links.\n- The primary button is yellow `--color-button` with purple text; the secondary is sky blue.\n- Surface: `--border-style` `double`, 3px for boxes and cells, 5px for the sheet, the welcome box, heading underlines and awards. Boxes cast a hard 4px offset shadow in `--color-shadow` (`--shadow-panel`), buttons 2px, the welcome box and dialog 6px; nothing is blurred. Bars are candy-striped at 45 degrees, the inverse is pin-striped, buttons are a two-step fill; `--fill-page` is a 32px gingham of `--color-surface-alt` over `--color-page`. Radius 0, no text shadow, no transitions.\n- Written literally: `outset` and `inset` bevels on buttons, tabs and controls, italic for taglines and lead lines, the round bullets of the news list (`border-radius: 50%`, a shape), the 1px-scale `letter-spacing` of counter digits (`--space-1`), and `.ds-blink`.\n\n## Components\n\n- `.ds-page`: on ``; the tiled page and body type. `.ds-page__frame` the centred 776px column; `.ds-page__main` the three columns of the front page, `.ds-page__column` the middle one and `.ds-page__aside` the right one; `.ds-page__inner` the single column of an inner page; `.ds-page__head` stacks path, page header and tabs; `.ds-page__columns` text plus sidebar; `.ds-section` a heading with its block.\n- `.ds-nav`: the banner box. `.ds-nav__tagline` the italic line; `.ds-nav__links` the line of `.ds-nav__item` / `.ds-nav__link` text links, each between square brackets; the link of the view that shows takes `--fill-accent` (one selector per view, or `is-current`).\n- `.ds-brand`: mark and name, centred in the banner. `.ds-brand__mark` is a tile dressed like the button (`--fill-button`, `--color-button-text`, outset bevel, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with square caps; `.ds-brand__name` is the name at `--text-display` in `--color-heading`. Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the centred welcome box on `--fill-panel`: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary button), `.ds-hero__hint`.\n- `.ds-page-header`: a box on `--color-surface-alt`: `.ds-page-header__text` with `.ds-page-header__title` and the italic `.ds-page-header__lead`, and `.ds-page-header__action` at the right.\n- `.ds-heading`: a section title in `--color-heading-alt` between two rules.\n- `.ds-rule`: a plain carved rule; `.ds-rule--dots` is a row of dots in `--color-accent-alt`, the usual divider.\n- `.ds-table`: cells that stand `--space-1` apart on `--color-surface-strong`: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num` centred, `--meta` small, `--group` a closing row on `--color-fill-4`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the row of plaques; each `.ds-stat__item` is a `.ds-stat__value` on `--fill-inverse` over a `.ds-stat__label`.\n- `.ds-list`: the newest messages in a box: each `.ds-list__item` is a `.ds-list__title` link over a `.ds-list__meta` line of who, where and when. `.ds-list__more` under it.\n- `.ds-posts` and `.ds-post`: the messages of a topic. `.ds-post__author` (with `.ds-post__name`) at the left on `--color-surface-alt`, `.ds-post__body` with `.ds-post__meta`, `.ds-post__text` and `.ds-post__quote` at the right.\n- `.ds-panel`: a box of the right column: `.ds-panel__title` strip on `--fill-bar-alt`, `.ds-panel__body`, `.ds-panel__text`, `.ds-panel__pic` (a drawing on `--color-fill-3`), `.ds-panel__form` (a one-question form). `.ds-ring` is the previous, random, next line of a web ring.\n- `.ds-grid`: two boards to a row: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) holds a `.ds-grid__pic` drawing and a `.ds-grid__body` with the `.ds-grid__title` link and a `.ds-grid__text` count.\n- `.ds-tabs`: a row of small boxes, `.ds-tabs__item` / `.ds-tabs__tab`, the current one (`is-current`) on `--fill-bar-alt`.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each a `.ds-sidebar__title` strip on `--fill-bar` over a `.ds-sidebar__list` of `.ds-sidebar__item` lines. `.ds-counter` with `.ds-counter__digits` is the visitor counter inside one.\n- `.ds-footer`: a dotted rule, `.ds-footer__links` with `.ds-footer__item`, the italic `.ds-footer__note` and `.ds-footer__legal`, all centred on the tile.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` the italic opening line, `.ds-prose__code` a block to copy.\n- `.ds-link`: every link; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` small, `.ds-link--strong` bold, `.ds-link--plain` on a coloured fill. `.ds-links` wraps a line of them. `.ds-icon` holds a small drawing before a link.\n- `.ds-bullets`: a link list with small square marks, `.ds-bullets__item` holding a `.ds-bullets__text`.\n- `.ds-button`: a bevelled key; `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two columns, right-aligned `.ds-form__label` and `.ds-form__field`; `.ds-form__input` (`--short`, `is-error`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check`, `.ds-form__hint`, `.ds-form__error`, `.ds-form__actions`.\n- `.ds-badge`: a solid \"NEW!\" label on `--fill-accent`; `.ds-badge--text` an italic coloured word, `.ds-badge--count` a muted count, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` status labels; `.ds-badges` the key line under a table.\n- `.ds-notice`: a line on `--color-notice`; `.ds-notice__label`; `.ds-notice--error`. `.ds-notices` stacks them.\n- `.ds-pagination`: a centred line: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` (on `--fill-accent`) and `is-disabled`.\n- `.ds-breadcrumb`: a small path, `.ds-breadcrumb__item` separated by a coloured mark, the last `is-current`.\n- `.ds-dialog`: a message box in the page flow: `.ds-dialog__title` bar on `--fill-bar`, `.ds-dialog__body`, `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button on `--color-surface-alt`.\n- `.ds-construction`: the diagonal-striped strip with `.ds-construction__text` on it. `.ds-blink`: add to one small mark for the slow blink.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n\n## Never\n\n- `content-width <= 776px`: the three columns fit an 800px window.\n- `font-size <= 40px`: the name is the largest text.\n- `font-size >= 11px`: small print is 11px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 2`: the hand-drawn face and one monospace.\n- `uppercase-text <= 0%`: capitals are typed.\n- `border-radius <= 0px`: every box, key and field is square.\n- `box-shadow-blur <= 0px`: the only shadows are hard 1px and 2px edges.\n- `text-shadow = none`: text is flat.\n- `border-width <= 3px`: the sheet's groove is the thickest line.\n- `transition = none`: nothing eases on hover.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new small box goes in the left column as a `.ds-sidebar__block` or in the right as a `.ds-panel`; a new board is a `.ds-grid__cell`; a new block in the middle column is a `.ds-heading` over a sunken box; a new figure joins `.ds-stat`. Keep the banner on top and the three columns on the front page, keep inner pages to one wide column, keep text dark on paper and links blue and underlined, and never add radius, blur, transitions, a sheet behind the columns or a menu bar.\n", "components.css": "/* Layout tokens (structure part). A hobby club's notice board of 1999 built\n as one three-column table: a banner box with the name and a line of\n bracketed links, then a 150px column of small boxes, the middle column and\n a 180px column of boxes, all standing on the tiled page. 776px in all. */\n:root {\n --size-page: 776px;\n --size-left: 150px;\n --size-right: 180px;\n --size-side: 190px;\n --size-author: 132px;\n --size-label: 160px;\n --size-field: 240px;\n --size-area: 360px;\n --size-check: 16px;\n --size-dialog: 380px;\n --size-icon: 44px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 18px;\n --space-6: 30px;\n}\n\n/* ---------- shell: no sheet, boxes on the tile ---------- */\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.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4) 0 var(--space-5);\n border-radius: var(--radius-page);\n text-align: left;\n}\n/* The front page: three columns of one table. */\n.ds-page__main {\n display: grid;\n grid-template-columns: var(--size-left) minmax(0, 1fr) var(--size-right);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-4) 0 0;\n}\n.ds-page__column,\n.ds-page__aside,\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__inner {\n gap: var(--space-5);\n padding: var(--space-4) 0 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n/* The page of running text: the text and a column of boxes at the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* Section title: a word between two short rules. */\n.ds-heading {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-heading::before,\n.ds-heading::after {\n content: \"\";\n flex: 1;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- nav: a banner box, the name in the middle, links in brackets ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-4) var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n text-align: center;\n}\n.ds-brand {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n color: var(--color-heading);\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: var(--text-display);\n height: var(--text-display);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) 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: 100%;\n height: 100%;\n}\n.ds-brand__name {\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 text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-4);\n align-self: stretch;\n margin: var(--space-2) 0 0;\n padding: var(--space-3) 0 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__item::before {\n content: \"[ \";\n color: var(--color-text-muted);\n}\n.ds-nav__item::after {\n content: \" ]\";\n color: var(--color-text-muted);\n}\n.ds-nav__link {\n padding: 0 var(--space-2);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n}\n/* The page that is showing: the accent fill, no underline. One selector for\n each view, and the home link when the address names no view. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n\n/* ---------- hero: the welcome, centred in the middle column ---------- */\n.ds-hero {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\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}\n.ds-hero__lead {\n margin: var(--space-3) 0;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-3);\n}\n.ds-hero__hint {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- page header: a box, title at the left, a button at the right ---------- */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\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}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: cells apart on a coloured ground ---------- */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n text-align: left;\n vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: center;\n}\n.ds-table__cell--meta {\n font-size: var(--text-small);\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n background: var(--color-fill-4);\n text-align: center;\n}\n.ds-table__desc {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-3) var(--space-2) var(--space-1);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: left;\n}\n\n/* ---------- stats: three plaques, the figure on the inverse fill ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-stat__item {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__value {\n display: block;\n padding: var(--space-1) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\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}\n.ds-stat__label {\n display: block;\n padding: var(--space-1) var(--space-2);\n font-size: var(--text-small);\n}\n\n/* ---------- list: the newest messages, a title over a line of who and when ---------- */\n.ds-list {\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- post: one message of a topic, the writer at the left ---------- */\n.ds-posts {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-author) minmax(0, 1fr);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-post__author {\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border-right: var(--border-width) dotted var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-post__name {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-post__body {\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-post__meta {\n display: block;\n padding: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__text {\n margin: 0 0 var(--space-3);\n}\n.ds-post__text:last-child {\n margin: 0;\n}\n.ds-post__quote {\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n background: var(--color-fill-1);\n border-left: var(--border-width-strong) solid var(--color-border);\n font-size: var(--text-small);\n font-style: italic;\n}\n\n/* ---------- panel: a box of the right column, with a title strip ---------- */\n.ds-panel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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 text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n margin: 0;\n}\n.ds-panel__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 0 var(--space-3);\n padding: var(--space-4) 0;\n background: var(--color-fill-3);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__pic svg {\n display: block;\n width: calc(var(--size-icon) * 2);\n height: calc(var(--size-icon) * 2);\n}\n.ds-panel__form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n/* The web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-1) var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- grid: the boards, two by two, each on its own colour ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-3);\n align-items: start;\n min-width: 0;\n padding: var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-text);\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.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__pic {\n display: block;\n color: var(--color-heading);\n}\n.ds-grid__pic svg {\n display: block;\n width: 100%;\n height: auto;\n}\n.ds-grid__body {\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: a row of small boxes, the current one filled ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\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}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- sidebar: the left column of small boxes ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-sidebar__block {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\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 text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item + .ds-sidebar__item {\n border-top: var(--border-width) dotted var(--color-border-muted);\n}\n/* The visitor counter: boxed digits under a line of words. */\n.ds-counter {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-counter__digits {\n padding: var(--space-1) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n letter-spacing: var(--space-1);\n}\n\n/* A row of dots as a divider. */\n.ds-rule.ds-rule--dots {\n height: var(--space-3);\n border: 0;\n background: radial-gradient(circle, var(--color-accent-alt) 0 35%, transparent 40%) center / var(--space-5) var(--space-3) repeat-x;\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-5) 0 0;\n text-align: center;\n}\n.ds-footer .ds-rule {\n align-self: stretch;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__item + .ds-footer__item::before {\n content: \"|\";\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-footer__note {\n margin: 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-footer__legal {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\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/* ---------- rule: the plain carved line ---------- */\n.ds-rule {\n box-sizing: border-box;\n width: 100%;\n height: 0;\n margin: 0 auto;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- under construction: a strip of diagonal stripes ---------- */\n.ds-construction {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2);\n background: repeating-linear-gradient(-45deg, var(--color-notice) 0 var(--space-4), var(--color-notice-text) var(--space-4) calc(var(--space-4) * 2));\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-construction__text {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- blink: a slow two-step dim, only when motion is welcome ---------- */\n@media (prefers-reduced-motion: no-preference) {\n .ds-blink {\n animation: ds-blink 1.6s steps(2, jump-none) infinite;\n }\n}\n@keyframes ds-blink {\n from { opacity: 1; }\n to { opacity: 0.6; }\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\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}\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 font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n/* A link on a bar, a notice or another coloured fill takes that fill's text colour. */\n.ds-link--plain,\n.ds-link--plain:visited,\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n color: inherit;\n text-decoration: underline;\n}\n.ds-links {\n margin: 0 0 var(--space-4);\n}\n/* The little drawing before an e-mail link or a download. */\n.ds-icon {\n display: inline-block;\n width: var(--text-large);\n height: var(--text-large);\n vertical-align: middle;\n color: var(--color-accent-alt);\n}\n.ds-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* ---------- bullets: a link list with small square marks ---------- */\n.ds-bullets {\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: left;\n}\n.ds-bullets__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-bullets__item::before {\n content: \"\";\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-accent-alt);\n}\n.ds-bullets__item:nth-child(even)::before {\n background: var(--color-heading-alt);\n}\n.ds-bullets__text {\n min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n min-width: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n text-align: left;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\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}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li::marker {\n color: var(--color-accent-alt);\n}\n.ds-prose strong {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose__lead {\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n}\n/* A block of text to copy: a command line, a code, a key. */\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: pre-wrap;\n}\n\n/* ---------- buttons ---------- */\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 background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: default;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-pressed {\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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-button-secondary);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n/* Destructive action: the danger colour as the fill, the sheet colour as the label. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-canvas);\n border-color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled);\n box-shadow: none;\n}\n\n/* ---------- form: labels at the left, fields at the right ---------- */\n.ds-form {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-3);\n row-gap: var(--space-3);\n align-items: baseline;\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-form__label {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n transition: var(--transition);\n}\n.ds-form__input {\n width: var(--size-field);\n max-width: 100%;\n}\n.ds-form__select {\n max-width: 100%;\n}\n.ds-form__textarea {\n display: block;\n width: var(--size-area);\n max-width: 100%;\n font-family: var(--font-mono);\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\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__check {\n appearance: none;\n box-sizing: border-box;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-2) 0 0;\n padding: var(--space-1);\n vertical-align: middle;\n background-color: var(--color-input);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-input-text);\n}\n.ds-form__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding: var(--space-2) 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 color: var(--color-accent-text);\n border-radius: var(--radius-pill);\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 text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* A loud italic word with no box. */\n.ds-badge--text {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n font-style: italic;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as the fill, the sheet colour as the word. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-canvas);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-canvas);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badges {\n display: block;\n padding: 0 0 var(--space-2);\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-2) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__label {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n position: static;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__body {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-3);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-3) var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\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}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__label {\n color: var(--color-heading-alt);\n font-style: italic;\n font-weight: var(--weight-body);\n}\n.ds-pagination__link {\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}\n.ds-pagination__link.is-current {\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb: \"you are here\", small ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\\00bb\";\n padding: 0 var(--space-3);\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a hobby club's notice board, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n The garden birdwatchers' club and notice board\n \n
\n\n
\n
\n\n \n\n
\n
\n

Welcome to the club!

\n

Tell us what came to your garden today, ask what that small brown bird was, and read what 214 other members have seen.

\n
\n Read the Notice Board\n Join the Club\n
\n

Last updated Sunday 21 November 1999. You need not join to read.

\n
\n\n
    \n
  • 214 members
    • \n
  • 1,902 messages
    • \n
  • 96 kinds of bird seen
    • \n
\n\n
\n

The Boards

\n
\n
\n \n
\n

Sightings

\n

412 topics. What you saw, where and when.

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

Feeders and Food

\n

188 topics. Seed, fat, water and squirrels.

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

What Bird Is This?

\n

97 topics. Describe it and we will guess.

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

Over the Fence

\n

64 topics. Everything that is not a bird.

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

Newest Messages

\n \n

All the messages...

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

Bird of the Month

\n
\n \n

The waxwing: in from the north for the berries, and in no hurry to leave.

\n
\n
\n
\n

This Month's Poll

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

The Garden Ring

\n
\n

chronoskin is site 8 of 29 in the web ring.

\n \n
\n
\n
\n

Club Diary

\n
\n

28 Nov: the big garden count begins.

\n

12 Dec: lists in to the secretary.

\n

2 Jan: the results, on this page.

\n
\n
\n

Under construction: the photo album

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

What Bird Is This?

\n

Say how big it was, what it was doing and where you live.

\n
\n
\n Post a New Message\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 \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 \n \n \n
\n Key: NAMED we agree what it was GUESSES still arguing CLOSED no more replies NEW! since your last visit\n Times are club time. How the board works\n
TopicStarted byRepliesReadLast message
Small brown bird with a white eye stripe? NEW! GUESSES Under the hedge, never on the feeder.Hedgerow Hal688today, 14:02
by Marta K.
Grey, bigger than a thrush, loud at dawn NAMED A mistle thrush, by seven votes to one.Old Tom12240yesterday, 19:15
by Old Tom
Yellow flash in the wings, a whole flock NAMED Goldfinches on the teasels.P. Lindqvist413119 Nov, 08:30
by the secretary
Something hooting. Owl or pigeon? GUESSES Heard only, at about eleven at night.Night Shift Nan917617 Nov, 23:48
by Hedgerow Hal
Is my neighbour's parrot a garden bird? CLOSED No. Moved to Over the Fence.Old Tom3150212 Nov, 10:05
by the secretary
A drawing helps more than a hundred words. How to send one
\n\n
    \n
  1. 97 topics, page:
    2. \n
  2. < Newer
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. Older >
    8. \n
\n\n
\n

My Messages

\n
\n

You have not posted yet

\n

Messages you write will be listed here, so you can find the replies. Members only, and joining takes a minute.

\n Join and Post\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Small brown bird with a white eye stripe?

\n

6 replies, read 88 times. Not yet named.

\n
\n
\n Back to the Board\n
\n
\n
\n\n
\n
\n
Hedgerow Hal Member since 1998
41 messages
\n
\n Sunday 21 November 1999, 09:12\n

It keeps to the bottom of the hedge and creeps like a mouse. Brown above, grey below, with a pale stripe over the eye. Smaller than a sparrow. It will not come to the table.

\n
\n
\n
\n
Old Tom Member since 1997
367 messages
\n
\n Sunday 21 November 1999, 10:30\n

It keeps to the bottom of the hedge and creeps like a mouse.

\n

That is a dunnock or I am a heron. See my list from last winter.

\n
\n
\n
\n
Marta K. Member since 1999
12 messages
\n
\n Sunday 21 November 1999, 14:02 NEW!\n

A dunnock has no eye stripe, Tom. Did it cock its tail? Then it was a wren.

\n
\n
\n
\n\n
    \n
  1. Messages 1 to 3 of 7, page:
    2. \n
  2. 1
    3. \n
  3. 2
    4. \n
  4. 3
    5. \n
  5. Next >
    6. \n
\n\n
\n\n
\n

Take your message off the board?

\n

Your message of 14:02 will be removed and the replies to it will lose their place. This cannot be undone.

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

Club Guide

\n

How the notice board works, and the three rules we keep.

\n
\n
\n Join the Club\n
\n
\n
\n\n
\n
\n

How to post a message

\n

If you can write a postcard, you can use the board.

\n

Choose a board, press Post a New Message and give your message a title that says what it is about. \"Bird?\" helps nobody; \"Small brown bird with a white eye stripe\" brings six answers by tea time.

\n

What to put in a sighting

\n
    \n
  • what you saw, and how many;
    • \n
  • the day and the hour;
    • \n
  • your town or county, never your street.
    • \n
\n

Making a word bold

\n

The board does not take tags, but a word between two stars is shown in bold: type *waxwing* to shout about one.

\n

How the links look

\n

\n A link you have not followed,\n one you have visited,\n one under the pointer,\n one as you click it,\n a bold link and\n a small link.\n

\n

The three rules

\n
    \n
  1. Be kind. Everybody once called a dunnock a sparrow.
    2. \n
  2. Never say where a rare bird is nesting.
    3. \n
  3. Nothing for sale, except at the club table in May.
    4. \n
\n
\n\n \n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Join the Club

\n

It is free. You get a name on the board and the monthly letter.

\n
\n
\n Read the Rules First\n
\n
\n
\n\n
\n

Please note: your e-mail address is seen by the secretary only and is never shown on the board.

\n

Not quite! That board name is taken by another member. Please choose a different one.

\n
\n\n
\n \n
\n \n Somebody is already called Old Tom.\n
\n \n
\n \n (for the monthly letter)\n
\n \n
\n \n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.forum.s05.p02.t02.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-5224\",\n \"short\": \"v1-hp-5224\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffd6ea;\n --color-canvas: #fff0f7;\n --color-surface: #ffffff;\n --color-surface-alt: #d6efff;\n --color-surface-strong: #e6d9ff;\n --color-bar: #9933cc;\n --color-bar-text: #ffffff;\n --color-bar-alt: #008080;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #660099;\n --color-inverse-text: #ffff99;\n --color-text: #330066;\n --color-text-muted: #7a5c94;\n --color-heading: #cc0099;\n --color-heading-alt: #008080;\n --color-link: #0000ff;\n --color-link-quiet: #9900cc;\n --color-link-visited: #800080;\n --color-link-hover: #ff0066;\n --color-link-active: #ff0000;\n --color-border: #cc66cc;\n --color-border-strong: #660099;\n --color-border-muted: #f0c0e0;\n --color-accent: #ff3399;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ff6600;\n --color-fill-1: #ffccdd;\n --color-fill-2: #cce6ff;\n --color-fill-3: #ccffdd;\n --color-fill-4: #ffffcc;\n --color-button: #ffcc00;\n --color-button-text: #330066;\n --color-button-hover-text: #cc0099;\n --color-button-secondary: #cce6ff;\n --color-button-secondary-text: #330066;\n --color-input: #ffffff;\n --color-input-text: #330066;\n --color-input-border: #9966cc;\n --color-disabled: #e6e0ea;\n --color-disabled-text: #998fa3;\n --color-danger: #cc0000;\n --color-danger-surface: #fff0f0;\n --color-success: #008000;\n --color-warning: #e65c00;\n --color-notice: #ffffcc;\n --color-notice-text: #330066;\n --color-focus: #ff0066;\n --color-shadow: #cc99cc;\n --color-overlay: rgba(255, 214, 234, 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Comic Sans MS\", \"Comic Sans\", \"Chalkboard SE\", \"Comic Neue\", cursive;\n --font-heading: \"Comic Sans MS\", \"Comic Sans\", \"Chalkboard SE\", \"Comic Neue\", cursive;\n --font-ui: \"Comic Sans MS\", \"Comic Sans\", \"Chalkboard SE\", \"Comic Neue\", cursive;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 14px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 17px;\n --text-display: 40px;\n --text-h1: 28px;\n --text-h2: 21px;\n --text-h3: 16px;\n --line-body: 1.35;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 1px;\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: 2px;\n --border-width-strong: 3px;\n --border-style: groove;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 2px 2px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-conic-gradient(color-mix(in srgb, var(--color-border-muted) 55%, transparent) 0 25%, transparent 0 50%) 0 0 / 4px 4px, var(--color-page);\n --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar) 45%, white));\n --fill-bar-alt: linear-gradient(90deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 45%, white));\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }