{ "id": "v1-hp-3333", "long_id": "v1.home-pages-90s.portal.s03.p03.t03.u03", "name": "Personal home page: the free graphics page, 2000", "era": { "slug": "home-pages-90s", "code": "hp", "name": "Personal home pages", "years": [ 1996, 2001 ], "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts." }, "archetype": "portal", "mode": "pure", "viewport": { "width": 800, "fluid": false }, "summary": "A \"free stuff for your home page\" site as hobbyists ran them between 1996 and 2001, built to look like two frames: a narrow menu frame of bevelled bars at the left on its own fill, a frame border, and the main frame on a tiled brick wall. Text is small white Verdana on deep navy with heavy uppercase orange and gold headings, sky-blue underlined links, raised 2px boxes with hard black shadows and glossy gradient bars and buttons. Shelves of downloads, numbered lessons, awards, a web ring and a submit-your-site form are its content; the kind faded when hosts and search engines took over after 2001.", "url": "https://chrono.skin/s/v1-hp-3333", "preview_url": "https://chrono.skin/s/v1-hp-3333/specimen.html", "files": { "STYLE.md": "# Personal home page: the free graphics page, 2000\n\n## Summary\n\nA \"free stuff for your home page\" site as hobbyists ran them between 1996 and 2001, built to look like two frames: a narrow menu frame of bevelled bars at the left on its own fill, a frame border, and the main frame on a tiled brick wall. Text is small white Verdana on deep navy with heavy uppercase orange and gold headings, sky-blue underlined links, raised 2px boxes with hard black shadows and glossy gradient bars and buttons. Shelves of downloads, numbered lessons, awards, a web ring and a submit-your-site form are its content; the kind faded when hosts and search engines took over after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 784px, centred in an 800px window. `.ds-page__frame` is a two-column grid: `.ds-nav`, the `--size-menu` (150px) menu frame, and `.ds-page__body`, the main frame. Nothing is wider than its frame.\n- The menu frame is filled with `--fill-bar-alt`, lettered in `--color-bar-alt-text`, runs the full height of the page and ends in a `--border-width-strong` frame border in `--color-border-strong`. `.ds-nav__frame` inside it is sticky, so the menu stays in the window: the `.ds-brand` (mark over name), a tagline, `.ds-nav__links` (a column of bevelled bars), a search field, the visitor counter and the \"best viewed\" note.\n- The main frame has no fill: its content stands on `--fill-page`. It holds the views and, once, the `.ds-footer`.\n- The specimen is one example site, a free graphics collection, of four views.\n- Home view, `.ds-page__main`: the `.ds-hero` title box (the title at `--text-display`), the `.ds-stat` row of four figures, a `.ds-heading` bar over the `.ds-grid` of eight shelves (four to a row), `.ds-page__pair` (the `.ds-list` of updates at 3 parts, a `.ds-panel` at 2), the `.ds-construction` strip and a heading over the `.ds-awards`.\n- Inner pages drop the title box and figures. `.ds-page__inner` opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` (title and one line at the left, a button at the right, a rule under) and, for a shelf, the `.ds-tabs` folder tabs. Below it one column: table, page numbers, a rainbow rule, a bulleted list; or notices, form and message box. A lesson uses `.ds-page__columns`: `.ds-prose` and a `--size-side` (160px) `.ds-sidebar` at the right.\n- Views: `home`; `graphics` (a shelf: tabs, the table of sets with its badge key, page numbers, the rules); `tutorial` (a lesson with code, the sidebar, link states); `submit` (notices, the form, the confirm message box, the empty list of sites sent).\n- Spacing is tight: `--space-1` 2px strip padding and the gap between figures; `--space-2` 4px cell padding and the gap between menu bars; `--space-3` 6px box padding, the gap between shelves and under a heading bar; `--space-4` 10px frame padding above, gaps between buttons; `--space-5` 14px between blocks and columns and at the sides of the main frame; `--space-6` 22px list indent.\n- Fixed sizes: `--size-label` 130px, `--size-field` 220px, `--size-area` 320px, `--size-check` 14px, `--size-dialog` 340px, `--size-icon` 30px, `--size-award` 112px, `--size-date` 52px.\n\n## Typography and colour roles\n\nThe conventions for which text sits on which fill are those of the era's first layout: text, heading, link and status colours are legible on page, canvas, surfaces and the four fills; bars, the inverse, the accent and notices bring their own text colour; status colours as fills are lettered in `--color-canvas`. This layout adds one: the menu frame is `--fill-bar-alt`, so everything on it that is not a button uses `--color-bar-alt-text`.\n\n- `--font-body` Verdana 12px at line height 1.4, small print 10px. `--font-heading` Arial Black (weight 900), uppercase by `--heading-transform`: 14, 20 and 30px, the front-page title 44px with -1px tracking. `--font-ui` Arial 11px bold uppercase sets buttons, menu bars, table heads, tabs, the path and figure labels. `--font-mono` (Andale Mono, Courier New) sets code and the counter. Links in text are underlined; quiet links are not (`--link-decoration-quiet: none`).\n- `--color-page` navy `#00004d` under the bricks, `--color-surface` `#000066` for boxes and rows, `--color-surface-alt` `#1a1a80` alternate rows, `--color-surface-strong` `#33338f` inactive tabs, the closing row of a table and the ground between figures.\n- `--color-text` white; `--color-heading` orange `#ff9933` (titles, h1, h3); `--color-heading-alt` gold `#ffcc00` (figures, h2, dates, icons, form labels). Links sky `#66ccff`, visited lilac, hover yellow. `--color-accent-alt` aqua is the \"Updated!\" word and bullets.\n- `--fill-bar` orange with navy text is section heading bars, table heads, the current tab and the dialog title. `--fill-bar-alt` brick red with pale gold text is the menu frame and title strips. `--fill-inverse` white with navy text is awards, the counter and the current page number. `--fill-accent` gold with navy text is the pressed menu bar and the \"New!\" badge. `--color-fill-1` to `-4` (maroon, brown, teal, plum) are the shelves and the table swatches and carry white text and sky links.\n- Buttons are red `--color-button` with white text; the secondary is blue.\n- Surface: `--border-style` `outset`, 2px for boxes, 4px for the frame border, the title box, awards and the dialog. Boxes cast a hard 3px black shadow (`--shadow-panel`), the title box and dialog 5px, buttons 1px; nothing is blurred. `--shadow-text` is a 1px hard shadow on bars, titles and the name. Bars and buttons are top-lit gradients; `--fill-input` has a 2px inner shade; `--fill-page` is a 48 by 32px brick pattern over `--color-page`. Radius 0, no transitions.\n- Written literally: `outset` and `inset` bevels on buttons, menu bars, swatches and controls, `solid` row rules and the tab base line, italic for the tagline and lead lines, the `letter-spacing` of the counter (`--space-1`), and `.ds-blink`.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__frame` the two-frame grid; `.ds-page__body` the main frame; `.ds-page__main`, `.ds-page__inner` stack blocks; `.ds-page__head`; `.ds-page__columns` lesson plus sidebar; `.ds-page__pair` a 3 to 2 pair; `.ds-section` a heading bar with its block.\n- `.ds-nav`: the menu frame. `.ds-nav__frame` the sticky inner column; `.ds-nav__tagline`; `.ds-nav__links` with `.ds-nav__item` / `.ds-nav__link`, bars in `--fill-button` with an outset bevel; the bar of the view that shows is pressed in on `--fill-accent`; `.ds-nav__note` small print; `.ds-nav__count` the boxed counter.\n- `.ds-brand`: `.ds-brand__mark`, a tile dressed like the primary button, over `.ds-brand__name` at `--text-h3` (the frame is too narrow for the display size, which the front-page title uses). Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the title box with `--shadow-dialog`: `.ds-hero__title` at `--text-display`, `.ds-hero__lead`, `.ds-hero__action`, `.ds-hero__hint`.\n- `.ds-page-header`: `.ds-page-header__text` (`.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__action`.\n- `.ds-heading`: a section title on a full-width `--fill-bar` strip.\n- `.ds-rule`, `.ds-rule--short`, `.ds-rule--rainbow`: the rule and the six-step colour bar.\n- `.ds-construction` with `.ds-construction__text`; `.ds-blink`.\n- `.ds-prose`: running text (`h1` to `h3`, `p`, lists, `strong`, `code`), `.ds-prose__lead`, `.ds-prose__code` for markup to copy.\n- `.ds-link`: states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet`, `.ds-link--strong`, `.ds-link--plain` (links in the menu frame); `.ds-links`; `.ds-icon`.\n- `.ds-bullets`: `.ds-bullets__item`, `.ds-bullets__text`.\n- `.ds-button`: `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`; `.ds-buttons`.\n- `.ds-form`: `.ds-form__label`, `.ds-form__field`, `.ds-form__input` (`--short`, `is-error`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check`, `.ds-form__hint`, `.ds-form__error`, `.ds-form__actions`.\n- `.ds-table`: tight rows under a gradient head: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num`, `--group`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`, `.ds-table__swatch` (`--2`, `--3`, `--4`) a small sample square.\n- `.ds-stat`: the row; four `.ds-stat__item` cells, each a heavy `.ds-stat__value` in `--color-heading-alt` over an uppercase `.ds-stat__label`.\n- `.ds-list`: updates in a box with banded rows: `.ds-list__item` with a `.ds-list__meta` date and `.ds-list__body`; `.ds-list__more`.\n- `.ds-panel`: `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__text`, `.ds-panel__form` (also the search form of the menu frame). `.ds-ring` / `.ds-ring__item`: the web ring line.\n- `.ds-grid`: four shelves to a row: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a `.ds-grid__icon`, an uppercase `.ds-grid__title` link and `.ds-grid__text`.\n- `.ds-tabs`: folder tabs on a thick line: `.ds-tabs__item` / `.ds-tabs__tab`, the current one (`is-current`) taller and in `--fill-bar`.\n- `.ds-badge`: `.ds-badge--text`, `.ds-badge--count`, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`; `.ds-badges`.\n- `.ds-awards`, `.ds-award` (`.ds-award__star`, `.ds-award__title`, `.ds-award__text`).\n- `.ds-sidebar`: `.ds-sidebar__block` boxes with a `.ds-sidebar__title` strip and a `.ds-sidebar__list` of `.ds-sidebar__item` lines.\n- `.ds-notice`: `.ds-notice__label`, `.ds-notice--error`; `.ds-notices`.\n- `.ds-pagination`: `.ds-pagination__label`, `.ds-pagination__link` (`is-current` on `--fill-inverse`, `is-disabled`).\n- `.ds-breadcrumb`: `.ds-breadcrumb__item`, the last `is-current`.\n- `.ds-dialog`: the confirm message box in the page flow: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button.\n- `.ds-footer`: at the foot of the main frame: rainbow bar, `.ds-footer__links` / `.ds-footer__item`, `.ds-footer__mail`, `.ds-footer__note`, `.ds-footer__legal`.\n- `.ds-view`: one screen; `.ds-view--home` shows by default.\n\n## Never\n\n- `content-width <= 784px`: both frames fit an 800px window.\n- `font-size <= 44px`: the front-page title is the largest text.\n- `font-size >= 10px`: small print is 10px.\n- `font-weight >= 400`: regular, bold and black only.\n- `font-families <= 4`: Verdana, Arial Black, Arial and one monospace.\n- `border-radius <= 0px`: every box and button is square.\n- `box-shadow-blur <= 0px`: shadows are hard offsets.\n- `border-width <= 4px`: the frame border is the thickest line.\n- `transition = none`: nothing eases.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new page gets a bar in the menu frame; a new block in the main frame is a `.ds-heading` bar over a raised box; a new shelf is a `.ds-grid__cell`; a new figure joins `.ds-stat`. Keep the two frames, keep text small and bright on the dark tile, keep bars glossy and boxes square with hard shadows, and never add radius, blur, transitions or a menu across the top.\n", "components.css": "/* Layout tokens (structure part). A resources page of 2000 built in two\n frames: a 150px menu frame at the left on its own fill, a frame border,\n and the main frame beside it on the tiled page. 784px in all, tight\n 6px and 10px gaps. */\n:root {\n --size-page: 784px;\n --size-menu: 150px;\n --size-side: 160px;\n --size-label: 130px;\n --size-field: 220px;\n --size-area: 320px;\n --size-check: 14px;\n --size-dialog: 340px;\n --size-icon: 30px;\n --size-award: 112px;\n --size-date: 52px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 14px;\n --space-6: 22px;\n}\n\n/* ---------- shell: two frames side by side ---------- */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page__frame {\n display: grid;\n grid-template-columns: var(--size-menu) minmax(0, 1fr);\n box-sizing: border-box;\n width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n border-radius: var(--radius-page);\n}\n/* The main frame. */\n.ds-page__body {\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-page__main,\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* Section title: a heavy line of type on a bar that runs the width of the frame. */\n.ds-heading {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- nav: the menu frame ---------- */\n.ds-nav {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n text-align: center;\n}\n/* It stays in the window while the main frame scrolls. */\n.ds-nav__frame {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-3);\n}\n.ds-brand {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-alt-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--text-display);\n height: var(--text-display);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n font-size: var(--text-small);\n font-style: italic;\n}\n/* A column of bevelled bars, each one a picture button of its day. */\n.ds-nav__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n}\n.ds-nav__link {\n flex: 1;\n padding: var(--space-2) var(--space-1);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n}\n/* The page in the main frame: its bar is pressed in and takes the accent\n fill. One selector for each view, and the home bar when none is named. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#graphics:target) .ds-nav__link[href=\"#graphics\"],\n.ds-page:has(#tutorial:target) .ds-nav__link[href=\"#tutorial\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submit\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) inset var(--color-accent);\n box-shadow: none;\n}\n.ds-nav__note {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-nav__count {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) inset var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n letter-spacing: var(--space-1);\n}\n\n/* ---------- hero: the title box of the front page ---------- */\n.ds-hero {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n text-align: center;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-hero__hint {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: tight ruled rows of files ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border-top: var(--border-width) solid var(--color-border-muted);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: right;\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n background: var(--color-surface-strong);\n text-align: center;\n}\n.ds-table__desc {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-3) 0 0;\n font-size: var(--text-small);\n text-align: left;\n}\n/* A sample of a set: a small square of one of the four block colours. */\n.ds-table__swatch {\n display: inline-block;\n width: var(--space-5);\n height: var(--space-5);\n margin: 0 var(--space-2) 0 0;\n vertical-align: middle;\n background: var(--color-fill-1);\n border: var(--border-width) outset var(--color-border);\n}\n.ds-table__swatch--2 {\n background: var(--color-fill-2);\n}\n.ds-table__swatch--3 {\n background: var(--color-fill-3);\n}\n.ds-table__swatch--4 {\n background: var(--color-fill-4);\n}\n\n/* ---------- stats: one row of four cells, the number over its word ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-stat__item {\n padding: var(--space-2);\n background: var(--color-surface);\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- list: what is new, a date and a line ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr);\n column-gap: var(--space-3);\n align-items: baseline;\n padding: var(--space-2) var(--space-3);\n}\n.ds-list__item:nth-child(even) {\n background: var(--color-surface-alt);\n}\n.ds-list__meta {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n margin: 0;\n}\n.ds-panel__form {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n/* A web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n.ds-ring__item::before {\n content: \"<\";\n color: var(--color-text-muted);\n}\n.ds-ring__item::after {\n content: \">\";\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: the sets of graphics, four blocks to a row ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n min-width: 0;\n padding: var(--space-3) var(--space-2);\n background: var(--color-fill-1);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n color: var(--color-heading-alt);\n}\n.ds-grid__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: folder tabs on a thick line ---------- */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width-strong) solid var(--color-bar);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- sidebar: boxes at the right of a long page ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-sidebar__block {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item::before {\n content: \"\\00bb\\00a0\";\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__label {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-pagination__link {\n color: var(--color-link);\n text-decoration: underline;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n padding: 0 var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \">\";\n padding: 0 var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- footer: the foot of the main frame ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-5) 0 0;\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: var(--space-2) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__item + .ds-footer__item::before {\n content: \"-\";\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-footer__mail {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-footer__note {\n margin: 0;\n color: var(--color-heading-alt);\n}\n.ds-footer__legal {\n margin: 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- views: one screen of the example site shows at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- rules: the plain carved one and the rainbow bar ---------- */\n.ds-rule {\n box-sizing: border-box;\n width: 100%;\n height: 0;\n margin: 0 auto;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-rule--short {\n width: 60%;\n}\n/* Six hard steps of the palette's loudest colours, as a divider picture was. */\n.ds-rule--rainbow {\n height: var(--space-3);\n border: 0;\n background: linear-gradient(90deg, var(--color-danger) 0 16.66%, var(--color-warning) 16.66% 33.33%, var(--color-heading) 33.33% 50%, var(--color-success) 50% 66.66%, var(--color-link) 66.66% 83.33%, var(--color-link-visited) 83.33%);\n}\n\n/* ---------- under construction: a strip of diagonal stripes ---------- */\n.ds-construction {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2);\n background: repeating-linear-gradient(-45deg, var(--color-notice) 0 var(--space-4), var(--color-notice-text) var(--space-4) calc(var(--space-4) * 2));\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-construction__text {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- blink: a slow two-step dim, only when motion is welcome ---------- */\n@media (prefers-reduced-motion: no-preference) {\n .ds-blink {\n animation: ds-blink 1.6s steps(2, jump-none) infinite;\n }\n}\n@keyframes ds-blink {\n from { opacity: 1; }\n to { opacity: 0.6; }\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n/* A link on a bar, a notice or another coloured fill takes that fill's text colour. */\n.ds-link--plain,\n.ds-link--plain:visited,\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n color: inherit;\n text-decoration: underline;\n}\n.ds-links {\n margin: 0 0 var(--space-4);\n}\n/* The little drawing before an e-mail link or over a picture link. */\n.ds-icon {\n display: inline-block;\n width: var(--text-large);\n height: var(--text-large);\n vertical-align: middle;\n color: var(--color-accent-alt);\n}\n.ds-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* ---------- bullets: a link list with coloured diamonds ---------- */\n.ds-bullets {\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: left;\n}\n.ds-bullets__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-bullets__item::before {\n content: \"\";\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-accent-alt);\n transform: rotate(45deg);\n}\n.ds-bullets__item:nth-child(3n+2)::before {\n background: var(--color-heading-alt);\n}\n.ds-bullets__item:nth-child(3n)::before {\n background: var(--color-warning);\n}\n.ds-bullets__text {\n min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n text-align: left;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n text-align: center;\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li::marker {\n color: var(--color-accent-alt);\n}\n.ds-prose strong {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose__lead {\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n text-align: center;\n}\n/* A block of markup to copy. */\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: pre-wrap;\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: default;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-pressed {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-button-secondary);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n/* Destructive action: the danger colour as the fill, the sheet colour as the label. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-canvas);\n border-color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled);\n box-shadow: none;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-3);\n row-gap: var(--space-3);\n align-items: baseline;\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-form__label {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n transition: var(--transition);\n}\n.ds-form__input {\n width: var(--size-field);\n max-width: 100%;\n}\n.ds-form__input--short {\n width: calc(var(--size-field) / 2);\n}\n.ds-form__textarea {\n display: block;\n width: var(--size-area);\n max-width: 100%;\n font-family: var(--font-mono);\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__check {\n appearance: none;\n box-sizing: border-box;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-2) 0 0;\n padding: var(--space-1);\n vertical-align: middle;\n background-color: var(--color-input);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-input-text);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding: var(--space-2) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* The usual mark beside a link: a loud italic word with no box. */\n.ds-badge--text {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n font-style: italic;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n/* Status labels: the status colour as the fill, the sheet colour as the word. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-canvas);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-canvas);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badges {\n display: block;\n padding: 0 0 var(--space-2);\n}\n\n/* ---------- award: a prize picture drawn as a bordered badge ---------- */\n.ds-awards {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-award {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-award);\n padding: var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n text-align: center;\n}\n.ds-award__star {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-award__star svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-award__title {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-award__text {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__label {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n position: static;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__body {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-3);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-3) var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: free graphics for your home page, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n Free stuff for your home page since 1998\n \n
\n \n \n
\n

You are visitor
0148203

\n

Best viewed at 800x600 with frames turned on. No frames?

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

Free Graphics!

\n

Over 2,600 backgrounds, buttons, bullets and bars for your home page. No charge, no catch, just link back.

\n
\n Get the Graphics\n Add Your Site\n
\n

Updated every Friday. Last update: 12 May 2000. 40 new this week

\n
\n\n
    \n
  • 1,240 backgrounds
    • \n
  • 860 buttons
    • \n
  • 415 bars and bullets
    • \n
  • 96 lessons and tips
    • \n
\n\n
\n

Pick a Shelf

\n
\n
\n \n

Backgrounds

\n

1,240 tiles in 31 sets

\n
\n
\n \n

Buttons

\n

860 in 22 sets

\n
\n
\n \n

Bullets

\n

230 dots, stars and gems

\n
\n
\n \n

Bars

\n

185 rainbow and plain

\n
\n
\n \n

Animations

\n

64 that spin or flash

\n
\n
\n \n

Counters

\n

12 styles of digits

\n
\n
\n \n

HTML Help

\n

96 lessons, plain words

\n
\n
\n \n

Your Sites

\n

pages that use our stuff

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

What's New

\n \n

All the updates...

\n
\n
\n

The Free Graphics Ring

\n
\n

chronoskin is site 4 of 76 in this ring of free graphics pages.

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

Under construction: the sound shelf opens in June

\n\n
\n

Awards We Have Won

\n
\n
Best Free Stuff1999
\n
Webmaster's PickMarch 2000
\n
Fast Loadingunder 30 K
\n
Top 100 Resourcesno. 37
\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Free Graphics

\n

Right-click a set, save it, and upload it to your own space.

\n
\n
\n How to Use Them\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: Seamless tiles with no join Big slow on a modem Broken zip being mended New! added this week\n Please do not link straight to our files. Here is how to save them\n
SetNoteTilesZip, KSaved
Brick Walls New! Red, brown and painted brick.Seamless242121,804
Night Skies Stars, moons and one comet.Seamless40969,317
Marble and Stone Photographed from real slabs.Big366402,251
Wood and Cork For notice boards and cabins.Seamless18154987
Checks and Tartans Loud. You have been warned.Broken3003,120
Made a set of your own? Send it in and we will put your name on it.
\n\n
    \n
  1. 31 sets, page:
    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\n
\n

The Rules

\n
    \n
  • Free for personal home pages. Tell us where you used them
    • \n
  • Save the files to your own space; do not link to ours.
    • \n
  • A link back to chronoskin is all we ask.
    • \n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

HTML Help

\n

Lesson 96: putting a tiled background on your page.

\n
\n
\n Get a Background\n
\n
\n
\n\n
\n
\n

Tiling a background

\n

Ten minutes, one small picture, and your page has wallpaper.

\n

A background is a small picture that the browser repeats across and down the window. You name it in the body tag and the browser does the rest.

\n

What you need

\n
    \n
  • a tile from our shelves, saved as bricks.gif;
    • \n
  • your page, open in a text editor;
    • \n
  • somewhere to upload both files.
    • \n
\n

The one line to type

\n 
<body background=\"bricks.gif\"\n      bgcolor=\"#000066\" text=\"#ffffff\">
\n

Always give a bgcolor near the colour of the tile, so your words can be read while the picture loads.

\n

Check your link colours

\n

\n A link not yet followed,\n a visited one,\n one under the pointer,\n one being clicked,\n a bold link and\n a small link.\n

\n

Stuck?

\n

Send the address of your page with the site form and we will have a look.

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

Add Your Site

\n

Used our graphics? Get your page into the list of 1,900.

\n
\n
\n Back to the Front\n
\n
\n
\n\n
\n

Note: we look at every page by hand, so allow a week.

\n

Not sent! The site name is missing. Please fill it in and send again.

\n
\n\n
\n \n
\n \n Every site needs a name.\n
\n \n
\n \n (the page that links back)\n
\n \n
\n \n
\n Promise:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Send this site?

\n

You are about to send \"My Home Page\" to the shelf of personal home pages. Is the address right?

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

Sites You Have Sent

\n
\n

None yet!

\n

Sites you send from this computer are listed here while we look at them.

\n Get Some Graphics First\n
\n
\n\n
\n
\n\n \n\n
\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.portal.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\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-hp-3333\",\n \"short\": \"v1-hp-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #00004d;\n --color-canvas: #000033;\n --color-surface: #000066;\n --color-surface-alt: #1a1a80;\n --color-surface-strong: #33338f;\n --color-bar: #ff6600;\n --color-bar-text: #000033;\n --color-bar-alt: #800000;\n --color-bar-alt-text: #ffcc66;\n --color-inverse: #ffffff;\n --color-inverse-text: #000066;\n --color-text: #ffffff;\n --color-text-muted: #b3b3d9;\n --color-heading: #ff9933;\n --color-heading-alt: #ffcc00;\n --color-link: #66ccff;\n --color-link-quiet: #ffcc99;\n --color-link-visited: #cc99ff;\n --color-link-hover: #ffff00;\n --color-link-active: #ff3300;\n --color-border: #9999cc;\n --color-border-strong: #ff6600;\n --color-border-muted: #333380;\n --color-accent: #ffcc00;\n --color-accent-text: #000033;\n --color-accent-alt: #00ffcc;\n --color-fill-1: #800000;\n --color-fill-2: #804000;\n --color-fill-3: #005c5c;\n --color-fill-4: #4d004d;\n --color-button: #cc3300;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffff00;\n --color-button-secondary: #333399;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000033;\n --color-input-border: #9999cc;\n --color-disabled: #333366;\n --color-disabled-text: #8c8cb3;\n --color-danger: #ff5050;\n --color-danger-surface: #4d0000;\n --color-success: #33ff66;\n --color-warning: #ffaa00;\n --color-notice: #ffe0b3;\n --color-notice-text: #000033;\n --color-focus: #ffff00;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 51, 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Arial Black\", \"Arial Bold\", Gadget, Impact, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Andale Mono\", \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 15px;\n --text-display: 44px;\n --text-h1: 30px;\n --text-h2: 20px;\n --text-h3: 14px;\n --line-body: 1.4;\n --line-heading: 1.05;\n --line-display: 0.95;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 900;\n --weight-display: 900;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: -1px;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 4px;\n --border-style: outset;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 3px 3px 0 var(--color-shadow);\n --shadow-control: 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 2px 2px 0 var(--color-shadow);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: 5px 5px 0 var(--color-shadow);\n --shadow-text: 1px 1px 0 var(--color-shadow);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M0 0h48v2H0zM0 16h48v2H0zM11 2h2v14h-2zM35 18h2v14h-2z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 2h11v1H0zM13 2h35v1H13zM0 18h35v1H0zM37 18h11v1H37z' fill='%23000000' fill-opacity='.3'/%3E%3C/svg%3E\") var(--color-page);\n --fill-bar: linear-gradient(color-mix(in srgb, var(--color-bar) 60%, white), var(--color-bar) 45%, color-mix(in srgb, var(--color-bar) 72%, black));\n --fill-bar-alt: linear-gradient(color-mix(in srgb, var(--color-bar-alt) 72%, white), var(--color-bar-alt) 45%, color-mix(in srgb, var(--color-bar-alt) 72%, black));\n --fill-inverse: linear-gradient(90deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 78%, black));\n --fill-accent: linear-gradient(color-mix(in srgb, var(--color-accent) 60%, white), var(--color-accent));\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(color-mix(in srgb, var(--color-button) 65%, white), var(--color-button) 50%, color-mix(in srgb, var(--color-button) 75%, black));\n --fill-button-hover: linear-gradient(color-mix(in srgb, var(--color-button) 75%, black), var(--color-button) 50%, color-mix(in srgb, var(--color-button) 65%, white));\n --fill-button-secondary: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 65%, white), var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary) 75%, black));\n --fill-input: linear-gradient(color-mix(in srgb, var(--color-input) 80%, black) 0 2px, var(--color-input) 2px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }