{ "id": "v1-te-3333", "long_id": "v1.table-era-90s.portal.s03.p03.t03.u03", "name": "Table-era guide page, 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": "pure", "viewport": { "width": 800, "fluid": false }, "summary": "A guide-and-community home page as built between 1996 and 2000: a fixed 600px column centred in an 800px window, opened by one solid dark bar that carries the name in white, with a centred search on the bare page beneath it and a filled column of headline boxes down the left side. Everything is set in one 13px sans-serif with 10px small print, nearly all of it underlined dark blue links, on white with flat orange title bands, sky-blue strips and pale blue blocks, and every line that is drawn is 2px thick. It was the look of web guides, home-page communities and search sites until wider, stylesheet-driven layouts replaced it after 2000.", "url": "https://chrono.skin/s/v1-te-3333", "preview_url": "https://chrono.skin/s/v1-te-3333/specimen.html", "files": { "STYLE.md": "# Table-era guide page, 1999\n\n## Summary\n\nA guide-and-community home page as built between 1996 and 2000: a fixed 600px column centred in an 800px window, opened by one solid dark bar that carries the name in white, with a centred search on the bare page beneath it and a filled column of headline boxes down the left side. Everything is set in one 13px sans-serif with 10px small print, nearly all of it underlined dark blue links, on white with flat orange title bands, sky-blue strips and pale blue blocks, and every line that is drawn is 2px thick. It was the look of web guides, home-page communities and search sites until wider, stylesheet-driven layouts replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid: `--size-page` is 600px, centred by `.ds-page__frame` with a `--space-3` (6px) margin above. Nothing is wider than 600px and nothing stretches with the window.\n- The specimen is one example site, a members' guide, of five 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` (a solid `--fill-inverse` bar with the wordmark, tagline and three tool links in the bar's text colour, then a grey strip of 10px service links separated by bars), the `.ds-hero` (title, one line, the search field and button, two lines of small tool links, all centred on the bare page with no fill), the `.ds-grid` (a grey strip across the full column holding four outlined boxes in a row), then `.ds-page__columns`, then the `.ds-footer` opened by a thin `.ds-rule`.\n- `.ds-page__columns` is two columns: the `--size-sidebar` (170px) `.ds-sidebar` on the left, a grey filled column of boxes that runs the whole height of the row, and the 420px main column on the right after a `--space-4` (10px) gutter. There is no right-hand column.\n- Every block of the main column opens with a `.ds-band`, a full-width title band in `--fill-bar` with the title at the left and an optional small line at the right. The home page main column runs: band and `.ds-directory` (two columns of categories on a tinted block), band and `.ds-list` (features, each a bold linked title running into its description), then a `.ds-panel`.\n- Inner pages (a category, one entry, a form, a member's own list) keep the `.ds-nav`, the left `.ds-sidebar` and the `.ds-footer`; the centred search and the strip of four boxes go. In their place `.ds-page__head` spans the full 600px: the 10px `.ds-breadcrumb`, 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), and under the rule the `.ds-tabs`, a centred line of bracketed links, when the page has views of its own. Below it `.ds-page__columns` again: the sidebar now holds what belongs to that page (neighbouring categories, the facts of an entry, advice beside a form), and the main column, `.ds-page__inner`, holds `.ds-stat` first when the page has figures, then the `.ds-table` or `.ds-list` with its `.ds-pagination`, or running text, or a `.ds-band` over the `.ds-notices` and the `.ds-form`.\n- Views: `guide` is the home page (search, the strip of four boxes, sidebar, directory, features, a panel of guides). `rambling` is one category: figures, the table of walks with its status key, and the page links. `walk` is one entry as running text, with its facts in the sidebar and a line of related links. `add` is the form for a new walk, with its notices and the message box that discarding it opens. `mine` is the member's own list while it is empty: the empty state over a list of walks other members like. The current view's link in the grey strip of `.ds-nav` is bold, in the text colour and not underlined; the guide link is marked when the address names no view.\n- Blocks are separated by title bands, flat fills and 2px rules, never by cards with shadows or wide gutters. Headers, the search, notices, the figure line, the dialog, the empty state and the footer are centred; lists, tables and forms are left-aligned.\n- Spacing scale: `--space-1` 2px is the padding of bands, strips and controls and the gap between form cells; `--space-2` 4px is cell padding and the gap between the lines of the inner-page head; `--space-3` 6px is the page margin, the side padding of bands and boxes, the gap between buttons and the space after a list item; `--space-4` 10px is the gutter between columns, the gap between sidebar boxes and the padding of tinted blocks; `--space-5` 16px is the gap between neighbouring blocks and above the columns; `--space-6` 24px is the list indent (and the width of a short input).\n- Fixed sizes: `--size-search` 220px search field, `--size-label` 120px form label column, `--size-field` 180px text input, `--size-area` 240px textarea, `--size-check` 13px checkbox, `--size-dialog` 300px message box.\n\n## Typography and colour roles\n\n- Family: a warm orange band, navy and sky blues on white, with dark green for positive status and slate for visited links.\n- `--color-page`, `--color-canvas`, `--color-surface` are white `#ffffff`; `--color-surface-alt` `#efefef` is the service strip under the top bar, the sidebar column, the strip behind the four boxes, form label cells and the dialog's button row; `--color-surface-strong` `#cccccc` carries no text.\n- `--color-bar` `#ffcc66` (orange, black text) is every title band of the main column and the 2px rule under a page header. `--color-bar-alt` `#a0d0ff` (sky blue, black text) is every sidebar title strip, the table head and the outline of notices and the figure line.\n- `--color-inverse` `#003399` (navy, white text) is the top bar, panel titles and the dialog title bar; links on it are white and underlined. The same navy is `--color-border-strong` (panel, box and dialog outlines), `--color-heading-alt` (h3, positive figures), `--color-link-quiet` and `--color-focus`.\n- Links are dark blue `--color-link` `#000099`, visited `#666699`, active `#cc0000`; hover equals the link colour.\n- `--color-accent` and `--color-accent-alt` `#cc0000` are the solid badge, the \"New!\" word and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#d8e8ff`, `#efefef`, `#ffcc66`, `#a0d0ff` and colour the four boxes of the strip; `--color-fill-1` is also the directory block, the figure line, the summary row of a table and the empty state. They carry black text and blue links.\n- `--color-warning` `#ffcc66` is a fill only and carries black text; `--color-success` `#006600` and `--color-danger` `#cc0000` carry white. Notices are pale blue `#d8e8ff`; the error notice is red text on white.\n- Borders: `--color-border` `#808080`, `--color-border-muted` `#cccccc` for the rules between table rows, the footer rule and bevels, `--color-input-border` `#cccccc` for input bevels.\n- One sans-serif throughout: `--font-body`, `--font-heading` and `--font-ui` are Arial, Helvetica. `--font-mono` is Courier New.\n- `--text-base` and `--text-ui` 12px, the size the first stylesheets of 1999 gave a sans-serif page; `--text-small` 10px for the service strip, tool links, sidebar titles, sub-categories, table head, captions, meta and legal text.\n- `--text-h3` 12px bold, `--text-h2` and `--text-large` 14px (the hero title, figures), `--text-h1` 18px for a page title, `--text-display` 22px bold (`--weight-display` 700) for the wordmark only. `--weight-ui` is 700: button labels are bold.\n- Line height `normal`; no transform, no tracking; capitals in sidebar titles are typed. All three link decorations are `underline`.\n- `--border-width` and `--border-width-strong` are both 2px, `--border-style` `solid`: every rule, row line and outline has the weight of a 2px coloured rule. There are no hairlines.\n- Boxes stand on hard black edges: `--shadow-panel` is a 1px outline in `--color-border-strong` with a 4px offset edge in `--color-shadow` behind it, neither blurred, and it frames the sheet as well as the panels; `--shadow-dialog` is a 4px offset, `--shadow-control` and `--shadow-control-hover` 1px; `--shadow-control-pressed` and `--shadow-text` are `none`. Bars are pinstriped: `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` repeat two rows of the palette colour and one row of a much lighter mix of it. Every other fill is the flat palette colour (`--fill-panel` is `--color-surface`). Radius 0; `--focus-ring` is `2px solid` in `--color-focus`; `--transition` is `none`.\n- Not expressible by a token, written literally in `components.css`: the bevel of buttons and selects is `border-style: outset` and of inputs, checkboxes and pressed buttons `inset`, drawn in `--color-border-muted` and `--color-input-border`.\n\n## Components\n\n- `.ds-page`: on ``; page fill and body type. `.ds-page__frame` is the centred 600px column; `.ds-page__columns` the sidebar-plus-main grid; `.ds-page__main` the home main column and `.ds-page__inner` the inner-page main column, both with `--space-5` between blocks; `.ds-page__head` stacks path, page header and view links across the full width of an inner page. The page margin is padding inside `.ds-page__frame`, not on ``: when a palette gives `--color-canvas` a colour of its own the frame shows as a sheet on the page and its content keeps that margin from the sheet edge. `.ds-page__frame` takes `--shadow-panel` as well, so a surface set that outlines its boxes also outlines the sheet.\n- `.ds-nav`: header. `.ds-nav__bar` is the solid bar holding the `.ds-brand`, `.ds-nav__tagline` and `.ds-nav__tools` (`.ds-nav__tools-item`, `.ds-nav__tool`, hyphen separated, in the bar's text colour). `.ds-nav__links` is the grey strip: a bold `.ds-nav__label`, then `.ds-nav__item` / `.ds-nav__link` separated by bars, the link of the view that is showing is bold, black and not underlined (`components.css` has one selector per view for this, and `is-current` does the same by hand); `.ds-nav__item--end` pushes a last link to the right edge.\n- `.ds-brand`: the site's mark and name, at the left of the solid bar `.ds-nav__bar`. `.ds-brand__mark` is a small square tile dressed like the button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 2px `outset` bevel drawn in `--color-inverse-text`, the text colour of the bar it sits on, so the tile stands off the bar even when the button fill is close to the bar fill, `--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, a 3 unit stroke and crisp edges. `.ds-brand__name` is the name in the heading family at `--text-display`, with the heading weight, tracking and transform, in `--color-inverse-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the centred search, the era's page introduction: `.ds-hero__title` (14px bold), `.ds-hero__lead`, `.ds-hero__action` (`.ds-hero__label`, `.ds-hero__field`, button), `.ds-hero__more` (10px links) and `.ds-hero__tools` lines with bold `.ds-hero__tools-label` words. No fill, no border, never a tall banner.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: `.ds-page-header__text` with `.ds-page-header__title` (18px bold) and `.ds-page-header__lead`, `.ds-page-header__action` with one button at the right, and a 2px bottom rule in `--color-bar`.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 14px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for secondary links, `.ds-link--strong` for bold links. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled button with a bold 12px label, on a `\n \n

Advanced Search | Family Filter

\n

Tools Help  Chat  E-mail  Shareware  Build Home Pages  Clubs

\n

Find Sounds  News  Weather  Road Maps  People  Buy Books  Records

\n \n\n
\n
\n

Seed Swap

\n

Gardeners trade by post

\n
\n
\n

Kite Club

\n

Plans and meeting dates

\n
\n
\n

Radio Shack

\n

Short-wave listeners' log

\n
\n
\n

Page Kit

\n

Make a home page today

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

Explore the Guide Monday, 14-Jun-99 08:12

\n \n
\n\n
\n

Getting the Most Out of chronoskin

\n
    \n
  • Take the TourTen minutes, six pages, and you will know where everything is kept. (updated Jun 11)
    • \n
  • Start a ClubAny three members can open a club with its own board and calendar. (214 clubs so far)
    • \n
  • Walk of the MonthHeron Weir and back: a flat towpath, a weir and a place for tea, chosen by the editors. (June)
    • \n
\n

What's New...

\n
\n\n
\n

Featured Guides

\n
\n \n

More...

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

Rambling

\n

Walks, maps and clubs, kept by members who walk them.

\n
\n
\n Add a Walk\n
\n
\n \n
\n\n
\n\n \n\n
\n\n
    \n
  • 342 walks
    • \n
  • 18 new this month
    • \n
  • 57 clubs
    • \n
  • 1,204 members
    • \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: OPEN walked this season CHECK not walked lately CLOSED path shut NEW added this month\n Distances are in miles. Report a closed path\n
WalkPathMilesWalked
Heron Weir and back NEWFlat towpath, good for prams.OPEN3.5412
The Three BeaconsA long ridge day with two steep climbs.OPEN11.0268
Old Drovers' LaneGreen lane between two market towns.CHECK6.275
Quarry Edge circuitShut while the fence is rebuilt.CLOSED4.8139
Print this list for your rucksack
\n\n
    \n
  1. Walks 5 to 8 of 342
    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
\n

Heron Weir and back

\n

Walk of the month for June. Written up by a member in May 1999.

\n
\n
\n All Walks\n
\n
\n \n
\n\n
\n\n \n\n
\n\n
\n

Along the towpath to the weir

\n

A level walk beside the canal, out by the water and back the same way.

\n

This is the walk to take with a pram or a slow dog. The towpath was resurfaced last spring and there is not a stile on it.

\n

Directions

\n

Start from the Mill Lane bus stop, grid reference SK 123 456. Go down the steps beside the bridge and turn left along the water.

\n
    \n
  • After a mile, pass the lock keeper's cottage.
    • \n
  • Keep to the towpath where the farm track leaves it.
    • \n
  • The weir is ten minutes beyond the second bridge.
    • \n
\n

Tea

\n

The lock cottage sells tea and cake at weekends from Easter to October.

\n
\n\n

\n See also:\n sketch map,\n other towpath walks,\n bus times to Mill Lane,\n messages about this walk,\n the keeper's home page,\n write up your own\n

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

Add a Walk

\n

Write up a walk you have done yourself, so that others can follow it.

\n
\n
\n My Walks\n
\n
\n
\n\n
\n\n \n\n
\n\n
\n

Your Walk Members only

\n
\n\n
\n

Tip: walks with a map reference are found twice as often.

\n

Sorry! We could not save your walk. Please give it a name.

\n
\n\n
\n \n
\n \n Every walk needs a name.\n
\n \n
\n \n
\n \n
\n \n (to the nearest half)\n
\n \n
\n \n
\n Good for\n
\n \n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Discard this walk?

\n

What you have typed so far will be thrown away. Walks already in the guide are not changed.

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

My Walks

\n

The walks you have written up and the ones you are keeping for later.

\n
\n
\n Browse Walks\n
\n
\n \n
\n\n
\n\n \n\n
\n\n
\n

You have not added any walks yet.

\n

Walks you write up are listed here. See how others do it.

\n Add Your First Walk\n
\n\n
\n

Walks Members Like this month

\n \n

All 342 Walks...

\n
\n\n
\n
\n\n
\n\n \n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.portal.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"table-era-90s\",\n \"years\": [\n 1996,\n 2000\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-te-3333\",\n \"short\": \"v1-te-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #efefef;\n --color-surface-strong: #cccccc;\n --color-bar: #ffcc66;\n --color-bar-text: #000000;\n --color-bar-alt: #a0d0ff;\n --color-bar-alt-text: #000000;\n --color-inverse: #003399;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #808080;\n --color-heading: #000000;\n --color-heading-alt: #003399;\n --color-link: #000099;\n --color-link-quiet: #003399;\n --color-link-visited: #666699;\n --color-link-hover: #000099;\n --color-link-active: #cc0000;\n --color-border: #808080;\n --color-border-strong: #003399;\n --color-border-muted: #cccccc;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #d8e8ff;\n --color-fill-2: #efefef;\n --color-fill-3: #ffcc66;\n --color-fill-4: #a0d0ff;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #cccccc;\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: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006600;\n --color-warning: #ffcc66;\n --color-notice: #d8e8ff;\n --color-notice-text: #000000;\n --color-focus: #003399;\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, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 22px;\n --text-h1: 18px;\n --text-h2: 14px;\n --text-h3: 12px;\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: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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" } }