{ "id": "v1-hp-2312", "long_id": "v1.home-pages-90s.landing.s02.p03.t01.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-2312", "preview_url": "https://chrono.skin/s/v1-hp-2312/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\nThese are the conventions of the whole era; every layout and token set of it follows them.\n\n- The page and the sheet are of one lightness: `--color-page` and `--color-canvas` are both dark or both light, and `--fill-page` is a quiet tile built from palette tokens. `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt`, every link colour, `--color-accent-alt`, `--color-danger`, `--color-success` and `--color-warning` are legible on the page, the canvas, all three surfaces and all four `--color-fill-*` blocks, at 2:1 or better.\n- Fills that bring their own text: `--fill-bar` with `--color-bar-text` (the table of sections, table heads, the dialog title), `--fill-bar-alt` with `--color-bar-alt-text` (panel and sidebar title strips), `--fill-inverse` with `--color-inverse-text` (counter digits, awards, the current tab), `--fill-accent` with `--color-accent-text` (the current section, the \"NEW!\" badge, the current page number), `--color-notice` with `--color-notice-text` (notices and the two stripes of the construction strip), `--color-danger-surface` with `--color-danger`. A link on one of these takes the fill's text colour (`.ds-link--plain`).\n- Status colours double as fills: a status badge and the destructive button are filled with `--color-success`, `--color-warning` or `--color-danger` and lettered in `--color-canvas`.\n- `--color-surface-strong` is the ground that shows between the cells of a table; `--color-surface-alt` is alternate rows, inline code and the empty state.\n- Headings are coloured: `--color-heading` (yellow here) for the name, page titles, h1 and h3; `--color-heading-alt` (lime) for section titles, h2, taglines, dates and form labels. `--color-accent-alt` (magenta) is the italic \"Updated!\" word, bullets and list markers.\n- The rainbow bar is six hard steps: `--color-danger`, `--color-warning`, `--color-heading`, `--color-success`, `--color-link`, `--color-link-visited`.\n- Type here: `--font-body` and `--font-heading` are Times New Roman at 16px, the unchanged browser default; headings 19, 24 and 32px bold, the name 48px. `--font-ui` Arial 13px sets buttons, controls, table heads, the section cells and badges; `--font-mono` Courier New sets counter digits, news dates and the textarea. Links are always underlined. Italic is written literally for taglines, lead lines and the footer note.\n- Surface here: `--border-style` `ridge`, 4px for boxes and 6px (`--border-width-strong`) for the section table, the welcome box, tables, panels, pictures, awards and the dialog. No shadows, no radius, flat fills, no transitions. `--fill-page` is a starfield of 1px dots in the text, heading and link colours over `--color-page`.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile and form controls (drawn in the control's own colour), `dotted` rules inside lists, the 45 degree turn of a bullet, and the slow two-step `.ds-blink`, which only runs inside `prefers-reduced-motion: no-preference`.\n\n## Components\n\n- `.ds-page`: on ``; 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 <= 48px`: the name is the largest text.\n- `font-size >= 13px`: small print is 13px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Times, Arial and Courier.\n- `uppercase-text <= 0%`: capitals are typed, never transformed.\n- `border-radius <= 0px`: 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.p03.t01.u02\",\n \"library\": \"2026.10.09-1346\",\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-2312\",\n \"short\": \"v1-hp-2312\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #00004d;\n --color-canvas: #000033;\n --color-surface: #000066;\n --color-surface-alt: #1a1a80;\n --color-surface-strong: #33338f;\n --color-bar: #ff6600;\n --color-bar-text: #000033;\n --color-bar-alt: #800000;\n --color-bar-alt-text: #ffcc66;\n --color-inverse: #ffffff;\n --color-inverse-text: #000066;\n --color-text: #ffffff;\n --color-text-muted: #b3b3d9;\n --color-heading: #ff9933;\n --color-heading-alt: #ffcc00;\n --color-link: #66ccff;\n --color-link-quiet: #ffcc99;\n --color-link-visited: #cc99ff;\n --color-link-hover: #ffff00;\n --color-link-active: #ff3300;\n --color-border: #9999cc;\n --color-border-strong: #ff6600;\n --color-border-muted: #333380;\n --color-accent: #ffcc00;\n --color-accent-text: #000033;\n --color-accent-alt: #00ffcc;\n --color-fill-1: #800000;\n --color-fill-2: #804000;\n --color-fill-3: #005c5c;\n --color-fill-4: #4d004d;\n --color-button: #cc3300;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffff00;\n --color-button-secondary: #333399;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000033;\n --color-input-border: #9999cc;\n --color-disabled: #333366;\n --color-disabled-text: #8c8cb3;\n --color-danger: #ff5050;\n --color-danger-surface: #4d0000;\n --color-success: #33ff66;\n --color-warning: #ffaa00;\n --color-notice: #ffe0b3;\n --color-notice-text: #000033;\n --color-focus: #ffff00;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 51, 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 19px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.2;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: -0.08em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 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" } }