{ "id": "v1-hp-1214", "long_id": "v1.home-pages-90s.blog.s01.p02.t01.u04", "name": "Personal home page: the fan page, 1998", "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": "blog", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A fan page as people built them for themselves on free web space between 1996 and 2001: one centred column set straight on a tiled starfield, a huge coloured name at the top, a rainbow bar and a thick-bordered table of sections under it. Text is bright on black in the browser's own serif (white body text, yellow and lime headings, cyan links, pink visited links), every box has a 4px or 6px ridged border, and the page carries the furniture of its kind: a hit counter of boxed digits, \"NEW!\" marks, an \"under construction\" strip, awards, a web ring box and a guestbook. It is loud, centred and hand-made, and it was common until page builders and weblogs replaced it after 2001.", "url": "https://chrono.skin/s/v1-hp-1214", "preview_url": "https://chrono.skin/s/v1-hp-1214/specimen.html", "files": { "STYLE.md": "# Personal home page: the fan page, 1998\n\n## Summary\n\nA fan page as people built them for themselves on free web space between 1996 and 2001: one centred column set straight on a tiled starfield, a huge coloured name at the top, a rainbow bar and a thick-bordered table of sections under it. Text is bright on black in the browser's own serif (white body text, yellow and lime headings, cyan links, pink visited links), every box has a 4px or 6px ridged border, and the page carries the furniture of its kind: a hit counter of boxed digits, \"NEW!\" marks, an \"under construction\" strip, awards, a web ring box and a guestbook. It is loud, centred and hand-made, and it was common until page builders and weblogs replaced it after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 700px, centred in an 800px window by `.ds-page__frame`. The frame has no fill and no border: everything stands on `--fill-page`, the tile, as text stood on a background picture.\n- One column, one axis. The header, welcome box, counters, section titles, pictures, boxes, awards and footer are centred; news, tables, forms and running text are left-aligned inside their boxes.\n- The specimen is one example site, a fan page for a made-up television serial, of six views. `.ds-nav` and `.ds-footer` are written once outside the views.\n- Home view from the top: `.ds-nav` (the `.ds-brand` at `--text-display`, an italic tagline, a `.ds-rule--rainbow`, then `.ds-nav__links`, a six-cell table of sections), then `.ds-page__main`: the `.ds-hero` welcome box, the `.ds-construction` strip, the `.ds-stat` counters, a `.ds-heading` over the `.ds-list` of dated news, a rainbow rule, a heading over the `.ds-grid` of four framed pictures, and `.ds-page__pair` with two `.ds-panel` boxes (web ring, poll).\n- Inner pages keep the header and footer and drop the welcome box and counters. `.ds-page__inner` opens with `.ds-page__head`: the centred `.ds-breadcrumb`, the `.ds-page-header` strip (title and one italic line at the left, one button at the right) and, where the page has parts, the `.ds-tabs` row. Below it the page stays one column, with `.ds-rule--rainbow` between unrelated blocks. Only the page of running text uses `.ds-page__columns`: `.ds-prose` and a `--size-side` (190px) `.ds-sidebar` at the right.\n- Views: `home`; `episodes` (tabs for the seasons, the episode table with its key of status badges, page numbers); `about` (running text, the sidebar, the line that shows link states); `gallery` (eight framed pictures and the empty state of a season with none); `links` (two boxes of bulleted links and the awards); `guestbook` (entries, notices, the form to sign, the delete message box).\n- Spacing: `--space-1` 2px between table cells and digits; `--space-2` 4px cell and strip padding; `--space-3` 8px between a title and its block, between buttons and form rows, the height of the rainbow bar; `--space-4` 12px box padding and paragraph spacing; `--space-5` 16px between blocks and columns; `--space-6` 28px list indent, the gap between counters and the side padding of the welcome box.\n- Fixed sizes: `--size-label` 170px form labels, `--size-field` 240px inputs, `--size-area` 340px textarea, `--size-check` 16px, `--size-dialog` 380px, `--size-icon` 40px, `--size-award` 124px, `--size-date` 84px date column of the news, `--size-thumb` 92px height of a framed picture.\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\nThese are the conventions of the whole era; every layout and token set of it follows them.\n\n- The page and the sheet are of one lightness: `--color-page` and `--color-canvas` are both dark or both light, and `--fill-page` is a quiet tile built from palette tokens. `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt`, every link colour, `--color-accent-alt`, `--color-danger`, `--color-success` and `--color-warning` are legible on the page, the canvas, all three surfaces and all four `--color-fill-*` blocks, at 2:1 or better.\n- Fills that bring their own text: `--fill-bar` with `--color-bar-text` (the table of sections, table heads, the dialog title), `--fill-bar-alt` with `--color-bar-alt-text` (panel and sidebar title strips), `--fill-inverse` with `--color-inverse-text` (counter digits, awards, the current tab), `--fill-accent` with `--color-accent-text` (the current section, the \"NEW!\" badge, the current page number), `--color-notice` with `--color-notice-text` (notices and the two stripes of the construction strip), `--color-danger-surface` with `--color-danger`. A link on one of these takes the fill's text colour (`.ds-link--plain`).\n- Status colours double as fills: a status badge and the destructive button are filled with `--color-success`, `--color-warning` or `--color-danger` and lettered in `--color-canvas`.\n- `--color-surface-strong` is the ground that shows between the cells of a table; `--color-surface-alt` is alternate rows, inline code and the empty state.\n- Headings are coloured: `--color-heading` (yellow here) for the name, page titles, h1 and h3; `--color-heading-alt` (lime) for section titles, h2, taglines, dates and form labels. `--color-accent-alt` (magenta) is the italic \"Updated!\" word, bullets and list markers.\n- The rainbow bar is six hard steps: `--color-danger`, `--color-warning`, `--color-heading`, `--color-success`, `--color-link`, `--color-link-visited`.\n- Type here: `--font-body` and `--font-heading` are Times New Roman at 16px, the unchanged browser default; headings 19, 24 and 32px bold, the name 48px. `--font-ui` Arial 13px sets buttons, controls, table heads, the section cells and badges; `--font-mono` Courier New sets counter digits, news dates and the textarea. Links are always underlined. Italic is written literally for taglines, lead lines and the footer note.\n- Surface here: `--border-style` `ridge`, 4px for boxes and 6px (`--border-width-strong`) for the section table, the welcome box, tables, panels, pictures, awards and the dialog. No shadows, no radius, flat fills, no transitions. `--fill-page` is a starfield of 1px dots in the text, heading and link colours over `--color-page`.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile and form controls (drawn in the control's own colour), `dotted` rules inside lists, the 45 degree turn of a bullet, and the slow two-step `.ds-blink`, which only runs inside `prefers-reduced-motion: no-preference`.\n\n## Components\n\n- `.ds-page`: on ``; the tiled page and body type. `.ds-page__frame` the centred column; `.ds-page__main` and `.ds-page__inner` stack blocks `--space-5` apart; `.ds-page__head` stacks path, page header and tabs; `.ds-page__columns` text plus sidebar; `.ds-page__pair` two equal boxes; `.ds-section` a heading with its block.\n- `.ds-nav`: the centred header. `.ds-nav__tagline` the italic line; `.ds-nav__links` the table of sections, six `.ds-nav__item` / `.ds-nav__link` cells in `--fill-bar` inside a `--border-width-strong` ridge; the cell of the view that shows takes `--fill-accent` (one selector per view, or `is-current`).\n- `.ds-brand`: mark and name, centred. `.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 welcome box on `--fill-panel` in a thick ridge with `--shadow-dialog`: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary button), `.ds-hero__hint` (the \"last updated\" line).\n- `.ds-page-header`: a ridged strip: `.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 centred section title in `--color-heading-alt`.\n- `.ds-rule`: a carved rule; `.ds-rule--short` is 60% wide; `.ds-rule--rainbow` is the six-step bar, the usual divider.\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-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead`, `.ds-prose__code` for a block of markup.\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 coloured diamonds, `.ds-bullets__item` holding a `.ds-bullets__text`.\n- `.ds-button`: a bevelled grey 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`: a thick ridge round cells that stand `--space-1` apart on `--color-surface-strong`: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num`, `--group`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the row of counters; each `.ds-stat__item` is a `.ds-stat__value` of boxed `.ds-stat__digit` spans in `--fill-inverse` over a `.ds-stat__label`.\n- `.ds-list`: dated news in a ridged box: `.ds-list__item` with a `.ds-list__meta` date and a `.ds-list__body`; `.ds-list__more` under it. `.ds-list--entries` is the guestbook: `.ds-list__title`, meta, `.ds-list__text`.\n- `.ds-panel`: a thick yellow-ridged box: `.ds-panel__title` strip, `.ds-panel__body`, `.ds-panel__text`, `.ds-panel__form`. `.ds-ring` with `.ds-ring__item` is the bracketed previous, random, next line of a web ring.\n- `.ds-grid`: four framed pictures to a row: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) holds a `.ds-grid__pic` block with a line drawing, a `.ds-grid__title` link and a `.ds-grid__text` file size.\n- `.ds-tabs`: a one-row table of `.ds-tabs__item` / `.ds-tabs__tab` cells, the current one (`is-current`) in `--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-awards` and `.ds-award`: prize pictures as bordered badges on `--fill-inverse`: `.ds-award__star`, `.ds-award__title`, `.ds-award__text`.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each a `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` lines.\n- `.ds-notice`: a centred 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 centred 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`: a rainbow bar, `.ds-footer__links` with `.ds-footer__item`, the `.ds-footer__mail` link, the italic `.ds-footer__note` (\"best viewed at\") and `.ds-footer__legal`.\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 <= 700px`: one fixed 700px column.\n- `font-size <= 48px`: the name is the largest text.\n- `font-size >= 13px`: small print is 13px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Times, Arial and Courier.\n- `uppercase-text <= 0%`: capitals are typed, never transformed.\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 section is a centred `.ds-heading` over a ridged box, with a `.ds-rule--rainbow` before it; a new box is a `.ds-panel`; a new figure is a counter in `.ds-stat`. Keep everything on the centre axis, keep text bright on the tile, keep links underlined, and never add radius, soft shadows, hover transitions, a second navigation or a muted palette.\n", "components.css": "/* Layout tokens (structure part). A fan page of 1998: one centred column of\n 700px set straight on the tiled page of an 800px window, everything on the\n middle axis, 16px between blocks. */\n:root {\n --size-page: 700px;\n --size-side: 190px;\n --size-label: 170px;\n --size-field: 240px;\n --size-area: 340px;\n --size-check: 16px;\n --size-dialog: 380px;\n --size-icon: 40px;\n --size-award: 124px;\n --size-date: 84px;\n --size-thumb: 92px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 28px;\n}\n\n/* ---------- shell: no sheet, the column stands 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: center;\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 padding: var(--space-5) 0 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n/* The one page of running text: the text and a narrow column of boxes. */\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/* Two equal boxes side by side. */\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\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: big, coloured, centred, straight on the tile. */\n.ds-heading {\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 text-align: center;\n}\n\n/* ---------- nav: the huge name, a rainbow bar, a framed table of sections ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\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 .ds-rule {\n align-self: stretch;\n}\n/* A table with a thick border and one cell for each section. */\n.ds-nav__links {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: var(--space-1);\n align-self: stretch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__item {\n display: flex;\n}\n.ds-nav__link {\n flex: 1;\n padding: var(--space-3) var(--space-1);\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-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 section that is showing: the accent fill, no underline. One selector\n for 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(#episodes:target) .ds-nav__link[href=\"#episodes\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"],\n.ds-page:has(#gallery:target) .ds-nav__link[href=\"#gallery\"],\n.ds-page:has(#links:target) .ds-nav__link[href=\"#links\"],\n.ds-page:has(#guestbook:target) .ds-nav__link[href=\"#guestbook\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n\n/* ---------- hero: the welcome box ---------- */\n.ds-hero {\n padding: var(--space-4) var(--space-6);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\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 ruled strip, 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(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: left;\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: thick outer frame, 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-strong) var(--border-style) var(--color-border);\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: 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 var(--space-1);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* ---------- stats: hit counters of boxed digits ---------- */\n.ds-stat {\n display: flex;\n justify-content: center;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-stat__value {\n display: flex;\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}\n.ds-stat__digit {\n display: block;\n padding: calc(var(--space-1) - var(--figure-shift)) var(--space-2) calc(var(--space-1) + var(--figure-shift));\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-display);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n}\n\n/* ---------- list: dated news, or signed entries ---------- */\n.ds-list {\n margin: 0;\n padding: var(--space-2) 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 text-align: left;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n column-gap: var(--space-3);\n align-items: baseline;\n padding: var(--space-2) 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__meta {\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n/* Guestbook entries: the name and where from, then the message. */\n.ds-list--entries .ds-list__item {\n display: block;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n}\n\n/* ---------- panel: a thick-framed box with a title strip ---------- */\n.ds-panel {\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-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-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 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/* A one-question form on one line. */\n.ds-panel__form {\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/* The web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\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: a row of framed pictures with a caption under each ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n text-align: center;\n}\n.ds-grid__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-thumb);\n background: var(--color-fill-1);\n color: var(--color-heading);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\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: var(--size-icon);\n height: var(--size-icon);\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 small table of one row, the current cell inverted ---------- */\n.ds-tabs {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n margin: 0 auto;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\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-2) var(--space-4);\n background: var(--color-surface-alt);\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 background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- sidebar: a column of small framed boxes ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n text-align: left;\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-1) var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\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\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\", centred, small ---------- */\n.ds-breadcrumb {\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-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\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__mail {\n margin: 0;\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\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/* ---------- rules: the plain carved one and the rainbow bar ---------- */\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/* Six hard steps of the palette's loudest colours, as a divider picture was. */\n.ds-rule--rainbow {\n height: var(--space-3);\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/* ---------- 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 over a picture link. */\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 coloured diamonds ---------- */\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 transform: rotate(45deg);\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 text-align: center;\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 text-align: center;\n}\n/* A block of markup to copy. */\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 ---------- */\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/* The usual mark beside a link: 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/* ---------- award: a prize picture drawn as a bordered badge ---------- */\n.ds-awards {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-award {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-award);\n padding: var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n text-align: center;\n}\n.ds-award__star {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-award__star svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-award__title {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-award__text {\n font-family: var(--font-ui);\n font-size: var(--text-small);\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: center;\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", "specimen.html": "\n\n\n\n\nchronoskin: a fan page on a free host, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n The UNOFFICIAL fan page for the TV serial \"Starlane Seven\"!!\n
\n \n
\n\n
\n
\n\n
\n

Welcome aboard, Starlaners!

\n

Episode reviews, pictures, news and every Starlane Seven link I can find, all on one page made by a fan for the fans.

\n
\n Sign My Guestbook\n Go to the Episode Guide\n
\n

Last updated: Sunday 14 March 1999. This page is not connected with the makers of the show.

\n
\n\n

Under construction: the season 3 pages are not finished yet!

\n\n
    \n
  • 027419 visitors since 2 June 1997
    • \n
  • 0312 names in the guestbook
    • \n
  • 0052 episodes reviewed
    • \n
\n\n
\n

Starlane News

\n \n

Older news...

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

Newest Pictures

\n
\n
\n \n

The Seven

\n

ship7.gif, 14 K

\n
\n
\n \n

Captain Vale

\n

vale2.jpg, 22 K

\n
\n
\n \n

Planet Oru

\n

oru.jpg, 31 K

\n
\n
\n \n

The Bridge

\n

bridge.jpg, 27 K

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

The Starlane Fans Web Ring

\n
\n

chronoskin is site 12 of 41 in the ring.

\n \n
\n
\n
\n

This Month's Poll

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

Episode Guide

\n

All 52 episodes, with my score out of ten for each.

\n
\n
\n Tell Me Your Favourite\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: REVIEWED my review is up SOON I am writing it NO TAPE I missed it NEW! added this month\n Scores are my own. Tell me where I am wrong\n
No.EpisodeFirst shownReviewScore
2.01Seven Lights Out The ship wakes with nobody at the helm.12 Sep 1998REVIEWED9
2.02The Salt Moon Imre finds a garden where none should grow.19 Sep 1998REVIEWED7
2.03The Long Dark Orbit NEW! Two days, one airlock and no answers.26 Sep 1998REVIEWED10
2.04A Signal from Oru Sunde answers a call sent forty years ago.03 Oct 1998SOON8
2.05Paper Stars The one with the school play. So I am told.10 Oct 1998NO TAPE0
Have you got \"Paper Stars\" on tape? Please write to me!
\n\n
    \n
  1. Season 2, 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

The Show

\n

What Starlane Seven is, and why I made this page.

\n
\n
\n Episode Guide\n
\n
\n
\n\n
\n
\n

Seven people, one very old ship

\n

If you have never seen it, start here!

\n

Starlane Seven is a serial about the crew of a cargo ship that should have been scrapped years ago. It is shown late on Saturdays, it has no laser fights at all, and it is the best thing on television.

\n

Why this page?

\n

Because in 1997 I could not find a single page about the show, so I made one. Everything on chronoskin is typed by hand in a text editor and saved as index.html. You will find here:

\n
    \n
  • a review of every episode I have on tape;
    • \n
  • pictures, all small files for slow modems;
    • \n
  • the news, when there is any.
    • \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

Write to me

\n

I read every letter. The quickest way to say hello is the guestbook.

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

Picture Gallery

\n

Click a picture to see it full size. Please be patient!

\n
\n
\n Send Me a Picture\n
\n
\n
\n\n
\n
\n \n

The Seven

\n

ship7.gif, 14 K

\n
\n
\n \n

Captain Vale

\n

vale2.jpg, 22 K

\n
\n
\n \n

Planet Oru

\n

oru.jpg, 31 K

\n
\n
\n \n

The Bridge

\n

bridge.jpg, 27 K

\n
\n
\n \n

Doctor Imre

\n

imre.jpg, 19 K

\n
\n
\n \n

The Salt Moon

\n

moon.jpg, 34 K

\n
\n
\n \n

Pilot Sunde

\n

sunde.jpg, 20 K

\n
\n
\n \n

A Script Page

\n

script.gif, 41 K

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

Season 3 Pictures

\n
\n

Nothing here yet!

\n

Season 3 has not been shown, so there are no pictures. If you have one, I would love to put it here with your name.

\n Send Me a Picture\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Cool Links

\n

Every one visited by me. Tell me if one is dead!

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

Other Fan Pages

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

Help for Your Own Page

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

Awards This Page Has Won

\n
\n
Stellar SiteFebruary 1999
\n
Fan Page of the WeekDeck Four
\n
Top 5% of Fan Pages1998
\n
Kid Safe Pageall ages
\n
\n

Want to give chronoskin an award? Write to me!

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

My Guestbook

\n

312 Starlaners have signed. You are next!

\n
\n
\n Back to the Front Page\n
\n
\n
\n\n
    \n
  • Mirela from a town by a lake, 11 Mar 99\n

    At last a page for us! Your review of 2.03 says everything I felt. Vale forever!

    • \n
  • Deck Four Dan found you through the web ring, 28 Feb 99\n

    Great page, I have linked you from mine. Your counter is beating my counter.

    • \n
  • T. Okoro just surfed in, 02 Feb 99\n

    Never seen the show but now I want to. When is it on? Found it, thanks.

    • \n
\n

Read all 312 entries...

\n\n
\n\n
\n

Sign the Guestbook

\n
\n

Please note: no tags in your message, and no spoilers for season 3!

\n

Oops! Your entry was not added. Please type a name and try again.

\n
\n
\n\n
\n \n
\n \n A name is needed, even a made-up one.\n
\n \n
\n \n (not shown on the page)\n
\n \n
\n \n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Delete your entry?

\n

Your entry of 11 March will be taken out of the guestbook. This cannot be undone!

\n
\n \n \n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.blog.s01.p02.t01.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-1214\",\n \"short\": \"v1-hp-1214\"\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: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 19px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.2;\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: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: -0.08em;\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" } }