{ "id": "v1-te-8a15", "long_id": "v1.table-era-90s.docs.s08.p10.t01.u05", "name": "Table-era department site, 1997", "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": "docs", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "The pages of a university department, a library or a public institution as built between 1996 and 2000: a 700px sheet centred in an 800px window, a serif letterhead over one filled line of links, and a front page that is a table of contents, each row a coloured label cell with a sentence and its links beside it. Text is 13px Arial with 11px small print under bold Palatino titles; links are underlined navy, on a cream sheet with a peach bar, khaki title strips, pale yellow cells and one maroon block. It was how institutions first put their prospectus, handbook and forms on the web, written by hand in an office, until content systems and wide stylesheet layouts replaced it after 2000.", "url": "https://chrono.skin/s/v1-te-8a15", "preview_url": "https://chrono.skin/s/v1-te-8a15/specimen.html", "files": { "STYLE.md": "# Table-era department site, 1997\n\n## Summary\n\nThe pages of a university department, a library or a public institution as built between 1996 and 2000: a 700px sheet centred in an 800px window, a serif letterhead over one filled line of links, and a front page that is a table of contents, each row a coloured label cell with a sentence and its links beside it. Text is 13px Arial with 11px small print under bold Palatino titles; links are underlined navy, on a cream sheet with a peach bar, khaki title strips, pale yellow cells and one maroon block. It was how institutions first put their prospectus, handbook and forms on the web, written by hand in an office, until content systems and wide stylesheet layouts replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid, and centred: `--size-page` is 700px. `.ds-page__frame` is the sheet, with `--space-3` (8px) of padding above and `--space-4` (12px) at the sides and foot; nothing is wider than it and nothing stretches with the window.\n- The specimen is one example site, a school of clock and watch making, 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: `.ds-nav`, then the view, then the `.ds-footer` under a heavy rule. The `.ds-nav` is two rows: `.ds-nav__top` (the `.ds-brand` at the left; at the right, right-aligned, the department's name and one small line) and `.ds-nav__bar`, one filled line under a heavy rule with the text links at the left, separated by upright bars, and the small search form at the right. There is no rail, no row of tabs or keys and no second strip.\n- One label column, `--size-label` (140px), runs down the left of the home view: the session label of the welcome band and the coloured label cells of the contents ledger stand in it, and the narrow column at the foot starts on it. The home view, `.ds-page__main`, is a stack of full-width blocks with `--space-5` (18px) between them: the `.ds-hero` welcome band, the `.ds-grid` contents ledger of five rows, the `.ds-stat` line of figures between two rules, and `.ds-page__columns`, a 176px `.ds-page__side` of small `.ds-panel` boxes at the left and the dated `.ds-list` under a `.ds-heading` at the right.\n- Inner pages (a course list, a handbook section, a form) keep the `.ds-nav` and the `.ds-footer` and drop the welcome band, the ledger and the figures. `.ds-page__inner` opens with `.ds-page__head` across the full sheet, which stacks with `--space-2` between them the small `.ds-breadcrumb`, the `.ds-page-header` (serif title and one italic line at the left, one button at the right, closed by its own heavy rule in the bar colour) and, when the page has parts, the `.ds-tabs` line. Below it `.ds-page__split` sets the page itself, `.ds-page__block`, at the left and a `--size-side` (180px) `.ds-sidebar` at the right after a `--space-5` gutter: the links of that section, then one or two short notes. Blocks in `.ds-page__block` are `--space-5` apart: the `.ds-table` with its key and `.ds-pagination`, or `.ds-prose`, or `.ds-notices`, the `.ds-form` and what it opens.\n- Views: `home` is the front page (welcome band, contents ledger, figures, term dates, news). `courses` is the course list: the kinds of course as a line of choices, the table of courses with its status key, the page links and the empty state of a list not yet announced. `handbook` is one section of the student handbook as running text, including the line that shows the link states, with the contents in the sidebar and links to the sections before and after. `apply` is the application form with its notices and the boxed question that withdrawing an application opens. The link of the view that is showing is cut out of the bar in the sheet's colour, bold and not underlined; the home link is marked when the address names no view.\n- Blocks are separated by hairlines, heavy rules and outlines, never by cards with shadows or wide gutters. Everything is left-aligned except the label cells and the letterhead lines, which are right-aligned, and the session label, which is centred.\n- Spacing scale: `--space-1` 2px is the padding of strips and bars, the gap between ledger rows and the padding of controls; `--space-2` 5px is cell padding above and below, the gap between the lines of the inner-page head and between a title and its text; `--space-3` 8px is the side padding of cells and strips, box padding, paragraph spacing and the gap between buttons; `--space-4` 12px is the side margin of the sheet, the gap between boxes in a column and between choices in the `.ds-tabs` line; `--space-5` 18px is the gap between neighbouring blocks and between columns; `--space-6` 36px is the list indent and the width of a short input.\n- Fixed sizes: `--size-date` 64px date column of the news list, `--size-search` 110px search field, `--size-field` 230px text input, `--size-area` 320px textarea, `--size-check` 13px checkbox, `--size-dialog` 330px boxed question.\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- 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- Family: the dark home page of 1998, read from the 1998 community welcome page and the 1998 film site: a black page with white text, pure yellow links, lime, pure red and pure blue, and the greys of browser chrome. Nothing is tinted; every colour is a named colour of the period at full strength.\n- `--color-page`, `--color-canvas` and `--color-surface` are black `#000000`. `--color-surface-alt` `#181818` (the darkest grey read from the screenshots) is alternate rows, quiet strips and the empty state; `--color-surface-strong` `#686868`.\n- `--color-bar` `#0000ff` (pure blue, white text, yellow links) is the search band, the table head, panel titles and the header and footer rules. `--color-bar-alt` `#686868` (grey, white text, yellow links) is every other title strip and the notice border.\n- `--color-inverse` `#c0c0c0` (silver) with black text is the light block of a dark page: a dialog title bar or a top bar. Links placed on it take its text colour.\n- Text is white `--color-text`; `--color-text-muted` `#989898` is for times, counts and legal lines. `--color-heading` is white; `--color-heading-alt` `#00ff00` (lime) is the brand name, h3 and positive figures.\n- Links are `--color-link` `#ffff00` (yellow), always underlined; `--color-link-quiet` is lime `#00ff00`, visited is silver `#c0c0c0`, active is red `#ff0000`; hover equals the link colour.\n- `--color-accent` `#ffff00` carries black text (`--color-accent-text`): the solid badge is a yellow block. `--color-accent-alt` `#ff0000` is the \"New!\" word, prices and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#181818`, `#000000`, `#0000ff`, `#686868`. They carry white text and yellow links.\n- `--color-danger` `#ff0000` is error text on black and a fill under black text; `--color-success` `#00ff00` is a fill under black text; `--color-warning` `#ff5000` (the orange of the 1998 university page, the only amber in the new references) is a fill under white text. `--color-danger-surface` is black; notices sit on `#181818`.\n- Controls are the grey of the operating system, as on any page of the period whatever its background: `--color-button` `#c0c0c0` and `--color-button-secondary` `#989898` with black text, white form fields with black text (`--color-input`, `--color-input-text`) in a silver bevel. Disabled controls are `#686868` with silver text. The two dark references show no form controls; these are the browser defaults read from the other captures.\n- Borders: `--color-border` and `--color-border-muted` `#989898` for outlines, row rules and bevels, `--color-border-strong` `#ffffff` (the white outline the film site puts round its pictures). `--color-focus` is yellow.\n\n## Components\n\n- `.ds-page`: on ``; the squared ground, body type. `.ds-page__frame` is the 700px sheet in `--color-canvas`. `.ds-page__main` is the home stack; `.ds-page__columns` its two columns at the foot and `.ds-page__side` the narrow left one. On inner pages `.ds-page__inner` holds `.ds-page__head` (path, page header, choices) and `.ds-page__split`, which sets `.ds-page__block` beside the sidebar.\n- `.ds-nav`: header. `.ds-nav__top` holds the `.ds-brand` and the right-aligned `.ds-nav__tagline`, whose first line is `.ds-nav__dept`; `.ds-nav__bar` is the filled line with `.ds-nav__links` (`.ds-nav__item` / `.ds-nav__link`, bar separated) and the `.ds-nav__search` form with its `.ds-nav__field`. The link of the view that is showing is cut out of the bar (`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 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 flat line caps. `.ds-brand__name` is the name in the heading family at `--text-display` in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the welcome band, the era's page introduction: an outlined box whose left cell, `.ds-hero__label` on `--fill-inverse`, names the session (`.ds-hero__year` is its large line) and whose `.ds-hero__body` holds `.ds-hero__title` (22px serif), `.ds-hero__lead` (15px) and `.ds-hero__action`, a large button, a secondary one and a `.ds-hero__hint`. Never a tall banner or a picture.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__text` holds `.ds-page-header__title` (22px serif) and `.ds-page-header__lead` (one italic line); `.ds-page-header__action` holds one button, bottom-aligned at the right. A heavy rule in the bar colour closes it.\n- `.ds-prose`: running text on handbook pages; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 15px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for notes, `.ds-link--strong` for bold links. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled button with an 11px label, on a `\n \n \n \n\n
\n
\n\n
\n

Session1997/98Michaelmas term

\n
\n

Welcome to the School of Horology

\n

Forty students a year learn here to design, make and restore timekeepers, at the bench and at the drawing board. These pages hold the course lists, the handbook and the forms.

\n
\n Apply for 1998 Entry\n Course List\n Applications close on 15 January.\n
\n
\n
\n\n
\n
\n

Teaching

\n

Three-year diploma, one-year certificate and evening classes.\n Course list | Timetable | Examination papers NEW

\n
\n
\n

Students

\n

What every student is given on the first morning, and where to find it again.\n Handbook | Workshop rules | Tool list

\n
\n
\n

Admissions

\n

Entry requirements, fees and the bench test.\n Application form | Open days | Bursaries

\n
\n
\n

Workshops

\n

Two bench rooms, the turning shop and the timing laboratory.\n Opening hours | Booking a lathe | Safety

\n
\n
\n

People

\n

Nine teaching staff, four technicians and the school office.\n Staff list | Office hours | Former students

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

Term dates

\n
\n
Michaelmas29 Sep to 12 Dec
\n
Lent12 Jan to 27 Mar
\n
Summer20 Apr to 26 Jun
\n

Workshops close at noon on the last day of term. Full calendar

\n
\n
\n
\n

School office

\n
\n
Room 29.30am to 12.30pm
\n
Library9am to 5pm
\n
\n
\n
\n
\n

News and seminars

\n \n

Older news

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

Courses 1997/98

\n

Every course the school teaches this session, with the places still open for Lent term.

\n
\n
\n Apply for a Place\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 \n
Key: OPEN places free FEW LEFT under five places FULL waiting list only NEW first taught this session
CodeCourseTermHoursPlaces
HR101Bench Practice I: filing, turning and fittingAll year180FULL
HR104Theory of the EscapementMichaelmas40OPEN
HR110Technical Drawing for ClockmakersLent36OPEN
HR205Wheel Cutting and Gear TrainsLent60FEW LEFT
HR212Quartz and Electronic Movements NEWLent30OPEN
HR301Restoration of Antique MovementsSummer90FEW LEFT
\n\n
    \n
  1. Courses 1 to 6 of 24
    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

Summer school 1998

\n
\n

No summer courses have been announced yet.

\n

The list is settled in February. Leave your address and the school office will post it to you.

\n Ask for the List\n
\n
\n
\n\n \n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Student Handbook

\n

Section 3 of 7. Revised September 1997 by the school office.

\n
\n
\n Whole Handbook on One Page\n
\n
\n
\n\n
\n
\n
\n

3. Workshop rules

\n

The bench rooms are shared by three year groups. These rules keep work, tools and fingers safe.

\n

3.1 Your bench

\n

Each student is given a numbered bench and a drawer key in the first week. The number is also your locker number and the first part of your computer name, for example bench27.

\n
    \n
  • Clear the bench top at the end of every session.
    • \n
  • Work left in a vice overnight must carry a ticket with your name.
    • \n
  • Report a lost key to the technicians the same day.
    • \n
\n

3.2 Machines

\n

Lathes and the wheel-cutting engine

\n

No student uses a powered machine before the technicians have signed the induction sheet. Eye protection is worn at every machine, including by anyone watching.

\n

How links are shown in this handbook

\n

\n A section you have not read,\n a section you have read,\n a link under the pointer,\n a link as you click it,\n a note or a footnote and\n a rule you must know.\n

\n
\n\n
    \n
  1. Section 3 of 7
    2. \n
  2. Previous: 2. The school day
    3. \n
  3. Next: 4. Assessment
    4. \n
\n
\n\n \n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Application for 1998 entry

\n

The form reaches the admissions tutor directly. A printed copy is posted to you as a receipt.

\n
\n
\n See the Courses First\n
\n
\n
\n\n
\n
\n
\n

Closing date: forms sent after 15 January are held for the following session.

\n

The form was not sent: the e-mail address is incomplete. Your other answers have been kept.

\n
\n\n
\n \n
\n \n
\n \n
\n \n An address needs a name, an @ sign and a host.\n
\n \n
\n \n
\n \n
\n \n applicants must be 17 or over\n
\n \n
\n \n
\n Please send me:\n
\n
\n \n
\n
\n \n \n \n Withdraw\n
\n
\n\n
\n

Withdraw your application?

\n

Your form of 3 November will be removed from the admissions list. You may apply again before the closing date.

\n
\n Withdraw\n Keep It\n
\n
\n
\n\n \n
\n\n
\n
\n\n \n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.docs.s08.p10.t01.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"table-era-90s\",\n \"years\": [\n 1996,\n 2000\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-te-8a15\",\n \"short\": \"v1-te-8a15\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #000000;\n --color-surface: #000000;\n --color-surface-alt: #181818;\n --color-surface-strong: #686868;\n --color-bar: #0000ff;\n --color-bar-text: #ffffff;\n --color-bar-alt: #686868;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #c0c0c0;\n --color-inverse-text: #000000;\n --color-text: #ffffff;\n --color-text-muted: #989898;\n --color-heading: #ffffff;\n --color-heading-alt: #00ff00;\n --color-link: #ffff00;\n --color-link-quiet: #00ff00;\n --color-link-visited: #c0c0c0;\n --color-link-hover: #ffff00;\n --color-link-active: #ff0000;\n --color-border: #989898;\n --color-border-strong: #ffffff;\n --color-border-muted: #989898;\n --color-accent: #ffff00;\n --color-accent-text: #000000;\n --color-accent-alt: #ff0000;\n --color-fill-1: #181818;\n --color-fill-2: #000000;\n --color-fill-3: #0000ff;\n --color-fill-4: #686868;\n --color-button: #c0c0c0;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #989898;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #c0c0c0;\n --color-disabled: #686868;\n --color-disabled-text: #c0c0c0;\n --color-danger: #ff0000;\n --color-danger-surface: #000000;\n --color-success: #00ff00;\n --color-warning: #ff5000;\n --color-notice: #181818;\n --color-notice-text: #ffffff;\n --color-focus: #ffff00;\n --color-shadow: #000000;\n --color-overlay: #000000;\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 --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: groove;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: -1px -1px 0 color-mix(in srgb, var(--color-canvas) 40%, white), 1px 1px 0 var(--color-border);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: -1px -1px 0 color-mix(in srgb, var(--color-canvas) 40%, white), 3px 3px 0 var(--color-border);\n --shadow-text: none;\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 3h14v1h-13v13h-1z' fill='%23ffffff' fill-opacity='.38'/%3E%3Cpath d='M17 4v14h-14v-1h13v-13z' fill='%23000000' fill-opacity='.12'/%3E%3C/svg%3E\") var(--color-page);\n --fill-bar: linear-gradient(color-mix(in srgb, var(--color-bar) 55%, white) 0 1px, var(--color-bar) 1px calc(100% - 1px), color-mix(in srgb, var(--color-bar) 70%, black) calc(100% - 1px));\n --fill-bar-alt: linear-gradient(color-mix(in srgb, var(--color-bar-alt) 55%, white) 0 1px, var(--color-bar-alt) 1px calc(100% - 1px), color-mix(in srgb, var(--color-bar-alt) 70%, black) calc(100% - 1px));\n --fill-inverse: linear-gradient(color-mix(in srgb, var(--color-inverse) 55%, white) 0 1px, var(--color-inverse) 1px calc(100% - 1px), color-mix(in srgb, var(--color-inverse) 70%, black) calc(100% - 1px));\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 dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }