{ "id": "v1-te-2242", "long_id": "v1.table-era-90s.portal.s02.p02.t04.u02", "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-2242", "preview_url": "https://chrono.skin/s/v1-te-2242/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- Family: pure red links and navy on white, with one gold strip, three light greys, maroon for visited links and errors, dark green and orange for status.\n- `--color-page`, `--color-canvas`, `--color-surface` are white `#ffffff`; `--color-surface-alt` `#efefef` is the resting folder tabs of an inner page, alternate table rows and the empty state; `--color-surface-strong` `#e0e0e0`.\n- `--color-bar` `#ffe888` (gold, black text, red links) is the current tab, the strip under the tabs, panel title strips, the table head and the 2px rule under the view tabs. `--color-bar-alt` `#e0e0e0` (grey, black text) is the resting tabs, sidebar and form title strips, figure labels and the footer link strip.\n- `--color-inverse` `#003098` (navy, white text) is the message box title bar only. The same navy is `--color-heading-alt` (the brand name, section headings, h3, positive figures), `--color-accent` (the solid badge, white text) and `--color-link-active`.\n- Links are pure red `--color-link` `#ff0000`, always underlined; visited is maroon `--color-link-visited` `#900000`; hover equals the link colour because the era had no hover effect.\n- Text is `--color-text` black; `--color-text-muted` `#686868` is for counts, the meta line under a list entry and the legal line. `--color-heading` is black.\n- `--color-accent-alt` `#900000` (maroon) is the kicker over the feature title, prices, the \"New!\" word, the star of a required field and negative figures. `--color-danger` is the same maroon: error text is bold and never underlined, which is what tells it from a red link.\n- `--color-fill-1` to `--color-fill-4` are `#efefef`, `#e0e0e0`, `#ffe888`, `#ffffff`: the title strips of the four department boxes. `--color-fill-1` is also the feature box and the form box; `--color-fill-3` is the cover block. They carry black text and red links.\n- `--color-success` `#006600` and `--color-danger` `#900000` carry white text as fills; `--color-warning` `#ff5000` (orange) is a fill only and carries black text. Notices are grey `#efefef`; the error notice is maroon text on white in a maroon outline.\n- Borders: `--color-border` `#989898` for every outline, `--color-border-strong` `#000000` for the cover block and the rule under a section heading, `--color-border-muted` `#c0c0c0` for the rules between rows and for bevels, `--color-input-border` `#c0c0c0` for input bevels.\n- Two families and a code face. `--font-body` (Times New Roman, Times) sets running text, feature text and table data. `--font-heading` and `--font-ui` (Trebuchet MS, one of the 1996 core web fonts, falling back to Arial) set the brand name, headings, title strips, tabs, every list of links in a box, forms, buttons, notices and all small print. `--font-mono` (Courier New) is for code and textareas.\n- Sizes: `--text-base` 16px for running text; `--text-ui` 12px for tabs, the strip, box lists, meta lines, the line under a table entry, department box text, forms and buttons; `--text-small` 11px for the tagline, account links, kickers, table heads, figure labels, view tabs, captions and the footer; `--text-h3` 13px bold for title strips; `--text-h2` 16px bold for section headings; `--text-large` 18px for the feature title, figures and a lead line; `--text-h1` 20px for a page title; `--text-display` 24px for the brand name only. Line height is `normal` everywhere; bold is 700.\n- No uppercase transform and no letter spacing; capitals in kickers and status labels are typed. All three link decorations are `underline`.\n- `--border-width` 1px `solid` for outlines and rules, `--border-width-strong` 2px for the rule the view tabs stand on and control bevels. The surface is shaded the way shop fronts of 1999 shaded their bars with a strip of picture: `--fill-bar`, `--fill-bar-alt`, `--fill-inverse` and `--fill-accent` run from a much lighter mix of the palette colour at the top to the colour itself at the bottom, and so do the three button fills. `--fill-panel`, `--fill-input` and `--fill-page` stay flat. Boxes and the sheet carry a 1px outline with a 2px edge at the right and bottom (`--shadow-panel`, in `--color-border-muted`) and the message box a 2px one (`--shadow-dialog`, in `--color-border`), none of them blurred; the control and text shadows are `none`. Radius 0; `--focus-ring` is `1px dotted`; `--transition` is `none`.\n- Not expressible by a token, written literally in `components.css`: the bevel of buttons, selects, page keys, the brand tile and the message box is `border-style: outset` and of inputs, checkboxes, pressed buttons and the current page key `inset`, drawn in `--color-border-muted` and `--color-input-border`.\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.p02.t04.u02\",\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-2242\",\n \"short\": \"v1-te-2242\"\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: #dddddd;\n --color-bar: #ccccff;\n --color-bar-text: #000000;\n --color-bar-alt: #cccccc;\n --color-bar-alt-text: #000000;\n --color-inverse: #666666;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #303068;\n --color-link: #0000ee;\n --color-link-quiet: #0000ee;\n --color-link-visited: #666699;\n --color-link-hover: #0000ee;\n --color-link-active: #cc0000;\n --color-border: #666666;\n --color-border-strong: #000000;\n --color-border-muted: #cccccc;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #dddddd;\n --color-fill-2: #ccccff;\n --color-fill-3: #cccccc;\n --color-fill-4: #eeeeee;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #dddddd;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #cccccc;\n --color-disabled: #efefef;\n --color-disabled-text: #787878;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006600;\n --color-warning: #ff6600;\n --color-notice: #eeeeee;\n --color-notice-text: #000000;\n --color-focus: #000000;\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: \"Trebuchet MS\", Arial, Helvetica, sans-serif;\n --font-ui: \"Trebuchet MS\", Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 18px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 13px;\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: 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" } }