{ "id": "v1-te-29a3", "long_id": "v1.table-era-90s.portal.s02.p09.t10.u03", "name": "Table-era news front, 1999", "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": "portal", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A news and services front page as built between 1996 and 2000: one fixed 770px table centred in an 800px window, with a flat coloured navigation rail running down the left side and the stories in ruled cells to its right. Nearly all text is an underlined blue link in the browser's default 16px serif, with 13px sans-serif only in the rail, the controls and the small print, on white with one lavender rail, grey title strips and grey slabs. It was the standard skeleton of newspaper, broadcaster and magazine sites until stylesheet layouts replaced the rail-and-table page after 2000.", "url": "https://chrono.skin/s/v1-te-29a3", "preview_url": "https://chrono.skin/s/v1-te-29a3/specimen.html", "files": { "STYLE.md": "# Table-era news front, 1999\n\n## Summary\n\nA news and services front page as built between 1996 and 2000: one fixed 770px table centred in an 800px window, with a flat coloured navigation rail running down the left side and the stories in ruled cells to its right. Nearly all text is an underlined blue link in the browser's default 16px serif, with 13px sans-serif only in the rail, the controls and the small print, on white with one lavender rail, grey title strips and grey slabs. It was the standard skeleton of newspaper, broadcaster and magazine sites until stylesheet layouts replaced the rail-and-table page after 2000.\n\n## Layout\n\n- The page is fixed, not fluid, and centred: `--size-page` is 770px, and `.ds-page__frame` sits in the middle of the window with the spare width split on both sides. Nothing stretches with the window.\n- Order from the top: `.ds-masthead` (wordmark at the left, a small tagline, the search form at the right, all on one line), then `.ds-page__columns`, then the `.ds-footer` opened by a 2px `.ds-rule`.\n- The specimen is one example site, a news front with a reader reviews section, of five views. The `.ds-masthead`, the rail with the `.ds-nav` and the `.ds-footer` are written once, outside the views; each view is a `.ds-view` section inside `.ds-page__content`, the content column, and one shows at a time.\n- `.ds-page__columns` is two columns: the `--size-rail` (130px) `.ds-page__rail` on the left, filled with `--fill-bar` for the whole height of the page, and the content column `.ds-page__content` to its right after a `--space-4` (12px) gutter. The rail holds the `.ds-nav` (a vertical list of section links, one per line, then a second group under a grey label) and under it `.ds-sidebar` blocks. There is no horizontal navigation bar and no right-hand sidebar.\n- The home page content column, `.ds-page__main`, runs: the `.ds-tabs` line of service links, the `.ds-dateline`, a `.ds-notice` for breaking news, then `.ds-page__lead`, which sets the `.ds-hero` lead story beside a `--size-side` (220px) column of modules (`.ds-page__side`: a `.ds-panel` and a short list). Under the lead comes the `.ds-grid`, one outlined band of four ruled cells, then `.ds-sections`, two equal columns of headline groups, each a linked section name over a `.ds-list`.\n- Inner pages (a story, a section list, a form) keep the masthead, the rail and the footer unchanged. The lead story, the module column and the cell band go. The content column, `.ds-page__inner`, is a single 628px column and opens with the `.ds-breadcrumb`, then the `.ds-page-header` (title and one line at the left, one button at the right, closed by its own 2px rule in the bar colour), then the `.ds-tabs` line when the page has views of its own. Below come `.ds-stat` when the page has figures, the `.ds-table` or `.ds-list`, the `.ds-pagination`, or the running text of a story, or the `.ds-notices` and the `.ds-form`.\n- Views: `front` is the front page (service links, dateline, breaking news, lead story and modules, the cell band, two columns of headlines). `story` is one story as running text, closed by a line of related links and more headlines of its section. `reviews` is the list of a section: figures, the table of reader reviews with its status key, and the page links. `send` is the form for a new review, with its notices and the message box that discarding a draft opens. `mine` is the reader's own list while it is empty: the empty state, a list of products readers ask about and a panel of advice. The rail marks the view that is showing with the strip in `--fill-bar-alt`; the front page link is marked when the address names no view.\n- Blocks are separated by rules, title strips and outlines, never by cards with shadows or wide gutters. Everything in the content column is left-aligned; nothing is centred.\n- Spacing scale: `--space-1` 2px is the padding of strips, table cells and controls; `--space-2` 4px is the side padding of cells and strips and the gap between a title and its body; `--space-3` 8px is the page margin, paragraph spacing and the gap between buttons and form rows; `--space-4` 12px is the gutter between columns and the gap between neighbouring blocks of the content column; `--space-5` 20px is the indent of short bullet lists and the foot of the page; `--space-6` 40px is the indent of headline lists and lists in running text.\n- Fixed sizes: `--size-search` 130px masthead search field, `--size-field` 220px text input, `--size-area` 320px textarea, `--size-check` 13px checkbox, `--size-dialog` 360px message box.\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- One serif throughout, the browser default nobody changed: `--font-body`, `--font-heading` and `--font-ui` are Times New Roman, Times. `--font-mono` is Courier New.\n- `--text-base` 16px; `--text-small` and `--text-ui` 13px, the smaller step of the film site, also used for controls and navigation.\n- Headings are large and bold as on the community page: `--text-h3` 16px, `--text-h2` and `--text-large` 19px, `--text-h1` 24px, `--text-display` 32px for the brand name only. All bold is 700.\n- Line height `normal`; no transform, no tracking. All three link decorations are `underline`.\n\n- Family: the 1999 guide page (olive `#cccc66`, khaki `#cccc99`, pale yellow, light grey, on white), with the red, black, link blue and navy of the 1998 community page and the dark green of the 1998 personal start page.\n- `--color-page`, `--color-canvas`, `--color-surface` are white `#ffffff`; `--color-surface-alt` `#eeeeee` is the tab strip, alternate rows and the empty state; `--color-surface-strong` `#cccc99`.\n- `--color-bar` `#cccc66` (olive, black text) is the search band, the table head and the header and footer rules. `--color-bar-alt` `#cccc99` (khaki, black text) is every title strip and the notice border.\n- `--color-inverse` `#000000` with white text is the dialog title bar only.\n- Links are `--color-link` `#0000cc`, visited `#6060a0`, active `#cc0000`; hover equals the link colour.\n- `--color-heading-alt` `#003060` (navy) is the wordmark, tagline, h3 and positive figures. `--color-accent` and `--color-accent-alt` `#cc0000` are the mark, the solid badge, the \"New!\" word and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#ffffcc`, `#eeeeee`, `#cccc99`, `#ffcc00`; `--color-fill-3` is also the khaki underline of section headings.\n- `--color-warning` `#ffcc00` is a fill only and carries black text; `--color-success` `#006600` and `--color-danger` `#cc0000` carry white. Notices sit on pale yellow `#ffffcc`; the error notice is red on white. The secondary button is khaki `#cccc99`.\n- Borders: `--color-border` `#a0a0a0`, `--color-border-strong` `#666633` (dark olive, for boxed outlines), `--color-border-muted` `#cccccc` and `--color-input-border` `#c0c0c0` for bevels. `--color-focus` is the navy `#003060`.\n\n## Components\n\n- `.ds-menu`: a jump menu in the sidebar, a `\n \n \n \n \n \n \n \n \n\n
\n\n
\n \n \n
\n\n
\n\n
\n
\n\n \n\n

March 9, 1999 -- Updated 6:40 a.m. local time

\n\n

\n JUST IN\n The coast road is closed between Saltmarsh and Port Ellery after a landslip overnight. Buses are running by the inland route.\n

\n\n
\n\n
\n

Lighthouse keepers hand over to the machines

\n

The last staffed light on the northern coast was switched to automatic working at midnight, ending 160 years of watches kept by hand.

\n

\"The lamp will not notice the difference,\" said the departing keeper. \"The village might.\"

\n

FULL STORY

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

On the radio today all

\n
\n
    \n
  • 7 a.m.: Harbour report
    • \n
  • 1 p.m.: The council debate, live
    • \n
  • 6 p.m.: Listeners' letters
    • \n
\n
\n
\n
\n

In other news:

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

Weather

\n

Showers, clearing by noon. High 11. Five-day outlook

\n
\n
\n

Tides

\n

High 4:12 a.m. and 4:40 p.m. Full table

\n
\n
\n

Results

\n

Rovers 2, Saltmarsh 2. All scores

\n
\n
\n

Quick vote

\n

Should the pier stay open in winter? Vote

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

REGION

\n \n

In depth:

\n \n
\n
\n

MONEY

\n \n

More money news

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

Region

\n

March 9, 1999. Filed from the northern coast at 6:10 a.m.

\n
\n
\n Front Page\n
\n
\n\n
\n

Lighthouse keepers hand over to the machines

\n

The last staffed light on the northern coast went automatic at midnight.

\n

For 160 years somebody climbed the stairs at dusk. Last night nobody did. The lamp at Gull Point lit itself, turned itself and, at 6:02 this morning, put itself out again without a hand on the switch.

\n

\"The lamp will not notice the difference,\" said the departing keeper, who leaves the service after 31 years. \"The village might.\"

\n

How the new light works

\n

A sensor on the gallery measures daylight. The station reports to the harbour office by telephone line every hour, and an engineer can ask for its state by sending the word STATUS.

\n
    \n
  • The lamp changes its own bulb from a rack of six.
    • \n
  • A battery room keeps it lit for nine days without mains power.
    • \n
  • The fog signal sounds when visibility falls below two miles.
    • \n
\n

Open day

\n

The keeper's cottage opens to visitors on the first Sunday of May. Entry is free; the stairs are not for the faint of heart.

\n
\n\n

\n Related:\n How an automatic light works |\n Map of the northern lights |\n A keeper's log, page by page |\n Your memories |\n printer version |\n MORE NEWS\n

\n\n
\n

More from the region

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

Reader Reviews

\n

Modems, printers and programs, tested by the people who bought them.

\n
\n
\n Send a Review\n
\n
\n\n \n\n
    \n
  • Reviews 1,306
    • \n
  • This week 27
    • \n
  • In the queue 9
    • \n
  • Readers 412
    • \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Key: PRINTED on the site HELD waiting for the desk RETURNED sent back to its writer NEW in the last day\n Reviews are read by the desk before they appear. House rules | Sort by date\n
ProductStatusSentMarksReaders
Pelican 56K external modem NEWPRINTEDMar 88 / 102,140
Inkwell 300 colour printerPRINTEDMar 56 / 101,877
Ledgerbook home accounts 2.0HELDMar 89 / 100
Scanmate flatbed scannerRETURNEDFeb 263 / 100
Tutor Type keyboard coursePRINTEDFeb 247 / 10964
Harbourlight 15 inch monitorPRINTEDFeb 195 / 101,312
Average mark this month: 6.8. See every product
\n\n
    \n
  1. More reviews:
    2. \n
  2. Previous
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. Next
    8. \n
\n\n
\n
\n\n
\n
\n\n \n\n
\n
\n

Send a Review

\n

Say what you bought, what it cost and how it behaved after a month.

\n
\n
\n My Reviews\n
\n
\n\n
\n

NOTE Reviews sent before noon are usually read the same day.

\n

ERROR Your review was not sent. Please correct the marked field and try again.

\n
\n\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n That address is not complete.\n
\n
\n
\n \n
\n \n Choose the nearest.\n
\n
\n
\n You may:\n
\n \n \n
\n
\n
\n \n
\n \n Keep to 300 words and give a mark out of ten.\n
\n
\n
\n \n \n \n \n
\n
\n\n
\n

Discard this draft?

\n

What you have typed will be lost. The reviews already printed are not changed.

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

My Reviews

\n

Everything you have sent to the desk, and where each one stands.

\n
\n
\n All Reviews\n
\n
\n\n \n\n
\n

You have not sent any reviews.

\n

Reviews you send will be listed here with their status. Anyone may send one; the desk reads them all.

\n Write a Review\n
\n\n
\n

Readers are asking about

\n \n

See what has been reviewed

\n
\n\n
\n

Before you write start now

\n
\n
    \n
  • Give the exact model name as it appears on the box.
    • \n
  • Say which computer you used and what the product cost.
    • \n
  • Keep to 300 words and give a mark out of ten.
    • \n
\n
\n
\n\n
\n
\n\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.portal.s02.p09.t10.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"table-era-90s\",\n \"years\": [\n 1996,\n 2000\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-te-29a3\",\n \"short\": \"v1-te-29a3\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #cccc99;\n --color-bar: #cccc66;\n --color-bar-text: #000000;\n --color-bar-alt: #cccc99;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #003060;\n --color-link: #0000cc;\n --color-link-quiet: #0000cc;\n --color-link-visited: #6060a0;\n --color-link-hover: #0000cc;\n --color-link-active: #cc0000;\n --color-border: #a0a0a0;\n --color-border-strong: #666633;\n --color-border-muted: #cccccc;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #ffffcc;\n --color-fill-2: #eeeeee;\n --color-fill-3: #cccc99;\n --color-fill-4: #ffcc00;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #cccc99;\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: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006600;\n --color-warning: #ffcc00;\n --color-notice: #ffffcc;\n --color-notice-text: #000000;\n --color-focus: #003060;\n --color-shadow: #000000;\n --color-overlay: #ffffff;\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: \"Times New Roman\", Times, 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: 32px;\n --text-h1: 24px;\n --text-h2: 19px;\n --text-h3: 16px;\n --line-body: normal;\n --line-heading: normal;\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: 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: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 0 1px var(--color-border-strong), 4px 4px 0 1px var(--color-shadow);\n --shadow-control: 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 4px 4px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, var(--color-bar) 0 2px, color-mix(in srgb, var(--color-bar) 55%, white) 2px 3px);\n --fill-bar-alt: repeating-linear-gradient(0deg, var(--color-bar-alt) 0 2px, color-mix(in srgb, var(--color-bar-alt) 55%, white) 2px 3px);\n --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse) 55%, white) 2px 3px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }