{ "id": "v1-hp-1871", "long_id": "v1.home-pages-90s.blog.s01.p08.t07.u01", "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-1871", "preview_url": "https://chrono.skin/s/v1-hp-1871/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\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 surfaces and the four `--color-fill-*` blocks. Fills that bring their own text: `--fill-bar` with `--color-bar-text` (the menu bar, table heads, the dialog title), `--fill-bar-alt` with `--color-bar-alt-text` (panel and sidebar title strips, the hovered menu cell), `--fill-inverse` with `--color-inverse-text` (the day block, the current tab, counter digits), `--fill-accent` with `--color-accent-text` (the current menu cell, \"NEW!\", the current page number, the hovered drop-down line, the blocks of a progress bar, the current carousel square), `--color-notice` with `--color-notice-text` (notices, tooltips, the construction strip), `--color-danger-surface` with `--color-danger`.\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-strong` is the ground between the figures of the strip, the track of a progress bar and the idle carousel squares; `--color-surface-alt` is alternate rows, idle tabs, inline code, the picture well of a print, the carousel's foot and the empty state.\n- Headings: `--color-heading` (mint here) for the name, the poster title, page titles, h1, h3, figures and the place of the next date; `--color-heading-alt` (pink) for section titles, h2, taglines, dates, form labels, tooltip triggers and percentages. `--color-accent-alt` (yellow) marks bullets, list markers, the path separator and the italic \"Updated!\" word.\n- Type here: `--font-body` and `--font-ui` are Helvetica at 13px and 11px, `--font-heading` is Copperplate (a commercial face of the period; the stack falls back to Helvetica) set in capitals with 1px tracking at 15, 19 and 27px and the name at 40px with 2px. `--font-mono` Lucida Console sets dates, figures, percentages and the textarea. Buttons, menu cells, tabs and table heads are bold 11px capitals. Links are underlined and lose the line under the pointer; menu, tab and page-number links carry none.\n- Surface here: `--border-style` `solid`, 2px for boxes and 4px (`--border-width-strong`) for the menu bar, the poster, panels, tables, the carousel, the dialog and the lines under headings. `--shadow-panel` is a hard black line inside the frame, `--shadow-text` a hard 2px black drop under capitals on the tile and on bars. No radius, no soft shadow, no transitions. `--fill-page` is a harlequin of 44px diamonds; bars are brightest in the middle.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile, form controls, the picture well and the progress track; `dotted` lines between rows; the dotted underline of a tooltip trigger; the percentage widths of `.ds-progress__bar--NN`; `calc()` over `--size-icon` for the carousel drawing.\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 <= 40px`: the name is the largest text.\n- `font-size >= 11px`: small print is 11px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Helvetica, the engraved face of the headings and one monospace.\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 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.p08.t07.u01\",\n \"library\": \"2026.10.09-1346\",\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-1871\",\n \"short\": \"v1-hp-1871\"\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: Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-heading: \"Copperplate Gothic Bold\", Copperplate, \"Copperplate Gothic Light\", Helvetica, sans-serif;\n --font-ui: Helvetica, Arial, \"Liberation Sans\", sans-serif;\n --font-mono: \"Lucida Console\", \"Lucida Sans Typewriter\", \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 15px;\n --text-display: 40px;\n --text-h1: 27px;\n --text-h2: 19px;\n --text-h3: 15px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 2px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\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" } }