{ "id": "v1-te-5bb2-dr", "long_id": "v1.table-era-90s.blog.s05.p11.t11.u02.dr", "name": "Table-era personal home page, 1998", "era": { "slug": "table-era-90s", "code": "te", "name": "Table-era web", "years": [ 1996, 2000 ], "description": "The first commercial web, 1996 to 2000: narrow fixed pages built from tables, blue underlined links on white or grey, Times and Arial at their default sizes, bevelled form buttons, and flat colour strips where a designer wanted emphasis." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "density": "roomy", "summary": "A personal home page as people built them by hand between 1996 and 2000: one centred column on the grey page a browser showed when nobody set a colour, with a large serif name at the top, a row of bracketed links under it and horizontal rules between every section. Text is 16px Times with large bold Times headings and 10px sans-serif small print; links are the default blue, underlined, and purple once visited; boxes and rules are carved 2px grooves, bars are white or pale yellow strips, and hit counters show white digits on navy. It was the look of home pages on free hosting, of hobby and club pages and of student pages until page builders and stylesheets replaced it after 2000.", "url": "https://chrono.skin/s/v1-te-5bb2-dr", "preview_url": "https://chrono.skin/s/v1-te-5bb2-dr/specimen.html", "files": { "STYLE.md": "# Table-era personal home page, 1998\n\n## Summary\n\nA personal home page as people built them by hand between 1996 and 2000: one centred column on the grey page a browser showed when nobody set a colour, with a large serif name at the top, a row of bracketed links under it and horizontal rules between every section. Text is 16px Times with large bold Times headings and 10px sans-serif small print; links are the default blue, underlined, and purple once visited; boxes and rules are carved 2px grooves, bars are white or pale yellow strips, and hit counters show white digits on navy. It was the look of home pages on free hosting, of hobby and club pages and of student pages until page builders and stylesheets replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid: `--size-page` is 580px, centred by `.ds-page__frame` with a `--space-3` (8px) margin above and `--space-5` (16px) at the sides and foot inside it. Nothing is wider than 580px and nothing stretches with the window.\n- There is one column and one axis. The header, the welcome box, section titles, counters, the picture links, boxes, notices and the footer are centred on it; bulleted lists, tables, forms and running text are left-aligned inside it. There is no navigation bar, no rail and no sidebar on the home page.\n- The specimen is one example site, a personal home page, of four views. `.ds-nav` and `.ds-footer` are written once, outside the views; each view is a `.ds-view` section and one shows at a time.\n- Order from the top on the home view: `.ds-nav` (the `.ds-brand` centred, an italic tagline under it, a heavy `.ds-rule--strong`, one centred row of bracketed links, a `.ds-rule`), then `.ds-page__main`: the `.ds-hero` welcome box, the `.ds-stat` row of counters, and then section after section, each a centred `.ds-heading` over its block and divided from the next by a `.ds-rule--short` (half the column wide): the `.ds-list` of dated news, the `.ds-grid` row of four picture links, a `.ds-panel`. The `.ds-footer` opens with another `.ds-rule--strong` and repeats the links, small.\n- Inner pages (about, a links page, the guestbook) keep the `.ds-nav` and the `.ds-footer` and drop the welcome box and counters. `.ds-page__inner` opens with `.ds-page__head`, which stacks the small `.ds-breadcrumb`, the `.ds-page-header` (title and one italic line at the left, one button at the right, closed by its own `--border-width` rule) and, when the page has parts of its own, the `.ds-tabs` line. Below that the page stays one full-width column: the `.ds-table` with its `.ds-pagination`, or a list of entries, or the `.ds-notices` and the `.ds-form`, with a `.ds-rule--short` between unrelated blocks. Only a page of running text uses `.ds-page__columns`: the `.ds-prose` at the left and a `--size-side` (170px) `.ds-sidebar` at the right behind a vertical rule, after a `--space-5` gutter.\n- Views: `home` is the front page (welcome box, counters, news, picture links, the web ring box). `about` is the page of running text about the owner, with the fact file and link lists in the sidebar and the line that shows the link states. `links` is one page of the link collection: its parts as tabs, the table of pages with its status key, the page numbers, and the empty state of a part that has no links yet. `guestbook` is the entries, then the notices, the form to sign, and the message box that deleting an entry opens. The current view's link in `.ds-nav__links` is bold, in the text colour and not underlined; the home link is marked when the address names no view.\n- Blocks are separated by rules and outlines, never by cards with shadows or wide gutters.\n- Spacing scale: `--space-1` 2px is the padding of strips and controls; `--space-2` 4px is cell padding, the gap between a title and its body and between list items; `--space-3` 8px is the page margin above, the space round a rule, box padding and the gap between buttons, form rows and picture links; `--space-4` 12px is the gap between neighbouring blocks, paragraph spacing and the padding of the welcome box; `--space-5` 16px is the side margin of the sheet and the gutter beside the sidebar; `--space-6` 40px is the list indent, the gap between counters and the width of a short input.\n- Fixed sizes: `--size-side` 170px sidebar, `--size-label` 130px form label column, `--size-field` 220px text input, `--size-area` 300px textarea, `--size-check` 13px checkbox, `--size-dialog` 340px message box, `--size-icon` 36px drawing over a picture link.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-heading` is Arial Black, the face the bookshop sets its section labels in, falling back to Arial; it is used at `--weight-heading` and `--weight-display` 900, its only weight. `--font-body` and `--font-ui` are Arial, Helvetica. `--font-mono` is Lucida Console, falling back to Monaco and Courier New.\n- `--text-base` and `--text-ui` 13px; `--text-small` 11px; `--text-h3` 13px, `--text-h2` and `--text-large` 16px, `--text-h1` 18px, `--text-display` 26px for the brand name only. Headings are heavy, not large.\n- `--weight-bold` is 700 and so is `--weight-ui`: button and tab labels are bold. Line height is set like a printed catalogue, `--line-body` 1.3 and `--line-heading` 1.15; no transform, no tracking. All three link decorations are `underline`.\n\n- Family: the 1999 bookshop front, a khaki ground with a white sheet on it, pale yellow boxes, dark green and maroon, with the purple of the 1998 university page for visited links. It is the only set of this era whose page is not the colour of its content: `--color-page` is khaki `#cccc99` and `--color-canvas` white `#ffffff`, so the centred page stands in the window as a white sheet with khaki at both sides.\n- `--color-surface` is white; `--color-surface-alt` `#ffffcc` (pale yellow) is alternate rows, quiet strips and the empty state; `--color-surface-strong` is the khaki.\n- `--color-bar` `#cccc99` (khaki, black text, blue links) is the search band, the table head, panel titles and the header and footer rules. `--color-bar-alt` `#ffffcc` (pale yellow, black text) is every other title strip and the notice border.\n- `--color-inverse` `#003300` (dark green, white text) is the dialog title bar or a top bar. The same green is `--color-heading-alt` (the brand name, h3, positive figures), `--color-accent` (the solid badge, white text), `--color-border-strong`, `--color-success` and `--color-focus`.\n- Headings are maroon: `--color-heading` `#990000`. Text is black; `--color-text-muted` `#686868`.\n- Links are `--color-link` `#003399`, always underlined; visited `#680060`; active `#aa0000`; hover equals the link colour.\n- `--color-accent-alt` `#aa0000` is the \"New!\" word, prices and negative figures; `--color-danger` is the same red, as text on white and as a fill under white text.\n- `--color-fill-1` to `--color-fill-4` are `#ffffcc`, `#cccc99`, `#cc9900` (the gold of the shop's section labels), `#ffffff`. They carry black text and blue links.\n- `--color-warning` `#cc9900` is a fill only and carries black text. Notices sit on pale yellow; the error notice is red on white.\n- Borders: `--color-border` `#989898`, `--color-border-muted` `#c0c0c0` for row rules and bevels, `--color-input-border` `#c0c0c0`. Buttons are the grey of the operating system, `#efefef` and `#c0c0c0`.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; page fill and body type. `.ds-page__frame` is the centred 580px column with its margin inside it: when a palette gives `--color-canvas` a colour of its own the frame shows as a sheet on the page. It takes `--shadow-panel`, so a surface set that outlines its boxes also outlines the sheet. `.ds-page__main` is the home column and `.ds-page__inner` the inner-page column, both with `--space-4` between blocks; `.ds-page__head` stacks path, page header and tabs; `.ds-page__columns` is the text-plus-sidebar grid of a page of running text.\n- `.ds-nav`: the header, centred. `.ds-nav__top` holds the `.ds-brand` and under it the italic `.ds-nav__tagline`; `.ds-nav__links` is one centred row of `.ds-nav__item` / `.ds-nav__link`, each item set in square brackets; the link of the view that is showing is bold, in the text colour and not underlined (`components.css` has one selector per view for this, and `is-current` does the same by hand). The row is repeated, small, in the footer. A link to a section that has no view of its own carries `.ds-nav__link--elsewhere`: it opens the nearest fitting view and is never marked as the view that is showing.\n- `.ds-brand`: the site's mark and name, centred at the top. `.ds-brand__mark` is a small square tile dressed like the button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the `outset` bevel in `--color-border-muted`, `--radius-control`, `--shadow-control`), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`, drawn with square line caps and a 2.8 unit stroke. `.ds-brand__name` is the name in the heading family at `--text-display` and `--weight-display`, in `--color-heading-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the welcome box, the era's page introduction: a box in `--fill-bar` inside a `--border-width` groove, holding the centred `.ds-hero__title` (32px bold), `.ds-hero__lead` (two lines at most), `.ds-hero__action` (one button and a line of text links) and `.ds-hero__hint` (the 10px \"last changed\" line). Never a full-width banner and never taller than its text.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__text` holds `.ds-page-header__title` (32px bold) and `.ds-page-header__lead` (one italic line); `.ds-page-header__action` holds one button, bottom-aligned at the right. A `--border-width` rule closes it.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 19px italic lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is a small sans-serif link, `.ds-link--strong` a bold one. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled key with an 11px bold sans-serif label, on a `\n \n \n \n \n\n \n \n\n
\n
\n\n
\n \n
\n
\n

About Me

\n

Who keeps this page, and what is in the shed.

\n
\n
\n Sign My Guestbook\n
\n
\n
\n\n
\n
\n

Hello!

\n

I teach mathematics by day and look at the sky by night.

\n

I have kept this page since March 1997. It began as one screen of text and a picture of the Moon, and it has grown a room at a time. Everything here is written by hand in a text editor and saved as index.html.

\n

The observatory

\n

The observatory is a garden shed whose roof rolls back on four wheels from a lawn mower. Inside are:

\n
    \n
  • a six-inch reflector on a wooden mount;
    • \n
  • a red torch and a folding chair;
    • \n
  • a tin of biscuits for cold nights.
    • \n
\n

Reading the links

\n

Links on chronoskin 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 me

\n

I answer every letter, though not always the same week. The quickest way to say hello is the guestbook.

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

My Links

\n

Every page here has been visited by me, more than once.

\n
\n
\n Suggest a Link\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: OK working when last tried MOVED has a new address GONE no answer NEW added this month\n I try every link on the first Sunday of the month. Tell me about a broken one\n
PageStateAddedClicks
The Sky This Week Rising and setting times for any town.OKMar 1997412
A Beginner's Map of the Moon Forty craters you can find with binoculars.OKNov 1997388
Comet Watch NEW Where to point tonight, with charts.OKJun 199936
The Variable Star Notebook One observer, eleven years of estimates.MOVEDFeb 1998151
Meteor Counts by Post Send in your tally after each shower.GONEAug 199897
Know a page that belongs here? Suggest it in the guestbook
\n\n
    \n
  1. More links:
    2. \n
  2. [<< Back]
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. [More >>]
    8. \n
\n\n
\n\n
\n

Friends' Pages

\n
\n

No friends' pages yet.

\n

If you keep a home page about the sky, sign the guestbook with its address and I will list it here.

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

Guestbook

\n

Forty-seven visitors have signed since 1997. Be the next!

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

Read all 47 entries...

\n\n
\n\n
\n

Sign the Book

\n
\n

Please note: tags are taken out of entries, and I read each one before it appears.

\n

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

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

Delete your entry?

\n

Your entry of June 11 will be taken out of the book. This cannot be undone.

\n
\n \n \n
\n
\n\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.blog.s05.p11.t11.u02.dr\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"table-era-90s\",\n \"years\": [\n 1996,\n 2000\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-te-5bb2-dr\",\n \"short\": \"v1-te-5bb2-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #cccc99;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #ffffcc;\n --color-surface-strong: #cccc99;\n --color-bar: #cccc99;\n --color-bar-text: #000000;\n --color-bar-alt: #ffffcc;\n --color-bar-alt-text: #000000;\n --color-inverse: #003300;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #686868;\n --color-heading: #990000;\n --color-heading-alt: #003300;\n --color-link: #003399;\n --color-link-quiet: #003399;\n --color-link-visited: #680060;\n --color-link-hover: #003399;\n --color-link-active: #aa0000;\n --color-border: #989898;\n --color-border-strong: #003300;\n --color-border-muted: #c0c0c0;\n --color-accent: #003300;\n --color-accent-text: #ffffff;\n --color-accent-alt: #aa0000;\n --color-fill-1: #ffffcc;\n --color-fill-2: #cccc99;\n --color-fill-3: #cc9900;\n --color-fill-4: #ffffff;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #c0c0c0;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #c0c0c0;\n --color-disabled: #efefef;\n --color-disabled-text: #989898;\n --color-danger: #aa0000;\n --color-danger-surface: #ffffff;\n --color-success: #003300;\n --color-warning: #cc9900;\n --color-notice: #ffffcc;\n --color-notice-text: #000000;\n --color-focus: #003300;\n --color-shadow: #000000;\n --color-overlay: #ffffff;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: \"Arial Black\", Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Lucida Console\", Monaco, \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 26px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.15;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 900;\n --weight-display: 900;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 3px;\n --border-style: inset;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 35%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 35%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 35%, white);\n --shadow-dialog: 2px 2px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: linear-gradient(90deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 45%, white));\n --fill-inverse: linear-gradient(90deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 55%, white));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: linear-gradient(color-mix(in srgb, var(--color-input) 88%, black), var(--color-input) 4px);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }