{ "id": "v1-te-1111", "long_id": "v1.table-era-90s.portal.s01.p01.t01.u01", "name": "Table-era portal, 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": "portal", "mode": "pure", "viewport": { "width": 800, "fluid": false }, "summary": "A directory-and-search portal home page as built between 1996 and 2000: a fixed 600px column centred in an 800px window, laid out as tight cells with flat colour fills and no decoration beyond rules and bevelled form controls. Nearly all text is an underlined dark blue link, set at 13px in a serif body face with bold sans-serif headings and 10px sans-serif small print, on a white page with one flat teal band, yellow title strips and pale yellow boxes. It was the standard look of search engines, directories and start pages until wider, stylesheet-driven layouts replaced it after 2000.", "url": "https://chrono.skin/s/v1-te-1111", "preview_url": "https://chrono.skin/s/v1-te-1111/specimen.html", "files": { "STYLE.md": "# Table-era portal, 1998\n\n## Summary\n\nA directory-and-search portal home page as built between 1996 and 2000: a fixed 600px column centred in an 800px window, laid out as tight cells with flat colour fills and no decoration beyond rules and bevelled form controls. Nearly all text is an underlined dark blue link, set at 13px in a serif body face with bold sans-serif headings and 10px sans-serif small print, on a white page with one flat teal band, yellow title strips and pale yellow boxes. It was the standard look of search engines, directories and start pages 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`, which carries a `--space-3` (8px) margin inside it. Nothing is wider than 600px and nothing stretches with the window.\n- The specimen is one example site, a portal, 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` (wordmark left, tagline, 10px tool links right, then one centred row of text links separated by hyphens), the `.ds-hero` search band at full column width, the `.ds-tabs` strip, a 2px `.ds-rule`, then `.ds-page__columns`, then the `.ds-footer` opened by another `.ds-rule`.\n- `.ds-page__columns` is two columns: a main column and a `--size-sidebar` (190px) `.ds-sidebar` on the right, separated by a `--space-4` (10px) gutter and the sidebar's 1px left rule. The main column opens with the two-column `.ds-directory`; the sidebar carries enough short sections to end near the foot of the main column.\n- Inner pages (a category, a result list, a settings page, a help page) keep the `.ds-nav` and the `.ds-footer` and drop the search band. In its place, inside `.ds-page__head` with no gaps between them: the `.ds-breadcrumb`, the `.ds-page-header` (title and one line at the left, one button at the right), the `.ds-tabs` strip for the views of that page, and the 2px `.ds-rule`. Below the rule inner pages are one full 600px column, `.ds-page__inner`, with no sidebar and `--space-5` between blocks: `.ds-stat` first when the page has figures, then the `.ds-table` or `.ds-list` with its `.ds-pagination`, then running text or the `.ds-form`. What the sidebar held on the home page becomes a `.ds-panel` at the foot of the column if it is needed at all.\n- Views: `home` is the portal front page (search band, channel strip, directory, headlines, grid, markets panel, sidebar). `category` is one directory category: figures, the table of listed sites with its status key, result pages and a panel of related categories. `search` is a result list: category matches, site matches with result pages, and the empty state for a kind of match that found nothing. `mypage` is the settings screen: notices, the form, the table of sections on the member's page and the message box that removing a section opens. `help` is a page of running text, including the line that shows the link states, with a boxed panel of further questions. 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, title strips and flat fills, never by cards with shadows or wide gutters.\n- Spacing scale: `--space-1` 2px is the spacing between table and grid cells and the padding of controls and strips; `--space-2` 4px is cell padding, the padding around separators and the gap between a title and its body; `--space-3` 8px is the page margin, paragraph spacing, box padding and the gap between buttons; `--space-4` 10px is the gutter between columns; `--space-5` 16px is the gap between neighbouring blocks of the main column and the side padding of the search band; `--space-6` 40px is the list indent (and the width of a short input).\n- Fixed sizes: `--size-search` 250px search field, `--size-label` 110px form label column, `--size-field` 180px text input, `--size-area` 240px textarea, `--size-check` 13px checkbox, `--size-dialog` 320px message box.\n\n## Typography and colour roles\n\n- Two families and a code face. `--font-body` (Times New Roman, Times) sets running text, link lists, table data and the footer. `--font-heading` and `--font-ui` (Arial, Helvetica) set the wordmark, headings, title strips, the search band, forms, buttons, notices and all 10px small print. `--font-mono` (Courier New) is for code and textareas. The references used Times, Arial, Geneva, Helvetica and Verdana as installed system fonts; no substitute was needed.\n- Sizes: `--text-base` and `--text-ui` 13px; `--text-small` 10px for tool links, tab strip, captions, meta and legal text; `--text-large` and `--text-h2` 16px for directory titles, panel titles and section headings; `--text-h1` 18px for a page title; `--text-h3` 13px bold; `--text-display` 28px for the wordmark only. Line height is `normal` everywhere. Bold is 700, the wordmark included.\n- No uppercase transform and no letter spacing. Headings are distinguished by family, weight and size only.\n- Links: `--color-link` (dark blue) and always underlined, including navigation, titles and quiet links (`--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all `underline`). `--color-link-visited` is a greyed violet, `--color-link-active` is red, `--color-link-hover` equals the link colour because the era had no hover effect. `--color-link-quiet` (bright blue) is for promotional links set in the sans face.\n- Text is `--color-text` black; `--color-text-muted` grey is for times and counts only. `--color-heading` is black; `--color-heading-alt` (navy) is the wordmark, tagline, h3 and positive figures.\n- `--color-success` (dark green, the one green the references print) and `--color-warning` (the title-strip yellow, the era's amber) are flat fills for status labels. Green also works as text on white; the yellow is a fill only and carries black text.\n- Fills are flat. `--color-bar` (teal) is the search band, table head and the 2px rules. `--color-bar-alt` (yellow) is every panel and sidebar title strip and the border of notices. `--color-inverse` (black, white text) is the dialog title bar only. `--color-surface-alt` (light grey) is the tab strip, alternate table rows and the empty state. `--color-fill-1` to `--color-fill-4` (pale yellow, light grey, orange, teal) colour grid cells; `--color-fill-3` is also the 2px underline of `.ds-heading`.\n- `--color-accent` (crimson) is the solid badge; `--color-accent-alt` (red) is the \"New!\" word and negative figures. `--color-danger` is error text and the error notice border on `--color-danger-surface` (pale yellow).\n- Borders: 1px `--color-border` grey for table cells, the outline of the search band and of grid cells, the sidebar rule and thin rules; 1px `--color-border-strong` black for boxed panels and dialogs; 2px bevels on controls. Radius is 0 and every shadow token is `none`. Every one of these lines is drawn with `--border-width`, `--border-width-strong` and `--border-style`, and the sheet, panels and dialogs take `--shadow-panel` and `--shadow-dialog`, so another surface set changes the frames, rules and bars of the whole page.\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`. `--border-style` (`solid`) is used for everything else.\n\n## Components\n\n- `.ds-page`: on ``; white page, body type. `.ds-page__frame` is the 600px column, `.ds-page__columns` the main-plus-sidebar grid, `.ds-page__main` the main column with `--space-5` between blocks. On inner pages `.ds-page__head` stacks breadcrumb, page header, tabs and rule, and `.ds-page__inner` is the single full-width column. 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__top` holds the `.ds-brand`, `.ds-nav__tagline` and `.ds-nav__tools`; `.ds-nav__links` is the centred row of `.ds-nav__item` / `.ds-nav__link`, hyphen separated; 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).\n- `.ds-brand`: the site's mark and name, at the left of `.ds-nav__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 2px `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, 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-heading-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the search band, the era's page introduction, filled with `--fill-bar` inside a `--border-width` outline. `.ds-hero__title` (bold 13px), `.ds-hero__lead`, `.ds-hero__more` (10px links), `.ds-hero__action` (select, `.ds-hero__field`, button) and `.ds-hero__hint`. Never a tall banner with a large heading.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__text` holds `.ds-page-header__title` (18px bold sans) and `.ds-page-header__lead` (one 13px serif line); `.ds-page-header__action` holds one button, bottom-aligned at the right. No fill and no border of its own: the tab strip and 2px rule under it close it.\n- `.ds-prose`: running text on inner pages; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 16px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for promotional links, `.ds-link--strong` for bold links. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled button with 13px sans label, on a `\n \n \n\n
\n

In the News

\n \n

More News...

\n
\n\n
\n

Shopping

\n \n

More Shopping...

\n
\n\n
\n

Weather

\n \n

Choose Your Town...

\n
\n\n
\n

Classifieds

\n \n

More Classifieds...

\n
\n\n
\n

Inside chronoskin

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

Web Authoring

\n

Guides and tools for building your first page.

\n
\n
\n Search This Category\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: LIVE checked this year PENDING waiting for an editor DEAD LINK reported broken NEW added this week\n Links are checked twice a year. Report a dead link | Sort by name\n
SiteStatusAddedVisits
The Page Builder's PrimerLIVEMar 124,812
Tags from A to ZLIVEFeb 273,096
Background Tile Workshop NEWPENDINGMay 3207
Kit's Guide to FramesDEAD LINKNov 191,540
Colour Charts for the ScreenLIVEJan 82,263
Counters and Guestbooks ExplainedLIVEDec 21,988
Know a page we have missed? Suggest a site
\n\n
    \n
  1. Result Pages:
    2. \n
  2. [<< Prev]
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. 5
    8. \n
  8. [Next >>]
    9. \n
\n\n
\n

Related Categories All

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

Search Results

\n

14 matches for building a home page in the directory.

\n
\n
\n New Search\n
\n
\n \n
\n
\n\n
\n

Category Matches

\n \n
\n\n
\n

Site Matches

\n \n

Browse all of Web Authoring...

\n
\n\n
    \n
  1. Result Pages:
    2. \n
  2. [<< Prev]
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. [Next >>]
    7. \n
\n\n
\n

Newsgroup Matches

\n
\n

No newsgroup messages matched your search.

\n

Check the spelling, use fewer words, or browse the directory.

\n Search Again\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Personalize Your Page

\n

Choose what chronoskin shows you each time you visit.

\n
\n
\n View My Page\n
\n
\n \n
\n
\n\n
\n

Tip: choose a home town and we will show its weather and headlines each time you visit.

\n

Sorry! Your page was not saved. Please correct the member name and try again.

\n
\n\n
\n \n
\n \n Member names need at least 4 letters.\n
\n \n
\n \n
\n \n
\n \n \n (MM DD)\n
\n \n
\n \n
\n Show me:\n
\n \n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Sections on Your Page

\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
SectionShowsItemsChange
Today's HeadlinesTop stories, updated hourly4Edit | Remove
My MarketsPrices for the symbols you choose4Edit | Remove
WeatherEastport, three days ahead3Edit | Remove
\n
\n\n
\n

Remove this section?

\n

\"My Markets\" will be taken off your page. You can add it back at any time.

\n
\n Remove\n Cancel\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Help

\n

Answers to the questions members ask most.

\n
\n
\n Search Help\n
\n
\n \n
\n
\n\n
\n

How the directory works

\n

Every site here was visited by an editor.

\n

The directory lists more than 40,000 sites in ten subjects. Every listing is visited by a person before it is added, and checked again twice a year. Start from a subject on the front page, or type a few words into the search band.

\n

Building your first page

\n

A page is a plain text file. Save it with the name index.html and send it to your provider's server. The sites in Web Authoring show how, step by step.

\n
    \n
  • Keep each page under 40K so it loads over a modem.
    • \n
  • Give every page a title.
    • \n
  • Test in more than one browser.
    • \n
\n

Reading the links

\n

Links are underlined everywhere on chronoskin, and their colour tells you where you have been.

\n

\n A link you have not followed -\n a link you have visited -\n a link under the pointer -\n a link as you click it -\n a sponsor's link -\n a bold link\n

\n

Suggest a site

\n

Know a good page we have missed? Tell the editors and it will be reviewed within two weeks.

\n
\n\n
\n

More Help Index

\n
\n \n
\n
\n\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.portal.s01.p01.t01.u01\",\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-1111\",\n \"short\": \"v1-te-1111\"\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: #cccccc;\n --color-bar: #99cccc;\n --color-bar-text: #000000;\n --color-bar-alt: #ffcc00;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\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: #0066ff;\n --color-link-visited: #666699;\n --color-link-hover: #000099;\n --color-link-active: #ff0000;\n --color-border: #808080;\n --color-border-strong: #000000;\n --color-border-muted: #cccccc;\n --color-accent: #cc0033;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ff0000;\n --color-fill-1: #ffffcc;\n --color-fill-2: #eeeeee;\n --color-fill-3: #ffcc66;\n --color-fill-4: #99cccc;\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: #c0c0c0;\n --color-disabled: #efefef;\n --color-disabled-text: #989898;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffcc;\n --color-success: #006600;\n --color-warning: #ffcc00;\n --color-notice: #ffffcc;\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: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 28px;\n --text-h1: 18px;\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: 900;\n --weight-ui: 400;\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: 1px;\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: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\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: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }