{ "id": "v1-wl-73a2", "long_id": "v1.weblogs-2000s.landing.s07.p03.t10.u02", "name": "Weblog service front door, 2005", "era": { "slug": "weblogs-2000s", "code": "wl", "name": "Weblogs", "years": [ 2002, 2007 ], "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The front page of a weblog-hosting service as such services looked between 2003 and 2007: a rounded sheet standing clear of a grey-green page, a thin member strip, the brand (mark and site name) with a row of small tabs beside it, and under them a pitch with a sign-up box, four numbered steps, a line of counters and three equal columns of lists. Text is 13px Arial under bold, tightly set Arial headings, with Tahoma for every control; corners are eased by 4 to 10 pixels, lines are 1px, bars and buttons are faintly shaded from a lighter top and nothing but a dialog casts a shadow. It was how the services that gave away weblogs introduced themselves once CSS layouts and image-free rounded boxes became usual.", "url": "https://chrono.skin/s/v1-wl-73a2", "preview_url": "https://chrono.skin/s/v1-wl-73a2/specimen.html", "files": { "STYLE.md": "# Weblog service front door, 2005\n\n## Summary\n\nThe front page of a weblog-hosting service as such services looked between 2003 and 2007: a rounded sheet standing clear of a grey-green page, a thin member strip, the brand (mark and site name) with a row of small tabs beside it, and under them a pitch with a sign-up box, four numbered steps, a line of counters and three equal columns of lists. Text is 13px Arial under bold, tightly set Arial headings, with Tahoma for every control; corners are eased by 4 to 10 pixels, lines are 1px, bars and buttons are faintly shaded from a lighter top and nothing but a dialog casts a shadow. It was how the services that gave away weblogs introduced themselves once CSS layouts and image-free rounded boxes became usual.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (760px) wide, centred, in `--color-canvas` on `--fill-page`, outlined on all four sides with a 1px `--color-border-strong` line, rounded by `--radius-page` and standing `--space-6` clear of the top of the window. No text is ever placed on the page outside the sheet. Never widen it and never let it stretch.\n- Order from the top, all inside the sheet: `.ds-nav` (the `.ds-nav__strip` in `--fill-bar-alt` with one line for visitors left and the sign-in link right; then `.ds-nav__head` with the `.ds-brand` at the left and the `.ds-nav__menu` tabs at the right, standing on a `--border-width-strong` rule in `--color-bar`), the view, and the `.ds-footer`. There is no navigation bar: the menu is four or five small tabs beside the name.\n- The home view has no sidebar. Inside `.ds-page__body` (`--space-6` of padding on every side) it is a stack of full-width blocks `--space-6` apart: the `.ds-hero` (pitch at the left, sign-up box `--size-box` 250px wide at the right, in one outlined box), the `.ds-grid` of four numbered steps, the `.ds-stats` line, and last `.ds-page__thirds`: three equal columns `--space-6` apart, two of lists and one `.ds-panel`. Each block below the hero opens with a `.ds-page__label`, a heading on a hairline.\n- Inner pages keep the sheet, the strip, the name with its tabs and the footer. The hero is not used. A `.ds-breadcrumb` strip sits directly under the header's rule, across the sheet. A page about one thing (a tour page, the sign-up form) uses `.ds-page__columns`: `.ds-page__main` at the left and `.ds-sidebar` at `--size-side` (200px) at the right, `--space-6` apart; the main column opens with `.ds-page-header` (22px title, one muted line, one button at the right, a 1px rule below), then the text or the notices and the form, and the dialog last. A page that is a listing (the directory) drops the sidebar and runs the full width: page header, `.ds-tabs` with the table in `.ds-tabs__body`, `.ds-pagination` at the right, then `.ds-page__thirds` for what belongs under the table. Tabs stand on their own rule under the page header, never in the header.\n- Views: the specimen is one weblog service with four views. `home` is the front door: the pitch and the address box, the four steps, the counters, the lists of weblogs just updated and most read, and the news panel. `tour` is one page of the tour: the text, the table that compares the free and the paid plan, links onward and the sidebar of tour pages. `weblogs` is the directory under one subject: tabs over the table of weblogs, pagination, the other subjects with their counts, what the states mean and an empty subject. `signup` is the form that makes a weblog, under the notices that answer it, with the buttons, and the dialog that Start over opens. The tabs link to all four; rows and titles lead to the directory, buttons to the form.\n- Spacing scale: `--space-1` 2px is the gap between tabs and between a title and its meta line; `--space-2` 4px is the padding of buttons, inputs, tabs, table cells and strips; `--space-3` 8px is the padding of list rows and notices and the gap between buttons; `--space-4` 12px is the padding of panels, grid cells and the dialog, the grid gap and the gap between paragraphs; `--space-5` 16px is the padding of the form and the sign-up box and the gap between sidebar blocks; `--space-6` 24px is the padding of the sheet and the pitch, the gap between blocks and between columns; `--space-7` 32px is the page left under the sheet.\n- Fixed sizes: `--size-label` 120px is the label column of a form, `--size-field` 240px a text input, `--size-num` 76px a numeric table column, `--size-dialog` 360px a dialog.\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- `--font-body` is \"Lucida Grande\" (then Verdana, Arial) at `--text-base` 11px with `--line-body` 1.5; `--text-small` 10px is meta lines, sidebars and tables.\n- `--font-heading` is Georgia, bold and set tight (`--weight-heading` and `--weight-display` 700, `--heading-tracking` and `--display-tracking` -1px): `--text-display` 25px, `--text-h1` 24px, `--text-h2` 15px, `--text-h3` 11px. Big, heavy serif titles over very small sans text are the character of this set.\n- `--font-ui` is Verdana at `--text-ui` 10px, bold and in capitals (`--weight-ui` 700, `--ui-transform` uppercase): navigation, tabs and buttons read as small labels.\n- Links in running text are underlined (`--link-decoration` underline) and lose the underline on hover; quiet links, titles and navigation are not underlined. `--font-mono` is Courier New.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Everything goes in `.ds-page__frame`; the content of a view in `.ds-page__body`. `.ds-page__section` is a block with `--space-6` under it (`--last` drops the gap); `.ds-page__label` is the heading on a hairline over a block, with an optional `.ds-page__more` link at its right. `.ds-page__thirds` lays three blocks out in equal columns; `.ds-page__columns` holds `.ds-page__main` and the sidebar on an inner page.\n- `.ds-view`: one screen of the example site. The specimen holds its views side by side in the markup and shows one at a time: the view named in the address, or the `.ds-view--home` view when none is named. In a real project each view is a page of its own; drop the class there.\n- `.ds-brand`: the site's mark and name, at the left of the header beside the menu; a link to the home page. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the same mixed 1px edge, `--radius-control`, `--shadow-control`), 1.1 times `--text-display` on a side and never less than 2.2 times `--text-base`, so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at 0.8 of `--text-display` with `--weight-display` and `--display-tracking`, in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo; keep the classes and swap the text and the drawing.\n- `.ds-nav`: site header, written once above the views. `.ds-nav__strip` is the thin member strip with `.ds-nav__strip-link`; `.ds-nav__head` holds the `.ds-brand` and `.ds-nav__menu`, a row of `.ds-nav__link` tabs in `--color-surface-strong` with rounded top corners. The current tab is filled with `--fill-bar`: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href`.\n- `.ds-breadcrumb`: pale 11px strip under the header: underlined `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep`, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the front page's pitch, once, at the top of the home view: one outlined box in `--color-fill-1`. `.ds-hero__pitch` holds `.ds-hero__title` (30px), `.ds-hero__lead` (15px), a `.ds-hero__points` list of three `.ds-hero__point` lines and `.ds-hero__actions` with the one `.ds-button--large` and a text link. `.ds-hero__box` at the right is the sign-up box: `.ds-hero__box-title`, a `.ds-hero__box-label`, one input, `.ds-hero__box-note` lines and two small buttons. It is not a full-width banner and carries no picture.\n- `.ds-page-header`: the head of an inner page, used instead of the hero and never with it: `.ds-page-header__main` holds the `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button or one text link. A 1px rule closes it.\n- `.ds-stat`: one counter: a `.ds-stat__value` (22px bold, `--color-heading-alt`) over a `.ds-stat__label` (11px muted), centred. Three to five sit in a `.ds-stats` row: one white outlined box, the cells equal and divided by faint vertical rules. Do not make the cells separate cards.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, square-bulleted lists with accent markers, `code` on a pale ground. Use it for tour and help pages.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the grey-green meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: filled button with a shaded face, bold Tahoma. `.ds-button--large` is the hero's action, one to a page. `.ds-button--secondary` is the pale button for the second choice. `.ds-button--danger` is the destructive action (start over, clear): the pale button lettered and outlined in `--color-danger`, never filled with it. `disabled` or `is-disabled` greys it; `is-hover` lightens the face (`--fill-button-hover`); `is-active` presses it with `--shadow-control-pressed`. Group with `.ds-buttons`.\n- `.ds-form`: a pale outlined box with `.ds-form__title` and rows (`.ds-form__row`) of a bold `.ds-form__label` and a `.ds-form__field`. Controls take `.ds-form__input` (`--wide` full width, `--auto` for selects and short fields); `.ds-form__affix` sets a field beside the fixed part of an address; `is-invalid` plus `.ds-form__error` marks a validation error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` is the row of buttons on a rule that closes the form, and it wraps.\n- `.ds-table`: data table at 11px: `--fill-bar` head row in Tahoma, 1px outline, rows divided by `--color-border-muted`, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row, `.ds-table__title` for the bold link that names a row.\n- `.ds-list`: rows divided by faint rules, each `.ds-list__item` with a bold `.ds-list__title` link, an optional `.ds-list__excerpt` and a `.ds-list__meta` line. `.ds-list--ranked` on an `
    ` puts the row's place before it in `--color-heading-alt`.\n- `.ds-panel`: outlined, shaded box with a `.ds-panel__title` strip and a `.ds-panel__body` of `.ds-panel__text` paragraphs; `.ds-panel__date` is the small date over a news item. One to a page, for news or an aside.\n- `.ds-grid`: four `.ds-grid__cell` boxes across, tinted with the four fills (`--2`, `--3`, `--4`), each with a `.ds-grid__num` (the step's number on the accent fill), a `.ds-grid__title` and a `.ds-grid__text`. For steps and feature lists; without the number it serves as a row of link boxes.\n- `.ds-tabs`: row of `.ds-tabs__tab` links with rounded top corners standing on a 1px rule; `is-current` is in the sheet's colour and joined to the content below, which goes in `.ds-tabs__body`.\n- `.ds-badge`: small rounded count on the accent fill. `.ds-badge--alt` is a bare coloured word (\"new\", \"up 3\"); `.ds-badge--tag` is a quiet outlined count or tag. Status labels are `.ds-badge--success` (active, free), `.ds-badge--warning` (quiet, pending) and `.ds-badge--danger` (closed, failed): a white label with a 1px outline and bold word, both in the status colour.\n- `.ds-sidebar`: right column of an inner page at 11px. Each `.ds-sidebar__block` is a white outlined box with a `.ds-sidebar__title` strip in `--fill-bar-alt` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows with `.ds-sidebar__link` (`is-current` for the page you are on) and optional `.ds-sidebar__count`; `.ds-sidebar__text` is a paragraph.\n- `.ds-notice`: boxed message in `--color-notice` with a 1px `--color-border-strong` outline, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and outline on `--color-danger-surface`. Stack several in `.ds-notices`.\n- `.ds-pagination`: right-aligned row of small boxed `.ds-pagination__link` items: previous, numbers, next. `is-current` is filled like a bar; `is-disabled` is faded.\n- `.ds-dialog`: a white outlined box with a `--fill-bar` `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. It sits in the page flow on `.ds-dialog__backdrop` (the overlay colour) and is the one thing that casts `--shadow-dialog`.\n- `.ds-empty`: pale outlined box with a centred `.ds-empty__text` and one secondary button.\n- `.ds-footer`: the inverted strip that closes the sheet: one `.ds-footer__row` with a copyright line left and `.ds-footer__links` of underlined `.ds-footer__link` items right, and a fainter `.ds-footer__note` line under it.\n- `ds-accordion`: a sidebar list that opens and closes, a details element whose summary holds the block title.\n- `ds-progress`: a native progress bar for a meter such as weeks left or frames used.\n\n## Never\n\n- `block-gap <= 32px`: blocks sit 24px apart, never further.\n- `content-width <= 780px`: a fixed centred sheet; the page does not stretch with the window.\n- `font-size <= 25px`: the largest title measured is 25px.\n- `font-size >= 9px`: the smallest text measured is 9px; the set itself stops at 10px.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 4`: Lucida Grande, Georgia, Verdana for controls and a monospace.\n- `line-height >= 1.3`: body text is set at 1.5.\n- `line-height <= 1.6`: and never looser.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: boxes are told apart by dotted lines and flat tints.\n- `text-shadow = none`: text is flat, also on strips.\n- `gradient-fills <= 0%`: strips and buttons are one flat colour.\n- `border-width <= 2px`: lines are 1px; control bevels and emphasis rules are 2px.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new boxed block copies `.ds-panel` (1px `--color-border` outline, `--radius-panel`, `--color-surface-strong` title strip, `--space-4` padding), a new row type copies `.ds-list__item` (faint rule below, `--space-3` padding), a new strip copies `.ds-sidebar__title`, a new tinted box copies `.ds-grid__cell`, a new pitch copies `.ds-hero`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`; if a size is missing, take the nearest step of the scale rather than a new number. Text on a fill uses the token paired with it: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-accent-text` on `--fill-accent`, `--color-inverse-text` on `--fill-inverse`, and `--color-text` or `--color-heading` on surfaces and the four fills. Keep the home page free of a sidebar, keep one large button to a page, and separate blocks by a caption on a hairline before reaching for another box.\n", "components.css": "/* Layout tokens (structure part). A weblog-hosting service's front door, 2004 to 2006. */\n:root {\n --size-page: 760px;\n --size-side: 200px;\n --size-box: 250px;\n --size-label: 120px;\n --size-field: 240px;\n --size-num: 76px;\n --size-dialog: 360px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --space-7: 32px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) 0 var(--space-7);\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/* The sheet: a fixed centred card that stands clear of the top of the window. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n/* Everything between the header and the footer sits in this padding. */\n.ds-page__body {\n padding: var(--space-6);\n}\n.ds-page__section {\n margin: 0 0 var(--space-6);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n}\n/* The caption over a block: a heading on a rule, with an optional link at the right. */\n.ds-page__label {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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 color: var(--color-heading);\n}\n.ds-page__more {\n flex: none;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n/* Three equal columns: the front page's lists. */\n.ds-page__thirds {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: start;\n}\n/* Inner pages: the text and a narrow column at the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-page__main {\n min-width: 0;\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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- nav: the member strip, then the name with the menu beside it ---------- */\n.ds-nav {\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\n}\n.ds-nav__strip {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-nav__strip-link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-nav__strip-link:hover,\n.ds-nav__strip-link.is-hover {\n text-decoration: none;\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6) 0;\n}\n/* The site's mark and name. The tile is dressed like the primary button, so every token set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\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: max(calc(var(--text-display) * 1.1), calc(var(--text-base) * 2.2));\n height: max(calc(var(--text-display) * 1.1), calc(var(--text-base) * 2.2));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) solid color-mix(in srgb, var(--color-button), var(--color-shadow) 40%);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: max(calc(var(--text-display) * 0.8), var(--text-h1));\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}\n/* The menu: tabs that stand on the header's thick rule. */\n.ds-nav__menu {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item is filled like the rule it stands on. One selector per view. */\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(#tour:target) .ds-nav__link[href=\"#tour\"],\n.ds-page:has(#weblogs:target) .ds-nav__link[href=\"#weblogs\"],\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#signup\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n list-style: none;\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the pitch at the left, the sign-up box at the right ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-box);\n margin: 0 0 var(--space-6);\n overflow: hidden;\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__pitch {\n padding: var(--space-6);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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 color: var(--color-heading);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__points {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-5);\n list-style: square;\n}\n.ds-hero__point::marker {\n color: var(--color-accent);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n}\n/* The box that starts a weblog: a name, a button and a line of small print. */\n.ds-hero__box {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-hero__box-title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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 color: var(--color-heading-alt);\n}\n.ds-hero__box-label {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__box-note {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- page header: the title line of an inner page ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-1);\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 color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats: the service's counters, one row of centred figures ---------- */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n background: var(--color-surface);\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-stat {\n flex: 1;\n min-width: 0;\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: center;\n}\n.ds-stat:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\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 color: var(--color-heading-alt);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\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 color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n color: var(--color-heading-alt);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\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 ul {\n list-style: square;\n}\n.ds-prose li::marker {\n color: var(--color-accent);\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-small);\n color: var(--color-heading);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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-2) var(--space-4);\n border: var(--border-width) solid color-mix(in srgb, var(--color-button), var(--color-shadow) 40%);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-align: center;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\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/* The one large button of a page: the hero's action. */\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 30%);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n/* Destructive action: the secondary button, lettered and outlined in the error colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n border-color: var(--color-danger);\n background: var(--fill-button-secondary);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-disabled);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\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-form__title {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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 color: var(--color-heading);\n}\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: none;\n box-sizing: border-box;\n width: var(--size-label);\n padding: var(--space-2) var(--space-3) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-form__field {\n flex: 1;\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-2);\n border: var(--border-width) solid var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\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__input.is-invalid {\n border-color: var(--color-danger);\n}\n/* An address field: the input with the fixed part of the address after it. */\n.ds-form__affix {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding-top: var(--space-1);\n font-size: var(--text-small);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n/* The buttons stand on a rule that closes the form, from its left edge; they wrap when a type set makes them wide. */\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-table th {\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-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n vertical-align: top;\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n width: var(--size-num);\n text-align: right;\n}\n.ds-table__group td {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-table__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- list: weblogs, one to a row ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: ds-rank;\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__excerpt {\n margin: var(--space-1) 0 0;\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* A ranked list: each row opens with its place. */\n.ds-list--ranked .ds-list__item {\n display: grid;\n grid-template-columns: var(--space-6) minmax(0, 1fr);\n counter-increment: ds-rank;\n}\n.ds-list--ranked .ds-list__item::before {\n content: counter(ds-rank);\n grid-row: 1 / span 3;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading-alt);\n}\n.ds-list--ranked .ds-list__item > * {\n grid-column: 2;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n overflow: hidden;\n background: var(--fill-panel);\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-2) var(--space-4);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n color: var(--color-heading);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__date {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: the numbered steps, four across ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-4);\n background: var(--color-fill-1);\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-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/* The step's number, on the accent fill. */\n.ds-grid__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h1) * 1.3);\n height: calc(var(--text-h1) * 1.3);\n margin: 0 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: 1;\n font-family: var(--font-heading);\n padding-bottom: calc(var(--figure-shift) * 2);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n color: var(--color-link-quiet);\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 text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n border-bottom-color: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-tabs__body {\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\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 vertical-align: baseline;\n}\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n.ds-badge--tag {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n/* Status labels: outlined and lettered in the status colour. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) currentColor;\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n\n/* ---------- sidebar: boxed blocks at the right of an inner page ---------- */\n.ds-sidebar {\n min-width: 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: 0 0 var(--space-5);\n overflow: hidden;\n background: var(--color-surface);\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-sidebar__block:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) 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-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__link.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n padding: var(--space-3);\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-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n color: var(--color-notice-text);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-bar);\n border-color: var(--color-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a boxed question in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\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 line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-4);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n color: var(--color-text-muted);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n.ds-footer__note {\n margin: var(--space-2) 0 0;\n opacity: 0.8;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-base) * 0.7);\n height: calc(var(--text-base) * 0.7);\n margin-left: var(--space-2);\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n display: block;\n flex: 1 1 auto;\n margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-progress {\n display: block;\n width: 100%;\n height: var(--space-3);\n margin-top: var(--space-1);\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\n}\n.ds-progress::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress::-webkit-progress-value {\n background: var(--fill-bar);\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, weblog service specimen\n\n\n\n\n
    \n\n
    \n

    \n Free weblogs since 2002. 312 were updated in the last hour.\n Already writing here? Sign in\n

    \n
    \n \n \n chronoskin\n \n \n
    \n
    \n\n \n
    \n
    \n\n
    \n
    \n

    Your own weblog, five minutes from now

    \n

    Write in your browser, press one button, and it is on the web under your own address.

    \n
      \n
    • Nothing to install and nothing to pay.
      • \n
    • Comments, archives and a feed are built in.
      • \n
    • Twelve templates, or bring your own stylesheet.
      • \n
    \n
    \n Start your weblog\n or take the tour first »\n
    \n
    \n
    \n

    Is your name free?

    \n \n \n

    lowtide.chronoskin.example free

    \n
    \n Take it\n \n
    \n

    Letters and digits, three to twenty of them.

    \n
    \n
    \n\n
    \n

    How it works

    \n
    \n
    \n 1\n

    Name it

    \n

    Choose an address and a title. Both can change later.

    \n
    \n
    \n 2\n

    Dress it

    \n

    Pick one of twelve templates and set its colours.

    \n
    \n
    \n 3\n

    Write

    \n

    Type an entry, add a link or two, press Publish.

    \n
    \n
    \n 4\n

    Be read

    \n

    Your feed and your place in the directory are automatic.

    \n
    \n
    \n
    \n\n
    \n
      \n
    • 41,208 weblogs kept here
      • \n
    • 1,264,900 entries published
      • \n
    • 2,730 updated today
      • \n
    • 96 started today
      • \n
    \n
    \n\n
    \n
    \n

    Just updated all »

    \n \n
    \n
    \n

    Most read this week

    \n
      \n
    1. \n The lighthouse keeper's log\n

      18,400 readers up 3

      \n
      2. \n
    2. \n Things my students said\n

      15,120 readers

      \n
      3. \n
    3. \n Notes from the allotment\n

      9,870 readers new

      \n
      4. \n
    4. \n Small repairs\n

      7,340 readers

      \n
      5. \n
    5. \n A year of night buses\n

      6,905 readers

      \n
      6. \n
    6. \n Second-hand cookbooks\n

      5,210 readers

      \n
      7. \n
    \n
    \n
    \n

    News from the service 2

    \n
    \n

    14 March 2005 Three new templates, two of them with a column at each side.

    \n

    9 March 2005 Posting by e-mail now works for every weblog, free or not.

    \n

    2 March 2005 Comment feeds, one for each entry. Nothing to switch on.

    \n

    Take the tour

    \n
    \n
    \n
    \n\n
    \n
    \n\n \n
    \n
      \n
    1. Home
      2. \n
    2. ›
      3. \n
    3. Tour
      4. \n
    4. ›
      5. \n
    5. Writing and publishing
      6. \n
    \n
    \n
    \n
    \n\n
    \n
    \n

    Writing and publishing

    \n

    Part two of five. What happens between a blank box and a page on the web.

    \n
    \n
    Start your weblog
    \n
    \n\n
    \n
    \n

    One box, one button

    \n

    An entry is a title and some text. You type it into a plain box in your browser, and when you press Publish the front page, the entry's own page, the month's archive and the feed are all rebuilt for you.

    \n

    Nothing is lost if you close the window: drafts are kept every minute, and a published entry can be edited for as long as the weblog exists.

    \n

    What every weblog has

    \n
      \n
    • A permanent address for each entry, so others can link to it.
      • \n
    • Archives by month and by category.
      • \n
    • Comments, which you may hold for approval or switch off.
      • \n
    • A feed that readers and other sites can follow.
      • \n
    \n

    For those who like to tinker

    \n

    Every template is one HTML file and one stylesheet, and both are yours to edit. Put {entry.title} where the title should go and {entry.body} where the text should; the manual lists the other forty tags.

    \n
    \n
    \n\n
    \n

    Free and paid, side by side

    \n \n \n \n \n \n \n \n \n \n \n \n
    What you getFreePaid
    Weblogs on one account15
    Space for pictures, in megabytes20500
    Templates to choose from1212
    Writers on one weblog110
    Price for a year0.0024.00
    \n
    \n\n
    \n

    Read on

    \n \n
    \n\n
    \n\n \n
    \n
    \n
    \n\n \n
    \n
      \n
    1. Home
      2. \n
    2. ›
      3. \n
    3. Weblogs
      4. \n
    4. ›
      5. \n
    5. Home and garden
      6. \n
    \n
    \n\n
    \n
    \n

    Weblogs about home and garden

    \n

    1,946 weblogs under this subject. The list is rebuilt every ten minutes.

    \n
    \n
    Add yours
    \n
    \n\n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    WeblogKept byLast entryStateEntries
    Updated in the last hour
    Notes from the allotmentHanne2 minutes agoactive412
    Second-hand cookbooksOdile11 minutes agoactive1,038
    Small repairsAnselm38 minutes agoactive267
    Earlier today
    A shed of one's ownGreta3 hours agoquiet58
    Forty tomato plantsMilan5 hours agoactive173
    The damp cornerIngrid9 hours agoclosed24
    \n
    \n
    \n\n
    \n \n
    \n\n
    \n
    \n

    Other subjects

    \n \n
    \n
    \n

    What the states mean

    \n
      \n
    • active an entry in the last month
      • \n
    • quiet nothing for three months
      • \n
    • closed closed by its keeper
      • \n
    \n
    \n
    \n

    Newest subject

    \n
    \n

    No weblog is filed under “Beekeeping” yet.

    \n Start the first\n
    \n
    \n
    \n\n
    \n
    \n\n \n
    \n
      \n
    1. Home
      2. \n
    2. ›
      3. \n
    3. Sign up
      4. \n
    4. ›
      5. \n
    5. Step 1 of 2
      6. \n
    \n
    \n
    \n
    \n\n
    \n
    \n

    Start your weblog

    \n

    One short form. The template comes next, and then you can write.

    \n
    \n
    Take the tour first
    \n
    \n\n
    \n
    \n

    Held for you. The address lowtide is kept free for the next twenty minutes.

    \n

    Not yet. One field below needs another look.

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

    About the weblog

    \n
    \n \n
    \n
    .chronoskin.example
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n \n

    That does not look like an e-mail address.

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

    Where the directory will list you. One subject only.

    \n
    \n
    \n
    \n \n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n Start over\n \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Start over?

    \n
    \n

    Everything typed into this form will be cleared, and the address lowtide goes back to being free for anyone.

    \n
    \n \n Keep writing\n
    \n
    \n
    \n
    \n
    \n\n
    \n\n \n
    \n
    \n
    \n\n \n\n
    \n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.landing.s07.p03.t10.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"weblogs-2000s\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-wl-73a2\",\n \"short\": \"v1-wl-73a2\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #4a525a;\n --color-canvas: #4a525a;\n --color-surface: #4a525a;\n --color-surface-alt: #505860;\n --color-surface-strong: #586068;\n --color-bar: #687078;\n --color-bar-text: #ffffff;\n --color-bar-alt: #606870;\n --color-bar-alt-text: #eeeeee;\n --color-inverse: #dddddd;\n --color-inverse-text: #4a525a;\n --color-text: #eeeeee;\n --color-text-muted: #aaaaaa;\n --color-heading: #ffffff;\n --color-heading-alt: #cccccc;\n --color-link: #ffcc66;\n --color-link-quiet: #cccccc;\n --color-link-visited: #cccc99;\n --color-link-hover: #ffffff;\n --color-link-active: #ff9900;\n --color-border: #777777;\n --color-border-strong: #888888;\n --color-border-muted: #666666;\n --color-accent: #ff9900;\n --color-accent-text: #333333;\n --color-accent-alt: #ffcc66;\n --color-fill-1: #505860;\n --color-fill-2: #586068;\n --color-fill-3: #606870;\n --color-fill-4: #687078;\n --color-button: #586068;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #505860;\n --color-button-secondary-text: #dddddd;\n --color-input: #dddddd;\n --color-input-text: #333333;\n --color-input-border: #888888;\n --color-disabled: #505860;\n --color-disabled-text: #98a0a0;\n --color-danger: #cc9999;\n --color-danger-surface: #505860;\n --color-success: #bbcc99;\n --color-warning: #ffcc66;\n --color-notice: #586068;\n --color-notice-text: #eeeeee;\n --color-focus: #ffffff;\n --color-shadow: #333333;\n --color-overlay: #586068;\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Grande\", Verdana, Arial, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 12px;\n --text-display: 25px;\n --text-h1: 24px;\n --text-h2: 15px;\n --text-h3: 11px;\n --line-body: 1.5;\n --line-heading: 1.1;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -1px;\n --display-tracking: -1px;\n --figure-shift: 0.1em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: dotted;\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: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='black' fill-opacity='.14'/%3E%3C/svg%3E\") 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 dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }