{ "id": "v1-wl-7944", "long_id": "v1.weblogs-2000s.landing.s07.p09.t04.u04", "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-7944", "preview_url": "https://chrono.skin/s/v1-wl-7944/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` and `--font-heading` are \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial; `--font-ui` is Verdana, used for the menu, tabs, buttons, inputs and the month on a date leaf; `--font-mono` (Courier New) is only for code. All are system fonts, so nothing was substituted.\n- `--text-base` 13px with `--line-body` 1.35 is entry text; `--text-small` 11px is the whole left column, meta lines, tables, notices, breadcrumb and footer; `--text-ui` 11px is the menu, tabs, buttons and inputs. `--text-large` equals the base size: the lead line of the hero is not enlarged.\n- Headings are small bold tracked capitals, barely larger than the text: `--text-h1` 14px for entry titles, the hero and page-header titles and stats figures, `--text-h2` 13px for sub-headings, grid and form titles, `--text-h3` 12px for sidebar titles and block labels, all `--weight-heading` 700 with `--heading-transform` uppercase and `--heading-tracking` 1px. `--text-display` 28px bold, tracked 2px, is the site name in the banner and the only large text on the page.\n- `--color-text` and `--color-heading` are #000000; `--color-heading-alt` #f15a00, a strong orange, is sub-headings, sidebar titles, block labels and code; `--color-text-muted` #717171 is dates, counts and meta lines.\n- `--color-link` #330099, a dark purple. Links are not underlined (`--link-decoration` none) and gain an underline on hover, where they turn `--color-link-hover` #f15a00; visited links are `--color-link-visited` #0000a5, active #a51410, and `--color-link-quiet` #666666 is for category, permalink and tool links. Footer links are underlined at rest because they sit on the dark strip.\n- `--color-bar` #ab3c00, a flat dark rust (the references set white on a paler terracotta, #de9468, which is too weak a contrast for small white text, so the bar takes their darker rust), with white `--color-bar-text` fills the banner, the current menu item and dialog titles (`--fill-bar` is the plain colour, no gradient). `--color-bar-alt` #8d8d8d with white text is only the month strip of a date leaf. `--color-inverse` #424142 with #d2d2d2 text is the footer.\n- `--color-page` #fcdecc is the peach page; the sheet and every surface are white; `--color-surface-alt` #f7f7f7 is the calendar, the breadcrumb, the form, the day half of a date leaf and alternate table rows; `--color-surface-strong` #f0f0f0 is table heads, panel titles and the current page number.\n- Borders: `--color-border` #d2d2d2 for every ordinary 1px line, around boxes, under titles and between entries, all in `--border-style`; `--color-border-muted` #e8e8e8 between linklog rows and under block labels; `--color-border-strong` #ab3c00, the rust of the banner, for the rule under a page header, the 2px rule over each stat, the underscore of the current tab and the outline of notices. `--border-width-strong` (4px) is not used by this layout; it is the heavy rule other layouts of the era draw on top of a sheet or beside a notice.\n- `--color-fill-1` #fff8f0, `--color-fill-2` #f7f7f7, `--color-fill-3` #ffe0d0 and `--color-fill-4` #fffff8 are the flat tints of grid cells; fill-1 is also the hero. `--color-accent` #f15a00 with white text is the count badge, today in the calendar and list bullets.\n- Status colours: `--color-danger` #a51410 and `--color-warning` #ab3c00 are measured reds and rusts of the references; `--color-success` #538620 is the green of the era's first set, because the peach references show no green. They are used only as the text and 1px outline of status labels and as the lettering of a destructive button, never as a fill.\n- Buttons and inputs look like the operating system's: buttons are `--color-button` #f0f0f0 with a 2px `outset` border of the same colour and black text; inputs are white with a 2px `inset` `--color-input-border` border. The 2px is `calc(var(--border-width) * 2)`, the 3px tab underscore `calc(var(--border-width) * 3)`; `outset` and `inset` are written as keywords in `components.css` because `--border-style` holds only `solid`. The brand tile is sized by `calc()` over `--text-display`, as the vocabulary has no token for it.\n- Hover, visited, active and focus colours were not measurable on static captures; they are taken from other measured colours of the same palette. Focus is a 1px dotted `--color-focus` outline.\n- Surface: corners are eased, not round: `--radius-control` 3px on buttons, inputs and the calendar, `--radius-panel` 5px on panels, the form and the dialog, `--radius-page` 8px on the sheet, the banner and grid cells, `--radius-pill` 9px on tags, as the rounded templates of 2005 did with corner images. The sheet, panels and grid cells cast `--shadow-panel` (1px down, 4px soft), the dialog `--shadow-dialog`. `--fill-page` darkens the top 240px of the page a little; every other fill is flat.\n\n- White throughout: `--color-page`, `--color-canvas` and `--color-surface` are #ffffff, `--color-surface-alt` #f8f8f8 and `--color-surface-strong` #efefef; the sheet shows only by its 1px #c0c0c0 sides.\n- `--color-bar` #cc0000 with white text is the navigation bar, table head and dialog title; `--color-bar-alt` #000000 with white text is the sidebar strips and the band on top of the sheet; `--color-inverse` #282828 with #e0e0e0 text is the footer.\n- `--color-text` and `--color-heading` are #000000, `--color-text-muted` #666666; `--color-heading-alt` #cc0000 is dates, sub-headings, code and the second half of the wordmark.\n- `--color-link` #0000ee, the browser's blue; visited #173797, hover #cc0000, active #ff0000, quiet #808080.\n- Lines are `--color-border` #c0c0c0, `--color-border-muted` #e0e0e0 and `--color-border-strong` #000000 (hero rule, notice outline).\n- The one loud tint is #dfff0c: `--color-notice` and `--color-fill-3`. The other fills are greys (#efefef, #f8f8f8, #e0e0e0). `--color-accent` #ff0000 with white text is the count badge and bullets.\n- Status: `--color-success` #006d00, `--color-warning` #cc6600, `--color-danger` #ff0000. Buttons are grey #e0e0e0 and #f0f0f0 with black text.\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 <= 28px`: the site name in the banner is the largest text; titles are 14px.\n- `font-size >= 10px`: the smallest text measured is 10px; the pack itself stops at 11px.\n- `font-weight <= 700`: bold is the heaviest weight in use.\n- `font-families <= 3`: Trebuchet MS, Verdana for controls and a monospace for code.\n- `line-height <= 1.6`: text is set close, at 1.35.\n- `line-height >= 1.2`: but never solid.\n- `letter-spacing <= 2px`: headings are tracked 1px, the site name 2px.\n- `uppercase-text <= 12%`: capitals are for headings, block labels and the site name, never for running text.\n- `border-radius <= 9px`: corners are eased by 3px to 8px, as the rounded templates of 2005 did with corner images; nothing is a capsule except a tag.\n- `box-shadow-blur <= 12px`: the sheet and panels cast one soft, short shadow; nothing floats high above the page.\n- `text-shadow = none`: text is flat, including on the banner.\n- `gradient-fills <= 0%`: the banner and every tint are one flat colour.\n- `border-width <= 4px`: lines are 1px, control bevels and stat rules 2px, the tab underscore 3px; 4px is the heaviest rule of the set.\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.p09.t04.u04\",\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-7944\",\n \"short\": \"v1-wl-7944\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #efefef;\n --color-bar: #cc0000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #000000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #282828;\n --color-inverse-text: #e0e0e0;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #cc0000;\n --color-link: #0000ee;\n --color-link-quiet: #808080;\n --color-link-visited: #173797;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #c0c0c0;\n --color-border-strong: #000000;\n --color-border-muted: #e0e0e0;\n --color-accent: #ff0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc6600;\n --color-fill-1: #efefef;\n --color-fill-2: #f8f8f8;\n --color-fill-3: #dfff0c;\n --color-fill-4: #e0e0e0;\n --color-button: #e0e0e0;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #f0f0f0;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #808080;\n --color-danger: #ff0000;\n --color-danger-surface: #f8f8f8;\n --color-success: #006d00;\n --color-warning: #cc6600;\n --color-notice: #dfff0c;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #808080;\n --color-overlay: #efefef;\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-ui: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 28px;\n --text-h1: 14px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 5px;\n --radius-pill: 9px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 4px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 0 3px 12px var(--color-shadow);\n --shadow-text: none;\n --fill-page: linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 14%), var(--color-page) 240px) no-repeat var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }