{ "id": "v1-hp-2442", "long_id": "v1.home-pages-90s.landing.s02.p04.t04.u02", "name": "Personal home page: the family page, 1999", "era": { "slug": "home-pages-90s", "code": "hp", "name": "Personal home pages", "years": [ 1996, 2001 ], "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A family or hobby home page as built at home between 1996 and 2001: a framed sheet centred on a pastel gingham tile, the family's name in a large playful face, a striped bar of links, a welcome box and a two-column table of \"my pages\". Text is dark purple in a rounded hand-drawn face on pink and white, headings are hot pink and teal, links are default blue and underlined, and every box has a double border with a hard offset shadow. Counters, \"NEW!\" marks, awards, web rings and an e-mail form are its furniture; it was common on free hosts until page builders replaced it after 2001.", "url": "https://chrono.skin/s/v1-hp-2442", "preview_url": "https://chrono.skin/s/v1-hp-2442/specimen.html", "files": { "STYLE.md": "# Personal home page: the family page, 1999\n\n## Summary\n\nA family or hobby home page as built at home between 1996 and 2001: a framed sheet centred on a pastel gingham tile, the family's name in a large playful face, a striped bar of links, a welcome box and a two-column table of \"my pages\". Text is dark purple in a rounded hand-drawn face on pink and white, headings are hot pink and teal, links are default blue and underlined, and every box has a double border with a hard offset shadow. Counters, \"NEW!\" marks, awards, web rings and an e-mail form are its furniture; it was common on free hosts until page builders replaced it after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 640px. `.ds-page__frame` is a sheet in `--color-canvas` with a `--border-width-strong` border in `--color-border-strong` and `--shadow-panel`, centred with `--space-5` above and below, so the `--fill-page` tile shows 80px wide on each side of an 800px window.\n- The specimen is one example site, a family's home page, of five views. `.ds-nav` and `.ds-footer` are written once, inside the sheet and outside the views.\n- Home view: `.ds-nav` (`.ds-nav__top` with the `.ds-brand` at the left and the italic `.ds-nav__tagline` right-aligned beside it, then the `.ds-nav__links` bar across the sheet), then `.ds-page__main`: the centred `.ds-hero` welcome box, the `.ds-stat` row of three counters, and `.ds-page__columns`: a `.ds-page__column` (a `.ds-heading` over the two-column `.ds-grid` of pages, a heading over the bulleted `.ds-list` of news, a `.ds-panel`) and a `--size-side` (190px) `.ds-sidebar` of small boxes at the right, which ends near the foot of the main column.\n- Inner pages keep header and footer and drop the welcome box and counters. `.ds-page__inner` opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` (title and italic line at the left, a button at the right, a thick rule under) and, where the page has parts, the `.ds-tabs` row of keys. Below it the page is one full-width column (table and page numbers, awards and `.ds-page__pair` boxes, or notices and form); the page of running text keeps `.ds-page__columns` with the sidebar.\n- Views: `home`; `about` (running text, sidebar, link states); `recipes` (tabs, the recipe table with its badge key, page numbers, the empty state of a part with no recipes); `awards` (award badges, two web ring boxes, a bulleted list of rules); `mail` (notices, the form, the message box for leaving the mailing list).\n- Spacing: `--space-1` 3px strip and cell padding; `--space-2` 6px between grid cells, tabs and page numbers; `--space-3` 10px box padding, gaps between buttons and form rows; `--space-4` 14px between sidebar boxes, paragraph spacing; `--space-5` 20px sheet padding, the gap between blocks and columns; `--space-6` 32px list indent.\n- Fixed sizes: `--size-label` 140px, `--size-field` 230px, `--size-area` 330px, `--size-check` 16px, `--size-dialog` 360px, `--size-icon` 34px, `--size-award` 128px.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThe conventions for which text sits on which fill are those of the era's first layout: text, heading, link and status colours are legible on page, canvas, surfaces and the four fills; bars, the inverse, the accent and notices bring their own text colour; status colours as fills are lettered in `--color-canvas`. This layout adds one: the name stands on `--fill-bar`, so the brand and tagline use `--color-bar-text`.\n\n- `--font-body` and `--font-heading` are Arial: body 13px at line height 1.3, small print 11px, headings 14, 18 and 24px bold, the name 36px. `--font-ui` (MS Sans Serif, then Tahoma) at 11px sets toolbar keys, buttons, controls, table heads, tabs and badges. `--font-mono` Courier New sets versions, file sizes, numeric cells, news dates and the read-out. Links are always underlined.\n- `--color-page` silver `#c0c0c0`, `--color-canvas` `#d4d0c8` (the sheet and the sunken cells of the status bar), `--color-surface` white (boxes, table cells), `--color-surface-alt` `#e8e8e8` (alternate rows, the figures strip, the empty state), `--color-surface-strong` `#a8a8a8` (the ground of the toolbar and the status bar).\n- `--color-text` black; `--color-heading` navy `#000080` (titles, figures, program icons, h1 and h3); `--color-heading-alt` maroon `#800000` (section titles, lead lines, dates, form labels). Links `#0000ff`, visited `#800080`, hover red.\n- `--fill-bar` navy with white text is the banner, table heads, the current tab and the dialog title. `--fill-bar-alt` teal with white text is every title strip. `--fill-inverse` black with green text is the read-out in the hero. `--fill-accent` yellow with black text is the pressed toolbar key, the \"NEW!\" badge and the current page number. `--color-fill-1` to `-4` (pale blue, cream, pale green, pale lilac) are the icon tiles and the grid cells and carry body text.\n- The primary button and the toolbar keys are `--color-button` silver with black text; the secondary button is teal with white text.\n- `--color-success`, `--color-warning` and `--color-danger` double as fills: a status badge and the destructive button are filled with one of them and lettered in `--color-canvas`. `--color-notice` with `--color-notice-text` is notices and the two stripes of the construction strip; `--color-danger-surface` with `--color-danger` is the error notice.\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 and boxes, italic for taglines and lead lines, and the slow two-step `.ds-blink`, which only runs inside `prefers-reduced-motion: no-preference`.\n- Surface: `--border-style` `groove`, 2px for boxes, cells and rules, 3px for the sheet, the table, the page-header line and the program window. Buttons carry a hard 1px shadow, the sheet and the program window 2px; nothing is blurred. `--fill-bar` and `--fill-bar-alt` fade from the bar colour at the left to a lighter mix at the right; other fills are flat. `--fill-page` is a 4px dither of `--color-border-muted` over `--color-page`. Radius 0, no text shadow, no transitions.\n\n## Components\n\n- `.ds-page`: on ``; tile and body type. `.ds-page__frame` the sheet; `.ds-page__main`, `.ds-page__inner` stack blocks; `.ds-page__head`; `.ds-page__columns` with `.ds-page__column` and the sidebar; `.ds-page__pair` two equal boxes; `.ds-section` a heading with its block.\n- `.ds-nav`: `.ds-nav__top` (brand and `.ds-nav__tagline`) over `.ds-nav__links`, a bar in `--fill-bar` of `.ds-nav__item` / `.ds-nav__link` with a diamond between them; the current view's link takes `--fill-accent`.\n- `.ds-brand`: `.ds-brand__mark`, a tile dressed like the primary button, and `.ds-brand__name` at `--text-display` in `--color-heading`. Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the centred welcome box with `--shadow-dialog`: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action`, `.ds-hero__hint`.\n- `.ds-page-header`: `.ds-page-header__text` (`.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__action`, closed by a thick rule.\n- `.ds-heading`: a left-aligned section title with a thick underline.\n- `.ds-rule`, `.ds-rule--short`, `.ds-rule--rainbow`: the carved rule and the six-step colour bar that opens the footer.\n- `.ds-construction` with `.ds-construction__text`: the striped strip. `.ds-blink`: the slow blink for one small mark.\n- `.ds-prose`: running text (`h1` to `h3`, `p`, lists, `strong`, `code`), `.ds-prose__lead`, `.ds-prose__code`.\n- `.ds-link`: states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet`, `.ds-link--strong`, `.ds-link--plain`; `.ds-links`; `.ds-icon`.\n- `.ds-bullets`: a list with coloured diamonds, `.ds-bullets__item`, `.ds-bullets__text`.\n- `.ds-button`: `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`; `.ds-buttons`.\n- `.ds-form`: `.ds-form__label`, `.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`: collapsed cells, each with a double border: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num`, `--group` on `--color-fill-4`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the row; three `.ds-stat__item` cells, each a `.ds-stat__value` (six digits on `--fill-inverse`) over a `.ds-stat__label`.\n- `.ds-list`: news with round coloured bullets: `.ds-list__item`, `.ds-list__body`, `.ds-list__meta` (the date in brackets), `.ds-list__more`; `.ds-list__title` a bold coloured name.\n- `.ds-panel`: `.ds-panel__title` strip, `.ds-panel__body`, `.ds-panel__text`, `.ds-panel__form`. `.ds-ring` / `.ds-ring__item`: the web ring line.\n- `.ds-grid`: the two-column table of pages on `--color-surface-strong`: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a `.ds-grid__icon`, `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-tabs`: a row of bevelled keys, `.ds-tabs__item` / `.ds-tabs__tab`; `is-current` is pressed in and takes `--fill-bar-alt`.\n- `.ds-badge`: `.ds-badge--text`, `.ds-badge--count`, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`; `.ds-badges` the key line.\n- `.ds-awards`, `.ds-award` (`.ds-award__star`, `.ds-award__title`, `.ds-award__text`): awards as badges.\n- `.ds-sidebar`: `.ds-sidebar__block` boxes with a `.ds-sidebar__title` strip and a `.ds-sidebar__body` or a `.ds-sidebar__list` of `.ds-sidebar__item`.\n- `.ds-notice`: `.ds-notice__label`, `.ds-notice--error`; `.ds-notices`.\n- `.ds-pagination`: small outlined squares: `.ds-pagination__label`, `.ds-pagination__link` (`is-current`, `is-disabled`).\n- `.ds-breadcrumb`: `.ds-breadcrumb__item`, the last `is-current`.\n- `.ds-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`, in the page flow.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button.\n- `.ds-footer`: rainbow bar, bracketed `.ds-footer__links` / `.ds-footer__item`, `.ds-footer__mail`, `.ds-footer__note`, `.ds-footer__legal`.\n- `.ds-view`: one screen; `.ds-view--home` shows by default.\n\n## Never\n\n- `content-width <= 640px`: everything is inside the 640px sheet.\n- `font-size <= 36px`: 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`: Arial, the system face of the keys and Courier.\n- `uppercase-text <= 0%`: capitals are typed, never transformed.\n- `border-radius <= 0px`: boxes are square; only the round bullets are shapes.\n- `box-shadow-blur <= 0px`: shadows are hard offsets, never soft.\n- `text-shadow = none`: text is flat.\n- `border-width <= 5px`: the thickest border is the 5px double line.\n- `transition = none`: nothing eases.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block in the main column is a `.ds-heading` over a bordered box; a new small box goes in the `.ds-sidebar`; a new page link is a `.ds-grid__cell`. Keep the sheet framed on the tile, the text dark on pastel, links blue and underlined, borders double with hard shadows, and never add radius, blur, transitions or grey.\n", "components.css": "/* Layout tokens (structure part). A family page of 1999: a 640px sheet with\n a thick frame, centred on the tiled page of an 800px window; a welcome box,\n then a main column and a 190px column of small boxes at the right. */\n:root {\n --size-page: 640px;\n --size-side: 190px;\n --size-label: 140px;\n --size-field: 230px;\n --size-area: 330px;\n --size-check: 16px;\n --size-dialog: 360px;\n --size-icon: 34px;\n --size-award: 128px;\n --size-date: 60px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 14px;\n --space-5: 20px;\n --space-6: 32px;\n}\n\n/* ---------- shell: a framed sheet on the tile ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 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) var(--space-5) var(--space-5);\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\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-2);\n}\n/* Main column and the column of small 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.ds-page__column {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\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: a coloured line with a short thick underline. */\n.ds-heading {\n margin: 0;\n padding: 0 0 var(--space-1);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-align: left;\n}\n\n/* ---------- nav: name at the left, greeting at the right, a bar of links under ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--text-display);\n height: var(--text-display);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n 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 min-width: 0;\n color: var(--color-heading-alt);\n font-size: var(--text-base);\n font-style: italic;\n text-align: right;\n}\n/* One bar across the sheet, the links apart, a diamond between them. */\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n}\n.ds-nav__item + .ds-nav__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n margin: 0 var(--space-2);\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-nav__link {\n padding: var(--space-1) var(--space-2);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\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 page that is showing: the accent fill, no underline. One selector for\n each view, and the home link when the address names no view. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"],\n.ds-page:has(#recipes:target) .ds-nav__link[href=\"#recipes\"],\n.ds-page:has(#awards:target) .ds-nav__link[href=\"#awards\"],\n.ds-page:has(#mail:target) .ds-nav__link[href=\"#mail\"] {\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-5);\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-2) 0 var(--space-3);\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: title and a line, the action at the right, a thick rule under ---------- */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\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: 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: every cell outlined ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: var(--space-1) var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-1) var(--space-2);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: left;\n vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: right;\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n background: var(--color-fill-4);\n text-align: center;\n}\n.ds-table__desc {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-3) 0 0;\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* ---------- stats: three counters in one outlined row ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-2);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__value {\n display: block;\n padding: 0 var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n letter-spacing: var(--space-1);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n}\n\n/* ---------- list: news with coloured bullets and a date ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\n}\n.ds-list__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-list__item::before {\n content: \"\";\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-accent);\n border-radius: 50%;\n}\n.ds-list__item:nth-child(even)::before {\n background: var(--color-heading-alt);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- panel: an outlined box with a title strip ---------- */\n.ds-panel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__text:last-child {\n margin: 0;\n}\n.ds-panel__form {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n/* The web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-ring__item + .ds-ring__item::before {\n content: \"|\";\n padding: 0 var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: a two-column table of \"my pages\" ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-2);\n padding: var(--space-2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-3);\n align-items: center;\n min-width: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-text);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n grid-row: span 2;\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n color: var(--color-heading);\n}\n.ds-grid__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-grid__title {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: a row of keys, the current one pressed in ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) 0 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n padding: var(--space-1) var(--space-3);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) outset var(--color-button-secondary);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: underline;\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) inset var(--color-bar-alt);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- sidebar: small boxes down the right ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\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 text-align: center;\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-shadow: var(--shadow-text);\n}\n.ds-sidebar__body {\n margin: 0;\n padding: var(--space-2);\n font-size: var(--text-small);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n list-style: square;\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-sidebar__item {\n padding: 0 0 var(--space-1);\n}\n.ds-sidebar__item::marker {\n color: var(--color-accent);\n}\n\n/* ---------- pagination: small outlined squares ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__label {\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-2);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"::\";\n padding: 0 var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5) 0 0;\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: var(--space-2) 0 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__item::before {\n content: \"[ \";\n color: var(--color-text-muted);\n}\n.ds-footer__item::after {\n content: \" ]\";\n padding: 0 var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-footer__mail {\n margin: 0;\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__input--short {\n width: calc(var(--size-field) / 2);\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 family home page, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n Our family's little corner of the Web: two people, three cats and one busy kitchen!\n
\n \n
\n\n
\n
\n\n
\n

Welcome to Our Home Page!

\n

Come in, wipe your feet and stay a while. The kettle is on and the cats are (mostly) friendly.

\n
\n Open the Recipe Box\n Drop us a line\n
\n

This page was last updated on 9 May 1999. UPDATED

\n
\n\n
    \n
  • 008214 visitors since August 1997
    • \n
  • 000064 recipes in the box
    • \n
  • 000003 cats on the sofa
    • \n
\n\n
\n
\n\n
\n

Our Pages

\n
\n
\n \n

Recipe Box

\n

64 recipes, all tried.

\n
\n
\n \n

Meet the Cats

\n

Biscuit, Mop and Sir Purr.

\n
\n
\n \n

Our Garden

\n

Beans, roses and slugs.

\n
\n
\n \n

Holiday Snaps

\n

The seaside, 1998.

\n
\n
\n \n

Our Awards

\n

Four so far!

\n
\n
\n \n

E-mail Us

\n

We always write back.

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

What's New

\n \n

Older news...

\n
\n\n
\n

The chronoskin Kitchen Letter

\n
\n

One new recipe by e-mail on the first of every month. Free, of course!

\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

About Us

\n

Two people, three cats and a garden full of beans.

\n
\n
\n Say Hello\n
\n
\n
\n\n
\n
\n

Hello from all of us!

\n

We made this page ourselves, one evening at a time.

\n

We are Jo and Sam. We started chronoskin in August 1997 to share Nan's recipes with the cousins, and it grew. Every page is typed by hand and the front page is a file called index.html, which still feels like magic.

\n

The cats

\n

There are three, and they run the house:

\n
    \n
  • Biscuit, who is ginger and sleeps on the monitor;
    • \n
  • Mop, who is mostly fur;
    • \n
  • Sir Purr, pet of the month eleven times.
    • \n
\n

Finding your way

\n

Links on our pages are underlined, and their colour tells you where you have been.

\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 us

\n

We answer every letter. Use the e-mail page and tell us what you baked.

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

The Recipe Box

\n

Every one cooked in our kitchen, most of them twice.

\n
\n
\n Send Us a Recipe\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: EASY a child could do it FIDDLY read it twice HOT! mind your fingers NEW! added this month\n Spoons are level and ovens are in degrees C. Tell us how yours turned out\n
RecipeHow hardServesMinutes
Nan's Lemon Drizzle Cake NEW! Sharp, sticky and gone by teatime.EASY855
Cheese Scones The ones from the village fair.EASY1225
Plaited Loaf Three strands, or six if you are brave.FIDDLY10140
Treacle Toffee For bonfire night. Keep the cats out.HOT!2040
Sam's Bean Flan What to do with too many beans.EASY670
Got a better scone? Send us the recipe and we will try it.
\n\n
    \n
  1. Cakes and Bakes, page
    2. \n
  2. < Back
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. More >
    7. \n
\n\n
\n

Soups

\n
\n

The soup pot is empty!

\n

We have not typed up a single soup yet. If you have a good one, it could be the first.

\n Send Us a Soup\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Awards and Web Rings

\n

Kind people have given our page these. Thank you all!

\n
\n
\n Win Our Award\n
\n
\n
\n\n
\n
Golden Spoonfor family recipes, 1998
\n
Purr-fect PageCat Lovers' Corner
\n
Family Friendlysafe for all ages
\n
Cosy Site of the WeekMarch 1999
\n
\n\n
\n\n
\n
\n

The Home Cooks Ring

\n
\n

chronoskin is kitchen 27 of 113 in this ring of pages by people who cook at home.

\n \n
\n
\n
\n

The Ring of Happy Cats

\n
\n

Sir Purr signed us up. We are sofa 8 of 52, and proud of it.

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

Win the chronoskin Cosy Page Award

\n
    \n
  • Your page must be made by you, at home.
    • \n
  • It must be safe for the whole family.
    • \n
  • It helps if there is a cat on it. Send us your address
    • \n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

E-mail Us

\n

Recipes, cat pictures and kind words all welcome.

\n
\n
\n Back to the Front Page\n
\n
\n
\n\n
\n

Please note: we read our mail on Sundays, so be patient with us.

\n

Oh dear! Your letter was not sent. Please fill in your name and try again.

\n
\n\n
\n \n
\n \n We need a name to write back to.\n
\n \n
\n \n (we never pass it on)\n
\n \n
\n \n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Leave the Kitchen Letter?

\n

You will get no more recipes by e-mail. We will miss you, and so will the cats!

\n
\n \n \n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.landing.s02.p04.t04.u02\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-2442\",\n \"short\": \"v1-hp-2442\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #c0c0c0;\n --color-canvas: #d4d0c8;\n --color-surface: #ffffff;\n --color-surface-alt: #e8e8e8;\n --color-surface-strong: #a8a8a8;\n --color-bar: #000080;\n --color-bar-text: #ffffff;\n --color-bar-alt: #008080;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #000000;\n --color-inverse-text: #00ff00;\n --color-text: #000000;\n --color-text-muted: #404040;\n --color-heading: #000080;\n --color-heading-alt: #800000;\n --color-link: #0000ff;\n --color-link-quiet: #004080;\n --color-link-visited: #800080;\n --color-link-hover: #ff0000;\n --color-link-active: #800000;\n --color-border: #808080;\n --color-border-strong: #000000;\n --color-border-muted: #b0b0b0;\n --color-accent: #ffff00;\n --color-accent-text: #000000;\n --color-accent-alt: #008080;\n --color-fill-1: #dfe8f8;\n --color-fill-2: #f8f0d0;\n --color-fill-3: #d8ecd8;\n --color-fill-4: #ecd8ec;\n --color-button: #c0c0c0;\n --color-button-text: #000000;\n --color-button-hover-text: #0000ff;\n --color-button-secondary: #008080;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808080;\n --color-disabled: #b0b0b0;\n --color-disabled-text: #707070;\n --color-danger: #cc0000;\n --color-danger-surface: #ffe0e0;\n --color-success: #006400;\n --color-warning: #a05000;\n --color-notice: #ffffe1;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #404040;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: \"MS Sans Serif\", Tahoma, Geneva, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 16px;\n --text-display: 36px;\n --text-h1: 24px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.3;\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: 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: 3px;\n --border-width-strong: 5px;\n --border-style: double;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 4px 4px 0 var(--color-shadow);\n --shadow-control: 2px 2px 0 var(--color-shadow);\n --shadow-control-hover: 3px 3px 0 var(--color-shadow);\n --shadow-control-pressed: 0 0 0 var(--color-shadow);\n --shadow-dialog: 6px 6px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: linear-gradient(90deg, color-mix(in srgb, var(--color-surface-alt) 50%, transparent) 50%, transparent 50%) 0 0 / 32px 32px, linear-gradient(color-mix(in srgb, var(--color-surface-alt) 50%, transparent) 50%, transparent 50%) 0 0 / 32px 32px, var(--color-page);\n --fill-bar: repeating-linear-gradient(45deg, var(--color-bar) 0 8px, color-mix(in srgb, var(--color-bar) 86%, white) 8px 16px);\n --fill-bar-alt: repeating-linear-gradient(-45deg, var(--color-bar-alt) 0 8px, color-mix(in srgb, var(--color-bar-alt) 86%, white) 8px 16px);\n --fill-inverse: repeating-linear-gradient(90deg, var(--color-inverse) 0 6px, color-mix(in srgb, var(--color-inverse) 88%, black) 6px 12px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(color-mix(in srgb, var(--color-button) 60%, white) 0 50%, var(--color-button) 50%);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 60%, white) 0 50%, var(--color-button-secondary) 50%);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }