{ "id": "v1-hp-8881", "long_id": "v1.home-pages-90s.portal.s08.p08.t08.u01", "name": "Personal home page: the links directory and web ring hub, 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": "portal", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A hobbyist's directory of other people's home pages and the web rings that join them, as volunteers kept them between 1996 and 2001: the name in big italic serif on a sky tile with small clouds, a row of folder tabs, and under them one white sheet holding a search band, a line of figures and the directory as two columns of categories with their sub-links. Text is small black Verdana on white with navy Times headings, default blue underlined links, pale yellow and pale blue blocks, thin dashed frames with a hard blue shadow and bars split into a lighter and a darker half. Lists of sites with two lines each, a table of rings, a link check, questions that open and an add-your-page form are its content; search engines and hosted rings replaced the kind after 2001.", "url": "https://chrono.skin/s/v1-hp-8881", "preview_url": "https://chrono.skin/s/v1-hp-8881/specimen.html", "files": { "STYLE.md": "# Personal home page: the links directory and web ring hub, 1999\n\n## Summary\n\nA hobbyist's directory of other people's home pages and the web rings that join them, as volunteers kept them between 1996 and 2001: the name in big italic serif on a sky tile with small clouds, a row of folder tabs, and under them one white sheet holding a search band, a line of figures and the directory as two columns of categories with their sub-links. Text is small black Verdana on white with navy Times headings, default blue underlined links, pale yellow and pale blue blocks, thin dashed frames with a hard blue shadow and bars split into a lighter and a darker half. Lists of sites with two lines each, a table of rings, a link check, questions that open and an add-your-page form are its content; search engines and hosted rings replaced the kind after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 744px, centred in an 800px window. `.ds-page__frame` holds the header on the tile and then `.ds-page__sheet`, one sheet in `--color-canvas` with a `--border-width-strong` border in `--color-border-strong`, `--shadow-dialog` and `--space-5` of padding. Views and footer are inside the sheet. Text is left-aligned; only the search band, the empty state and the footer are centred.\n- `.ds-nav` is written once: `.ds-nav__top` on the tile (the `.ds-brand` at `--text-display` in italic at the left, `.ds-nav__aside` with a bold tagline and a line of small links right-aligned), then `.ds-nav__links`, folder tabs standing on the sheet's top edge. The tab of the view that shows is the sheet's colour, taller, and covers the edge. One tab is a `.ds-menu`: the categories drop under it.\n- The specimen is one example site, a hobby links directory with web rings, of five views.\n- Home view, `.ds-page__main`, is five rows `--space-5` apart: the `.ds-hero` search band; the `.ds-stat` line of four figures; a `.ds-heading` bar over the `.ds-grid`, the directory, two columns by three rows of categories; `.ds-page__pair` (a heading over the `.ds-list` of new sites at three parts, a `.ds-page__stack` of two `.ds-panel` boxes at two); the `.ds-construction` strip.\n- Inner pages keep the header, tabs and footer and drop the search band, the figures and the directory. `.ds-page__inner` opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` (a tinted box, title and one line at the left, a button at the right) and, in a category, the `.ds-tabs` line of choices. Below it: `.ds-page__columns`, the list of sites with page numbers and a `--size-side` (180px) `.ds-sidebar` at the right; or the table over a `.ds-page__pair` of the empty state and a panel; or notices, the form and the message box in one column; or a `.ds-page__pair` of `.ds-prose` at three parts and the `.ds-accordion` at two.\n- Views: `home`; `category` (tabs, five sites, page numbers, the sidebar); `rings` (the table of rings with its badge key, the empty list of your own rings, a progress bar); `add` (notices, the form, the message box for removing a listing); `help` (running text, link states, the questions).\n- Spacing: `--space-1` 2px strip padding and the lines between categories; `--space-2` 4px cell padding, between tabs; `--space-3` 7px between a title and its block, between buttons, form rows and list items; `--space-4` 10px box padding, paragraph spacing, between stacked boxes; `--space-5` 15px sheet padding and the gap between blocks and columns; `--space-6` 22px list indent and the space under the sheet.\n- Fixed sizes: `--size-menu` 180px drop-down list, `--size-search` 260px search field, `--size-label` 140px form labels, `--size-field` 250px inputs, `--size-area` 360px textarea, `--size-check` 14px, `--size-dialog` 360px, `--size-icon` 34px category tile, `--size-tip` 180px tooltip.\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- The conventions of the era hold. `--color-page` and `--color-canvas` are of one lightness and every text, heading, link and status colour is legible on the page, the sheet, the surfaces and the four `--color-fill-*` blocks; the name and the tagline stand straight on the tile. Fills that bring their own text: `--fill-bar` with `--color-bar-text` (idle tabs, section bars, table heads, the dialog title), `--fill-bar-alt` with `--color-bar-alt-text` (the line of figures, panel title strips, a hovered tab), `--fill-inverse` with `--color-inverse-text` (the current choice of `.ds-tabs`, counter digits), `--fill-accent` with `--color-accent-text` (\"NEW!\", the current page number, the hovered drop-down line, the blocks of a progress bar), `--color-notice` with `--color-notice-text` (notices, tooltips, the construction strip), `--color-danger-surface` with `--color-danger`.\n- The current folder tab is `--color-canvas` lettered in `--color-heading`: it is a piece of the sheet, not a bar.\n- Status colours double as fills: status badges and the destructive button are filled with `--color-success`, `--color-warning` or `--color-danger` and lettered in `--color-canvas`.\n- `--color-surface-alt` (pale yellow here) is the search band, the page header box, sidebar boxes, alternate rows, question titles, the ring line, inline code and the empty state. `--color-surface-strong` is the lines between categories and the track of a progress bar. The `--color-fill-*` blocks are the small tiles beside each category.\n- Headings: `--color-heading` (navy) for the name, the search title, page titles, h1, h3 and the drawings on category tiles; `--color-heading-alt` (rust) for h2, the tagline, page header lines, sidebar titles, form labels, tooltip triggers and percentages. `--color-accent-alt` marks bullets, list markers and the italic \"Cool!\" word.\n- Type here: `--font-body` and `--font-ui` are Verdana at 11px and 10px with a 1.5 line; `--font-heading` is Times New Roman bold at 15, 18 and 26px, and the name at 38px in italic. `--font-mono` sets the line under each site and the textarea. Every link is underlined, navigation included.\n- Surface here: `--border-style` `dashed`, 1px for boxes and 2px (`--border-width-strong`) for the sheet, the tabs and the dialog. `--shadow-panel` and `--shadow-dialog` are hard offsets in a deeper sky blue. No radius, no soft shadow, no transitions. `--fill-page` is small white clouds on `--color-page`; bars are a flat upper half over a darker lower half.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile, form controls and the progress track; `dotted` lines between list items; the italic of the name; the dotted underline of a tooltip trigger; the percentage widths of `.ds-progress__bar--NN`; `calc()` over `--border-width-strong` to seat the tabs on the sheet.\n\n## Components\n\n- `.ds-page`: on ``; the tiled page and body type. `.ds-page__frame` the 744px column; `.ds-page__sheet` the sheet; `.ds-page__main` and `.ds-page__inner` stack blocks `--space-5` apart; `.ds-page__head` stacks path, page header and tabs; `.ds-page__pair` three parts to two; `.ds-page__columns` content plus sidebar; `.ds-page__stack` a column of boxes; `.ds-section` a heading with its block.\n- `.ds-nav`: the header. `.ds-nav__top` holds the brand and `.ds-nav__aside` (`.ds-nav__tagline`, `.ds-nav__tools`); `.ds-nav__links` is the row of folder tabs, `.ds-nav__item` holding a `.ds-nav__link`; the tab of the view that shows joins the sheet (one selector per view, or `is-current`).\n- `.ds-menu`: a drop-down under a tab. Put it on the `.ds-nav__item`, give the tab `.ds-menu__label` (it adds the small triangle) and follow it with `.ds-menu__list` of `.ds-menu__link` lines; the list shows on hover, on focus inside it, or with `is-open`.\n- `.ds-brand`: mark and name. `.ds-brand__mark` is a tile dressed like the button (`--fill-button`, `--color-button-text`, outset bevel, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name at `--text-display` in `--color-heading`, italic. Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the search band on `--color-surface-alt`: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a field, a select, a `.ds-button--large` and a secondary button on one line), `.ds-hero__hint`.\n- `.ds-page-header`: a tinted box: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, `.ds-page-header__action` at the right.\n- `.ds-heading`: a section title as a bar on `--fill-bar`.\n- `.ds-rule`: a plain rule; `.ds-rule--short` is 60% wide; `.ds-rule--rainbow` is a bar of six colours. `.ds-construction` with `.ds-construction__text` is the striped strip.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead`, `.ds-prose__code`.\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.\n- `.ds-bullets`: a link list with small coloured squares, `.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-table`: every cell ruled: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num`, `--group`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the line of figures on `--fill-bar-alt`; each `.ds-stat__item` is a `.ds-stat__value` followed by its `.ds-stat__label`.\n- `.ds-list`: sites, parted by dotted lines: `.ds-list__item` with a `.ds-list__title` link, a `.ds-list__text` of two lines and a `.ds-list__meta` line; `.ds-list__more` under it.\n- `.ds-panel`: a framed box: `.ds-panel__title` strip, `.ds-panel__body`, `.ds-panel__text`. `.ds-ring` with `.ds-ring__item` is the bracketed previous, random, next line of a web ring.\n- `.ds-grid`: the directory: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill of its tile) holds a `.ds-grid__pic` tile and a `.ds-grid__body` with the `.ds-grid__title` category link and a `.ds-grid__text` line of sub-links.\n- `.ds-accordion`: questions that open: each `.ds-accordion__item` is a `
` with a `.ds-accordion__title` summary and a `.ds-accordion__body`. Use it for help and rules only.\n- `.ds-tabs`: a line of choices parted by bars: `.ds-tabs__label`, `.ds-tabs__item` holding a `.ds-tabs__tab`, the current one (`is-current`) on `--fill-inverse`.\n- `.ds-badge`: a solid \"NEW!\" label; `.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.\n- `.ds-tooltip`: a word with a dotted underline; its `.ds-tooltip__tip` child is a small box on `--color-notice` that shows above it on hover, on focus (give the trigger `tabindex=\"0\"`) or with `is-open`.\n- `.ds-progress`: `.ds-progress__label` (with `.ds-progress__value` at its right) over a sunken `.ds-progress__track` holding a `.ds-progress__bar` of blocks in `--fill-accent`; its length is `.ds-progress__bar--10` to `--100` in tenths.\n- `.ds-counter`: the visitor counter, `.ds-counter__digit` boxes on `--fill-inverse`.\n- `.ds-sidebar`: a column of tinted `.ds-sidebar__block` boxes, each a ruled `.ds-sidebar__title` over a `.ds-sidebar__list` of `.ds-sidebar__item` lines.\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` 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, `.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-footer`: inside the sheet under a rule, centred: `.ds-footer__links` with `.ds-footer__item`, `.ds-footer__count` with the counter, `.ds-footer__note` and `.ds-footer__legal`.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n- Left out as not of the period: `.ds-carousel`, `.ds-switch`, `.ds-avatar`.\n\n## Never\n\n- `content-width <= 744px`: everything is inside the 744px sheet.\n- `font-size <= 38px`: the name is the largest text.\n- `font-size >= 10px`: small print is 10px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Verdana, Times and one monospace.\n- `uppercase-text <= 0%`: capitals are typed, never transformed.\n- `border-radius <= 0px`: nothing on these pages had a rounded corner.\n- `box-shadow = none`: depth comes from ridged borders only.\n- `text-shadow = none`: text is flat.\n- `border-width <= 6px`: the thickest ridge is 6px.\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 section is a `.ds-heading` bar over its block; a new box is a `.ds-panel`; a new category is a `.ds-grid__cell`; a new kind of entry is a `.ds-list__item` with a title, two lines and a meta line. Keep everything inside the sheet, keep links blue and underlined, keep frames thin, and never add radius, soft shadows, hover transitions, a side menu or a dark band across the page.\n", "components.css": "/* Layout tokens (structure part). A hobbyist's link directory and web ring\n hub of 1999: a 744px sheet on the tile of an 800px window with a row of\n folder tabs standing on its top edge. Inside it a search band, a line of\n figures, the directory in two columns of categories, then the newest\n sites beside the ring boxes. */\n:root {\n --size-page: 744px;\n --size-side: 180px;\n --size-menu: 180px;\n --size-search: 260px;\n --size-label: 140px;\n --size-field: 250px;\n --size-area: 360px;\n --size-check: 14px;\n --size-dialog: 360px;\n --size-icon: 34px;\n --size-tip: 180px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 7px;\n --space-4: 10px;\n --space-5: 15px;\n --space-6: 22px;\n}\n\n/* ---------- shell: the tile, the tabs, the sheet ---------- */\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-6);\n}\n.ds-page__sheet {\n box-sizing: border-box;\n padding: var(--space-5);\n background: var(--color-canvas);\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}\n.ds-page__main,\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n/* The newest sites at three parts, the ring boxes at two. */\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\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-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\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 bar across its column. */\n.ds-heading {\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-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\n/* ---------- nav: the name on the tile, folder tabs on the sheet's edge ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-nav__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: 0 var(--space-2);\n}\n.ds-brand {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\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 font-style: italic;\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__aside {\n min-width: 0;\n text-align: right;\n}\n.ds-nav__tagline {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-nav__tools {\n display: block;\n font-size: var(--text-small);\n}\n.ds-nav__links {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0 0 calc(var(--border-width-strong) * -1);\n padding: 0 var(--space-4);\n list-style: none;\n}\n.ds-nav__item {\n position: relative;\n display: flex;\n margin: 0 0 var(--border-width-strong);\n}\n.ds-nav__link {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* The tab of the view that shows is the colour of the sheet, taller than the\n others, and covers the sheet's edge. One selector for each 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(#category:target) .ds-nav__link[href=\"#category\"],\n.ds-page:has(#rings:target) .ds-nav__link[href=\"#rings\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n margin: 0 0 calc(var(--border-width-strong) * -1);\n padding: var(--space-3) var(--space-4) calc(var(--space-2) + var(--border-width-strong));\n background: var(--color-canvas);\n color: var(--color-heading);\n text-decoration: none;\n text-shadow: none;\n}\n\n/* ---------- menu: the list that drops from a tab ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__label::after {\n content: \" \\25BE\";\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 5;\n box-sizing: border-box;\n width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- hero: the search band ---------- */\n.ds-hero {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\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-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-2) 0 var(--space-4);\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 margin: 0;\n}\n.ds-hero__action .ds-form__input {\n width: var(--size-search);\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 tinted box, title at the left, action 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 border-radius: var(--radius-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}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: every cell ruled ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--fill-panel);\n color: var(--color-text);\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 border: 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-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 border: var(--border-width) var(--border-style) var(--color-border);\n text-align: left;\n vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: right;\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-1);\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) 0 0;\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: left;\n}\n\n/* ---------- stats: one line of figures on the dark bar ---------- */\n.ds-stat {\n display: flex;\n justify-content: space-around;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n text-shadow: var(--shadow-text);\n}\n.ds-stat__item {\n white-space: nowrap;\n}\n.ds-stat__value {\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}\n.ds-stat__label {\n font-size: var(--text-small);\n}\n\n/* ---------- list: sites, a title, what it is, where and when ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text);\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);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__title {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-list__more {\n margin: 0;\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- panel: a framed box 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-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-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) var(--space-4);\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__body .ds-bullets {\n margin: 0 0 var(--space-3);\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-3);\n margin: 0 0 var(--space-3);\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-weight: var(--weight-bold);\n}\n.ds-ring__item::before {\n content: \"[ \";\n color: var(--color-text-muted);\n}\n.ds-ring__item::after {\n content: \" ]\";\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: the directory, two columns of categories ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-grid__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-icon);\n height: var(--size-icon);\n padding: var(--space-2);\n background: var(--color-fill-1);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell--2 .ds-grid__pic {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__pic {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__pic {\n background: var(--color-fill-4);\n}\n.ds-grid__pic svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-grid__body {\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0;\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}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n}\n\n/* ---------- accordion: questions that open ---------- */\n.ds-accordion {\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-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__title {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-link);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) dotted var(--color-border-muted);\n}\n\n/* ---------- tabs: a line of choices parted by bars, the current one inverted ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\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__label {\n padding: 0 var(--space-3) 0 0;\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-tabs__item + .ds-tabs__item::before {\n content: \"|\";\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-tabs__tab {\n color: var(--color-link);\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 padding: 0 var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- sidebar: tinted boxes with a ruled title ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-sidebar__block {\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n\n/* ---------- footer: inside the sheet, centred under a rule ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n text-align: center;\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-weight: var(--weight-bold);\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__count {\n margin: 0;\n color: var(--color-heading-alt);\n}\n.ds-footer__note {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-footer__legal {\n margin: 0;\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/* ---------- rules: the plain one and the bar of six colours ---------- */\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.ds-rule--short {\n width: 60%;\n}\n.ds-rule--rainbow {\n height: var(--space-2);\n border: 0;\n background: linear-gradient(90deg, var(--color-danger) 0 16.66%, var(--color-warning) 16.66% 33.33%, var(--color-heading) 33.33% 50%, var(--color-success) 50% 66.66%, var(--color-link) 66.66% 83.33%, var(--color-link-visited) 83.33%);\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/* ---------- 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.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 coloured squares ---------- */\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(3n+2)::before {\n background: var(--color-heading-alt);\n}\n.ds-bullets__item:nth-child(3n)::before {\n background: var(--color-warning);\n}\n.ds-bullets__text {\n min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\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.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: bevelled keys in their own colour ---------- */\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__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 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 text-transform: none;\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: \">\";\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\n/* ---------- tooltip: the small box a pointer brings up, as a title text did ---------- */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: var(--color-heading-alt);\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n left: 0;\n bottom: 100%;\n z-index: 4;\n box-sizing: border-box;\n width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* ---------- progress: a sunken track filled with blocks, as an installer drew it ---------- */\n.ds-progress {\n display: block;\n margin: 0 0 var(--space-3);\n}\n.ds-progress:last-child {\n margin: 0;\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-progress__value {\n flex: none;\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-weight: var(--weight-bold);\n}\n.ds-progress__track {\n display: block;\n box-sizing: content-box;\n height: var(--space-4);\n padding: var(--space-1);\n background: var(--color-surface-strong);\n border: var(--border-width) inset var(--color-border);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: repeating-linear-gradient(90deg, transparent 0 var(--space-3), var(--color-surface-strong) var(--space-3) calc(var(--space-3) + var(--space-1))), var(--fill-accent);\n}\n.ds-progress__bar--10 { width: 10%; }\n.ds-progress__bar--70 { width: 70%; }\n.ds-progress__bar--90 { width: 90%; }\n\n/* ---------- counter: boxed digits ---------- */\n.ds-counter {\n display: inline-flex;\n gap: var(--space-1);\n padding: var(--space-1);\n vertical-align: middle;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-counter__digit {\n display: block;\n padding: 0 var(--space-1);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a links directory and web ring hub, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n
\n Hobby pages, sorted by hand since 1996\n Add your page | Random site | How it works\n
\n
\n \n
\n\n
\n\n
\n
\n\n
\n

Find a hobby page

\n

1,204 home pages made by people who collect, build, grow and mend things, every one looked at before it was listed.

\n
\n \n \n Search\n Add Your Page\n
\n

Try: signal boxes, first day covers, crystal sets. Last updated Sunday 5 December 1999.

\n
\n\n
    \n
  • 1,204 sites listed
    • \n
  • 38 web rings
    • \n
  • 61 added this month
    • \n
  • 17 waiting to be looked at
    • \n
\n\n
\n

Browse the directory

\n
\n
\n \n
\n

Model railways (214)

\n

Layouts, Narrow gauge, Scratch building, Clubs

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

Stamps and coins (187)

\n

First day covers, Swaps, Postmarks, Tokens

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

Gardens and ponds (243)

\n

Allotments, Alpines, Koi, Greenhouses NEW!

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

Radio and electronics (156)

\n

Short wave, Crystal sets, Valves, Kits

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

Kites and model aircraft (98)

\n

Plans, Gliders, Flying fields, Festivals

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

Needle and thread (306)

\n

Quilts, Cross stitch, Lace, Free patterns

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

New this week

\n
    \n
  • The Shed at the End of the Line NEW!\n A narrow gauge layout in a garden shed, with a track plan and a diary of the build.\n Model railways, added 04 Dec 99
    • \n
  • Postmarks of the Small Islands COOLA cool site is one the editor liked best that week. Five are picked each month.\n Three hundred scanned postmarks, sorted by island, each with its date.\n Stamps and coins, added 02 Dec 99
    • \n
  • A Pond in One Weekend\n How one family dug it, lined it and filled it, and what went wrong.\n Gardens and ponds, added 30 Nov 99
    • \n
\n

All 61 of this month's sites...

\n
\n\n
\n
\n

Ring of the week

\n
\n

The Garden Railway Ring: 44 sites, every one with a train out of doors.

\n \n

See all 38 rings

\n
\n
\n
\n

The December link check

\n
\n
\n Sites visited again 70%\n \n
\n

843 of 1,204 looked at; 19 had moved or gone. Tell us about a dead link

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

Under construction: the page for clubs and societies opens in January

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

Model railways

\n

214 home pages about small trains, indoors and out.

\n
\n
\n Add a Site Here\n
\n
\n \n
\n\n
\n
\n
    \n
  • The Shed at the End of the Line NEW!\n A narrow gauge layout in a garden shed, with a track plan and a diary of the build.\n added 04 Dec 99, 12 pictures, in the Garden Railway Ring
    • \n
  • Signal Boxes I Have Known Cool!\n Drawings and measurements of forty real signal boxes, for people who want to build one.\n added 21 Nov 99, 40 drawings
    • \n
  • Card Kits from Cereal Boxes\n Free sheets to print, cut and fold into station buildings. Slow to load but worth it.\n added 14 Nov 99, 9 sheets to print
    • \n
  • The Attic Branch\n One man, one attic and eleven years. The timetable page is the best part.\n added 02 Nov 99, in two rings
    • \n
  • Tuesday Night Club\n A club's page with its exhibition dates and a layout you can go and see.\n added 27 Oct 99, checked 01 Dec 99
    • \n
\n
    \n
  1. Model railways, page:
    2. \n
  2. << Back
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. Next >>
    8. \n
\n
\n\n \n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Web rings

\n

38 rings of pages on one hobby. Step on anywhere and keep clicking Next.

\n
\n
\n Start a Ring\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: OPEN taking new sites QUEUE a wait to join BROKEN a site in it has gone NEW! started this month\n Hits are counted from the ring's own buttons. How a ring works\n
RingKept byStateSitesHits a week
The Garden Railway Ring Trains out of doors, any scale.a signalmanOPEN441,310
First Day Cover Circle Collectors who show their covers.a retired postmasterQUEUE612,048
Card Modellers NEW! Buildings from card and paper.two brothersOPEN795
Short Wave Listeners Logs, aerials and verification cards.nobody at presentBROKEN23402
Quilters' Ring of Friends One block a month, shown by everybody.a village sewing groupOPEN1123,760
The other 33 rings are on page two and page three.
\n\n
\n
\n

Rings you keep

\n
\n

You keep no rings yet

\n

A ring needs five pages on one hobby and somebody to look after it. That could be you.

\n Start a Ring\n
\n
\n
\n

Ring full?

\n
\n
\n First Day Cover Circle 90%\n \n
\n

A ring closes at 68 sites, so that one trip round it can still be made in an evening.

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

Add a site

\n

Tell us about your page. Somebody will look at it within a week.

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

Please note: hobby pages only. No shops, and no page that is nothing but links to other pages.

\n

Not sent. The address of your page is missing. Please type it and try again.

\n
\n\n
\n \n
\n \n
\n \n
\n \n We cannot visit a page without its address.\n
\n \n
\n \n (the nearest one will do)\n
\n \n
\n \n (never shown)\n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Remove your listing?

\n

Your page will be taken out of the directory and out of any ring it is in. This cannot be undone.

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

How it works

\n

What gets listed, what a ring is, and what to do about a dead link.

\n
\n
\n Add Your Page\n
\n
\n
\n\n
\n
\n

A directory kept by hand

\n

No robot reads these pages. A person does.

\n

chronoskin began in 1996 as one page of bookmarks. Every site here has been visited by somebody who wrote the two lines under its name, and every site is visited again each December to see that it is still there.

\n

What a web ring is

\n

A ring is a chain of pages on one hobby. Each page carries a small box with three links, and the box is a few lines of markup that begin <!-- ring -->. From any page in the ring you can:

\n
    \n
  • go on to the next page;
    • \n
  • go back to the one before;
    • \n
  • jump to one picked by chance.
    • \n
\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

Found a dead link?

\n

Pages move and free hosts close. If a link here leads nowhere, tell us through the form and it will be mended or taken out.

\n
\n\n
\n

Questions people ask

\n
\n
\n How long until my page is listed?\n

About a week. Somebody has to visit it first, and we all have other jobs.

\n
\n
\n Why was my page turned down?\n

Most often because it was not finished, or it was a shop.

\n
\n
\n May I be in more than one ring?\n

Yes, in as many as will have you. Put each ring's box at the foot of your page.

\n
\n
\n Can I change the two lines about my page?\n

Send the form again with the same address and the new words.

\n
\n
\n What makes a site \"cool\"?\n

The editor liked it. That is the whole rule.

\n
\n
\n
\n

The ring box

\n
\n

Every page in a ring carries this line at its foot:

\n \n

The ring's keeper sends you the markup when your page is let in.

\n
\n
\n

Still stuck? Write to us

\n
\n
\n\n
\n
\n\n \n\n
\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.portal.s08.p08.t08.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-8881\",\n \"short\": \"v1-hp-8881\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #98d0ff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #ffffd0;\n --color-surface-strong: #cce6ff;\n --color-bar: #0068ff;\n --color-bar-text: #ffffff;\n --color-bar-alt: #003098;\n --color-bar-alt-text: #ffffd0;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #606060;\n --color-heading: #003098;\n --color-heading-alt: #c84400;\n --color-link: #0000ee;\n --color-link-quiet: #0033cc;\n --color-link-visited: #551a8b;\n --color-link-hover: #ff3300;\n --color-link-active: #ff0000;\n --color-border: #989898;\n --color-border-strong: #0030d0;\n --color-border-muted: #b0c8e0;\n --color-accent: #ff6600;\n --color-accent-text: #ffffff;\n --color-accent-alt: #b8007a;\n --color-fill-1: #cce6ff;\n --color-fill-2: #ffffd0;\n --color-fill-3: #d9f2d9;\n --color-fill-4: #ffe0cc;\n --color-button: #f0f0f0;\n --color-button-text: #000000;\n --color-button-hover-text: #0030d0;\n --color-button-secondary: #0068ff;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #686868;\n --color-disabled: #e0e0e0;\n --color-disabled-text: #909090;\n --color-danger: #cc0000;\n --color-danger-surface: #ffe6e6;\n --color-success: #007a00;\n --color-warning: #b85c00;\n --color-notice: #ffffd0;\n --color-notice-text: #000000;\n --color-focus: #0030d0;\n --color-shadow: #5c8fc7;\n --color-overlay: rgba(0, 48, 152, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-heading: \"Times New Roman\", Times, \"Liberation Serif\", serif;\n --font-ui: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-mono: Monaco, \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 38px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.1;\n --line-display: 1;\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: 4px;\n --border-width-strong: 6px;\n --border-style: ridge;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: radial-gradient(circle at 12% 18%, var(--color-text) 0 1px, transparent 1.5px) 0 0 / 160px 160px, radial-gradient(circle at 64% 9%, var(--color-text-muted) 0 1px, transparent 1.5px) 0 0 / 160px 160px, radial-gradient(circle at 38% 52%, var(--color-heading) 0 1.5px, transparent 2px) 0 0 / 160px 160px, radial-gradient(circle at 86% 61%, var(--color-text) 0 1px, transparent 1.5px) 0 0 / 160px 160px, radial-gradient(circle at 21% 84%, var(--color-link) 0 1px, transparent 1.5px) 0 0 / 160px 160px, radial-gradient(circle at 71% 93%, var(--color-text-muted) 0 1px, transparent 1.5px) 0 0 / 160px 160px, radial-gradient(circle at 52% 31%, var(--color-text-muted) 0 0.5px, transparent 1px) 0 0 / 80px 80px, var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\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: var(--color-button);\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" } }