{ "id": "v1-bb-4347", "long_id": "v1.bulletin-board-forums.forum.s04.p03.t04.u07", "name": "Bulletin board forum, portal and thread view, 2002 to 2007", "era": { "slug": "bulletin-board-forums", "code": "bb", "name": "Bulletin-board forums", "years": [ 2002, 2007 ], "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the forum of a gaming or hobby community between about 2003 and 2007, when the board software grew a portal front page: a link bar across the very top, a banner with a search box, and three columns in which a menu, a log-in box and a poll stand beside the site news. Behind the front page the forums are plain full-width sheets, and a thread is drawn the way most engines of the time drew it, each post a ruled block with the poster's name, rank, avatar and counts in a panel on the left and the message on the right. The skin is the dark one such communities preferred: charcoal cells on a near-black sheet over a deep blue-green page, ivory Verdana, khaki headings and buttons, a glossy petrol bar, square corners and no motion.", "url": "https://chrono.skin/s/v1-bb-4347", "preview_url": "https://chrono.skin/s/v1-bb-4347/specimen.html", "files": { "STYLE.md": "# Bulletin board forum, portal and thread view, 2002 to 2007\n\n## Summary\n\nThis is the forum of a gaming or hobby community between about 2003 and 2007, when the board software grew a portal front page: a link bar across the very top, a banner with a search box, and three columns in which a menu, a log-in box and a poll stand beside the site news. Behind the front page the forums are plain full-width sheets, and a thread is drawn the way most engines of the time drew it, each post a ruled block with the poster's name, rank, avatar and counts in a panel on the left and the message on the right. The skin is the dark one such communities preferred: charcoal cells on a near-black sheet over a deep blue-green page, ivory Verdana, khaki headings and buttons, a glossy petrol bar, square corners and no motion.\n\n## Layout\n\n- The sheet `.ds-page__frame` is `--size-page` (92%) wide and centred, with a 1px `--color-border-strong` outline; the page colour shows as a band on both sides. `.ds-page` has `--space-5` (12px) above and below. Designed at 1024px. Never let the sheet touch the viewport edge and never narrow it below 90%.\n- Order from the top, all inside the sheet: the link bar `.ds-nav__menu` (primary bar fill, items divided by 1px rules), the banner `.ds-nav__head` on the canvas (brand and tagline on the left, the search form on the right, at least `--size-banner`, 62px, tall), the visitor strip `.ds-nav__sub` (secondary bar), then `.ds-page__body`, the footer band, and the small print `.ds-page__legal` on the canvas. Nothing with text sits on the page colour.\n- The front page is `.ds-portal`, three columns: `--size-side` (172px), fluid, `--size-side`, `--space-5` apart, top-aligned. Left: `.ds-sidebar` with the menu, log-in and who-is-online blocks. Centre `.ds-portal__main`: the welcome block `.ds-hero`, then the news `.ds-list`. Right `.ds-portal__side`: `.ds-panel` blocks (poll, top posters, calendar). An optional `.ds-notice` runs across the full width above the columns. Under the columns, at full width: the latest-topics `.ds-table`, the `.ds-grid` of forum sections and the one-line `.ds-stat` strip. The three columns should end near each other: add or drop a side block or a news item instead of leaving one column short.\n- Inner pages (a forum, a thread, the reply form) keep the link bar, banner, visitor strip and footer and drop the three columns and the hero: the view is one full-width column. From the top: `.ds-breadcrumb` (an open line with a home icon on a faint rule), `.ds-page-header` (a bordered `--color-surface-alt` box: title and one meta line on the left, one or two buttons on the right), `.ds-tabs` for the filters of a forum or the views of a thread, a `.ds-toolbar` line with tool links on the left and `.ds-pagination` on the right, then the working block. For a forum that is the topic `.ds-table` with `.ds-table__group` rows, closed by a `.ds-toolbar` holding the `.ds-legend` and the buttons. For a thread it is `.ds-thread`: a two-cell head (`Author`, `Message`) and one `.ds-post` per message, `--space-3` apart, a confirmation `.ds-dialog` directly under the post it concerns, then a `.ds-toolbar` with the topic buttons and the page numbers again. Tables and the reply `.ds-form` follow at full width; an error `.ds-notice` sits between the page header and the form.\n- Inner pages with a menu of their own (the control panel, help) keep the breadcrumb and page header at full width and then use `.ds-portal ds-portal--two`: the `.ds-sidebar` menu in the `--size-side` column and the working blocks in `.ds-portal__main` beside it. There is no right column on these pages.\n- Views. The specimen is a six-screen example site; the link bar has one item per view and marks the current one. Each view is a `.ds-view` section whose `.ds-view__body` stacks its blocks `--space-5` apart. `portal` (home) is the portal front page: notice, the three columns with menu, account box and who is online, the welcome block and site news, poll and side panels, then the latest topics, the forum sections and the statistics strip. `board` is one forum: filter tabs, page numbers, the topic table with pinned and ordinary groups, the icon legend and the new-topic button. `topic` is a thread: three posts, the delete confirmation that a post's Delete tool opens, the topic buttons and the attachment list. `post` is the reply form as it came back with an attachment error, over a review of the latest posts. `panel` is the member's control panel: the menu column, an empty messenger inbox and the tracked topics. `help` is the help page: the list of help topics and the staff box beside the house rules as long text and a line of related links.\n- A post is a grid of `--size-poster` (160px) plus the rest, three rows with 1px gaps: name cell and date strip, poster panel and message, status cell and tool strip. The avatar is `--size-avatar` (64px) square.\n- Table columns: status `--size-status` (28px), title (fluid), each count `--size-count` (62px), last post `--size-last` (160px). Rows are at least `--size-row` (32px); bars and title strips `--size-bar` (24px).\n- Spacing scale: `--space-1` 1px, `--space-2` 3px, `--space-3` 5px, `--space-4` 8px, `--space-5` 12px, `--space-6` 18px.\n - `--space-1`: the gap between cells inside every bordered block, vertical padding of buttons and inputs.\n - `--space-2`: vertical padding of bars, strips and table cells; gap between tabs and between post tools.\n - `--space-3`: gap between posts, between inline items, padding of small panel bodies.\n - `--space-4`: horizontal padding of cells and strips, padding of post panels and the page header, gap between buttons.\n - `--space-5`: page and body padding and the gap between neighbouring blocks and columns. This is the only block gap.\n - `--space-6`: list indent, padding of the empty state.\n- Form rows are a `--size-label` (22%) label cell and a field cell; text inputs are `--size-field` (260px) unless `--wide`; the banner search input is `--size-search` (150px). A dialog is `--size-dialog` (52%) wide, centred in the flow. Poll and rank meters are `--size-meter` (9px) high.\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 the same Verdana stack; `--font-ui` puts Tahoma first for navigation, tabs, buttons and inputs; `--font-mono` (Courier New) is for inline code. All are system fonts, as in the references.\n- Sizes: `--text-small` 10px for meta, counts captions, strips, side blocks and table cells; `--text-base`, `--text-ui`, `--text-h2` and `--text-h3` 11px for running text, post bodies, controls and block titles; `--text-large` and `--text-h1` 13px bold for news titles, poster names, the thread title and the hero title; `--text-display` 18px for the brand name only. Nothing is larger than 18px.\n- `--line-body` is 1.4 in running text; headings and bars use `normal`. Headings are bold, never uppercase, no tracking.\n- Links carry no underline at rest (`--link-decoration` and `--link-decoration-quiet` are `none`) and gain one on hover. `--color-link` (pale blue) is for links in text and meta; `--color-link-quiet` (ivory, always bold where it is a title) for topic, news and file titles, poster names, breadcrumb and menu links; hover is `--color-link-hover`.\n- Surfaces: `--color-page` outside the sheet, `--color-canvas` the sheet and, through `--fill-panel`, the dark line in the 1px gaps. `--color-surface` is the main cell (message, news item, table cell), `--color-surface-alt` the poster panel, count and status cells, form labels, the page header and tool strips, `--color-surface-strong` the title strips of side blocks and panels, group rows of a table, the name and date row of a post and the form action row. Text on the first two is `--color-text`; on the strong surface it is `--color-heading` or `--color-heading-alt`.\n- Bars: `--fill-bar` (the petrol bar with a lighter top and darker foot) with `--color-bar-text` and `--shadow-text` for the link bar, table heads, the thread head, the hero, news, grid, form, dialog and empty-state titles and the current tab. `--fill-bar-alt` with `--color-bar-alt-text` for the visitor strip, the current link-bar item and quiet badges. `--fill-inverse` with `--color-inverse-text` for the footer band.\n- Borders: every block has a 1px `--color-border` outline; `--color-border-strong` outlines the sheet, buttons, the dialog and the rule under the tabs; `--color-border-muted` rules rows inside a box and under the breadcrumb.\n- Markers: `--color-accent` for new-post icons, rank pips, poll bars, menu bullets, the notice edge and the badge, with `--color-accent-text` on it; `--color-accent-alt` for an emphasised word; `--color-danger` on `--color-danger-surface` for errors; Status badges are a `color-mix()` of 30% of the status colour (`--color-success`, `--color-warning`, `--color-danger`) over `--color-surface`, with `--color-text` and a 1px outline in the status colour, so they read under every palette. The destructive button is the error pair: `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline.\n- `--color-fill-1` to `--color-fill-4` are four close charcoal tones for grid cells; the style has no bright block colours.\n- One-off values outside the tokens: the footer separator is drawn at 0.6 opacity; icon and tile sizes are `calc()` multiples of `--size-icon` and `--text-display`.\n\n## Components\n\n- `ds-progress`: a quota or poll bar, a native `` with a label above (private-message quota).\n- `ds-accordion`: a collapsible `
` entry for a forum jump or an FAQ answer.\n- `ds-avatar`: the square picture of a member, placed under or beside the name.\n- `.ds-page`: on ``. Everything goes in `.ds-page__frame`; blocks go in `.ds-page__body`; `.ds-page__legal` is the small print at the foot of the sheet. `.ds-portal` with `.ds-portal__main` and `.ds-portal__side` makes the three columns; `.ds-portal--two` keeps only the side column and the main one, for an inner page with a menu. `.ds-toolbar` is a line with tools or buttons left and pagination right. `.ds-legend` is the key to the topic icons at the foot of a topic list: `.ds-legend__item` entries in muted text, each led by a `.ds-legend__icon` in the accent colour (`is-read` for the dimmed one).\n- `.ds-view`: one screen of the specimen's example site; only the one named in the address shows, the `.ds-view--home` one when none is named. `.ds-view__body` inside it is the column of blocks. An installing project with real pages does not need these two classes. `.ds-icon` sizes an inline SVG icon, `.ds-sprite` hides the symbol sheet, `.ds-block` puts a span on its own line.\n- `.ds-nav`: the site header. `.ds-nav__menu` is the link bar of `.ds-nav__item` cells holding `.ds-nav__link`; the current one takes `is-current` (the secondary bar fill with its text colour); in the specimen the same dress is applied by one `:has()` rule per view. `.ds-nav__head` is the banner with `.ds-nav__brand` (the `.ds-brand` with a `.ds-nav__tagline` under it) and `.ds-nav__search` (label, a `.ds-form__input--search` and a secondary button). `.ds-nav__sub` is the visitor strip with `.ds-nav__sublink` links.\n- `.ds-brand`: the site's mark and name at the left of the banner, linking to the portal; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, a `--border-width` outline in `--color-border-strong`, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.5 times `--text-display`, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` and `--weight-display`, with `--display-tracking` and `--heading-transform`, coloured `--color-heading` for the canvas banner it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: an open line: `.ds-breadcrumb__icon`, bold `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep`, `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome block at the head of the centre column, a bordered box like every other: `.ds-hero__title` bar, `.ds-hero__body` with a `.ds-hero__mark` icon, the `.ds-hero__lead` and the `.ds-hero__action` line (one primary button and a text link), and a `.ds-hero__foot` strip of totals. Never a full-width banner.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__title` (13px bold heading colour), `.ds-page-header__desc` (one 10px line), `.ds-page-header__action` (primary button, optionally a secondary one).\n- `.ds-prose`: long text such as rules: h1, h2, h3, p, ul, strong, code, hr, in a bordered `--color-surface` box.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for names and tools, `.ds-link--strong` for bold.\n- `.ds-button`: the primary action. `.ds-button--secondary` for the lesser action, `.ds-button--danger` for a destructive one (delete, ban), error text on the error surface with an error outline, once per confirmation beside a secondary button. States `is-hover`, `is-active`, `is-focus`, `is-disabled` or `disabled`. Group with `.ds-buttons`.\n- `.ds-form`: a bordered block of rows. `.ds-form__title` bar, `.ds-form__row` with `.ds-form__label` (plus `.ds-form__hint`) and `.ds-form__field`; controls take `.ds-form__input` (`--wide`, `--auto`, `--search`, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons in `.ds-form__actions`.\n- `.ds-table`: topic lists, file lists and any data. `th` is the primary bar (`.ds-table__head--left` for text columns); cells `.ds-table__status` (`is-read`), `.ds-table__num`, `.ds-table__last`; `.ds-table__group` is a strong row between groups; inside the main cell `.ds-table__title` and `.ds-table__meta`.\n- `.ds-thread`: the stack of posts, opened by `.ds-thread__head` with two `.ds-thread__label` cells. `.ds-post` is one message: `.ds-post__name` (with the `.ds-post__author` link) and `.ds-post__meta` in the top row; `.ds-post__panel` (`.ds-post__rank`, `.ds-post__pips` of `.ds-post__pip` squares, `is-off` for an empty one, `.ds-post__avatar`, `.ds-post__facts` of `.ds-post__fact`) beside `.ds-post__body` (`.ds-post__text` paragraphs, an optional `.ds-quote`, `.ds-post__sig` pinned to the foot); `.ds-post__status` beside `.ds-post__tools`, whose `.ds-post__toolset` groups hold small `.ds-post__tool` buttons. The panel is always on the left.\n- `.ds-quote`: a quoted message inside a post: `.ds-quote__label` over a bordered `.ds-quote__body`.\n- `.ds-list`: the news feed. `.ds-list__head` bar, then `.ds-list__item` (`is-alt` for the alternate one) with `.ds-list__title`, `.ds-list__meta`, `.ds-list__excerpt` and a right-aligned `.ds-list__aside` of comment and read-more links.\n- `.ds-panel`: a titled side box. `.ds-panel__title` (`--bar` for the primary bar), `.ds-panel__body` (`--alt`), `.ds-panel__line` paragraphs, or `.ds-panel__rows` of `.ds-panel__row` (name left, figure right). `.ds-poll` inside a body shows results: `.ds-poll__question`, `.ds-poll__option` with a `.ds-poll__track` and a `.ds-poll__fill` (`--46`, `--31`, `--17`, `--6` set the width).\n- `.ds-sidebar`: the left column of `.ds-sidebar__block` boxes: `.ds-sidebar__title`, then a `.ds-sidebar__list` of `.ds-sidebar__item` links each led by a `.ds-sidebar__bullet` (`is-current` for the page you are on), or a `.ds-sidebar__body` for a small form or text with `.ds-sidebar__label`, and an optional `.ds-sidebar__foot`.\n- `.ds-grid`: four equal cells with 1px gaps in one bordered block under a `.ds-grid__title` bar; `.ds-grid__cell` (`--2`, `--3`, `--4`) holds a `.ds-grid__icon`, a `.ds-grid__name` and `.ds-grid__meta` lines.\n- `.ds-stat`: `.ds-stat` is the row, one bordered strip: a `.ds-stat__title` cell at the left, then equal `.ds-stat__item` cells, each a bold `.ds-stat__value` beside its `.ds-stat__label` on one line. Never separate cards.\n- `.ds-tabs`: square `.ds-tabs__tab` items standing on a 1px strong rule; `is-current` takes the primary bar fill.\n- `.ds-badge`: a small square label. `.ds-badge--quiet` in the secondary bar colours; The status variants `.ds-badge--success` (solved, online, approved), `.ds-badge--warning` (pending, awaiting) and `.ds-badge--danger` (locked, banned, overdue) are a pale tint of the status colour with body text and a 1px outline in that colour. `.ds-new` is bold accent-alt text for a remark.\n- `.ds-notice`: one line with a 2px accent edge on the left. `.ds-notice__title` is the bold lead-in; `.ds-notice--error` is the error box with a danger outline.\n- `.ds-pagination`: one bordered strip of cells: `.ds-pagination__label`, then `.ds-pagination__link` cells; `is-current` for the current page.\n- `.ds-dialog`: a confirmation box in the page flow with a strong outline: `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and `.ds-dialog__actions`; `.ds-dialog__backdrop` is a flat band behind it. It never floats over the page.\n- `.ds-empty`: a bordered block with one centred message (`.ds-empty__body`, `.ds-empty__text`) and one button, under an optional `.ds-empty__title` bar (primary bar fill) that names the list that is empty.\n- `.ds-footer`: the inverse band closing the sheet: a `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` between them on the left, a `.ds-footer__note` on the right.\n\n## Never\n\n- `row-gap <= 1px`: rows touch or are separated by a 1px line.\n- `block-gap <= 20px`: neighbouring blocks are 12px apart.\n- `content-width >= 80%`: the sheet takes 92% of the viewport; never a narrow column.\n- `font-size <= 18px`: 18px is the largest text measured, and only the brand name uses it.\n- `font-size >= 10px`: 10px is the smallest size this pack uses.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Verdana, Tahoma for controls, a monospace for code.\n- `letter-spacing <= 0px`: no tracking anywhere.\n- `uppercase-text <= 0%`: nothing is transformed to uppercase.\n- `underlined-links <= 20%`: links have no underline until hovered; between 0% and 8% in the dark and neutral references.\n- `border-radius <= 0px`: every box is square in all references.\n- `box-shadow-blur <= 0px`: the only shadows are hard one-pixel offsets, as the references drew them with images.\n- `text-shadow = none`: no text shadow was measured in the period references.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 2px`: 1px everywhere, 2px on emphasised edges.\n- `gradient-fills <= 20%`: gradients are on bars, strips and buttons only.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new side box from `.ds-sidebar__block` or `.ds-panel`, a new feed from `.ds-list`, a new kind of post from `.ds-post`, a new data view from `.ds-table`. Build it as a 1px `--color-border` outline on `--fill-panel`, with cells in the three surface colours separated by `--space-1`, and a title in `--fill-bar` or `--color-surface-strong`. Put heading-colour text on the strong surface, body text on the other two, and never place text on the page colour. Use tokens only: no raw colours or lengths, no new radius, shadow or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). A centred sheet with a three-column portal\n front page and a thread view with poster panels beside the posts. Widths\n and paddings measured on portal fronts and thread pages captured 2005 to\n 2006. */\n:root {\n --size-page: 92%;\n --size-side: 172px;\n --size-poster: 160px;\n --size-avatar: 64px;\n --size-banner: 62px;\n --size-search: 150px;\n --size-status: 28px;\n --size-count: 62px;\n --size-last: 160px;\n --size-row: 32px;\n --size-bar: 24px;\n --size-icon: 16px;\n --size-meter: 9px;\n --size-label: 22%;\n --size-field: 260px;\n --size-dialog: 52%;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 12px;\n --space-6: 18px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The centred sheet. The page colour shows at both sides. */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n margin: 0 auto;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5);\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/* The column of blocks inside a view, one block gap apart. */\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n 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\n/* ---------- nav: link bar on top, banner, visitor strip ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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-shadow: var(--shadow-text);\n}\n.ds-nav__item {\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-5);\n color: var(--color-bar-text);\n line-height: var(--line-heading);\n text-decoration: none;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* The current view's item, and the portal item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#portal\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#portal:target) .ds-nav__link[href=\"#portal\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#post:target) .ds-nav__link[href=\"#post\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#panel:target) .ds-nav__link[href=\"#panel\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n min-height: var(--size-banner);\n padding: var(--space-3) var(--space-5);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so\n every palette and surface set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: 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 width: calc(var(--text-display) * 1.5);\n height: calc(var(--text-display) * 1.5);\n box-sizing: border-box;\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__sub {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-nav__sublink {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__sublink:hover,\n.ds-nav__sublink.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- breadcrumb: a plain line with an icon, no box ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n}\n.ds-breadcrumb__icon {\n display: flex;\n color: var(--color-accent);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\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}\n\n/* ---------- portal: three columns ---------- */\n.ds-portal {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr) var(--size-side);\n gap: var(--space-5);\n align-items: start;\n}\n/* Inner pages with a menu of their own: the side column and the rest. */\n.ds-portal--two {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n}\n.ds-portal__main,\n.ds-portal__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- hero: the welcome block at the head of the centre column ---------- */\n.ds-hero {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\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__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__body {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: var(--space-4);\n background: var(--color-surface);\n}\n.ds-hero__mark {\n flex: none;\n width: calc(var(--size-icon) * 3);\n height: calc(var(--size-icon) * 3);\n color: var(--color-bar-alt);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-hero__foot {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n\n/* ---------- page header: the head of a thread or board ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__desc {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-page-header__action {\n flex: none;\n display: flex;\n gap: var(--space-3);\n}\n\n/* ---------- toolbar: a line of tools with the page numbers ---------- */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* The key to the topic icons, at the foot of a topic list. */\n.ds-legend {\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 color: var(--color-text-muted);\n}\n.ds-legend__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-legend__icon {\n color: var(--color-accent);\n}\n.ds-legend__icon.is-read {\n color: var(--color-bar-alt);\n}\n\n/* ---------- list: news items of the portal ---------- */\n.ds-list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\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-list__head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-list__item {\n display: block;\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-surface);\n}\n.ds-list__item.is-alt {\n background: var(--color-surface-alt);\n}\n.ds-list__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\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__meta {\n display: block;\n padding: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__excerpt {\n margin: var(--space-3) 0;\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-list__aside {\n display: block;\n font-size: var(--text-small);\n text-align: right;\n}\n\n/* ---------- table: topic and file lists ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: separate;\n border-spacing: var(--space-1);\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-table caption {\n caption-side: top;\n padding: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n text-align: left;\n}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 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-small);\n font-weight: var(--weight-bold);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n text-align: left;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n vertical-align: middle;\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__status {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n font-size: var(--text-base);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__last {\n width: var(--size-last);\n white-space: nowrap;\n}\n.ds-table .ds-table__status {\n width: var(--size-status);\n padding: var(--space-2);\n text-align: center;\n color: var(--color-accent);\n}\n.ds-table .ds-table__status.is-read {\n color: var(--color-bar-alt);\n}\n.ds-table .ds-table__group td {\n height: var(--size-bar);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-table__title {\n color: var(--color-link-quiet);\n font-size: var(--text-base);\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.ds-table__meta {\n display: block;\n padding: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- post: poster panel on the left, message on the right ---------- */\n.ds-thread {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-thread__head {\n display: grid;\n grid-template-columns: var(--size-poster) minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-thread__label {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-small);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-poster) minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\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-post__name,\n.ds-post__meta {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-post__name {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-post__meta {\n justify-content: space-between;\n gap: var(--space-4);\n font-size: var(--text-small);\n}\n.ds-post__author {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__author:hover,\n.ds-post__author.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-post__panel {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-post__rank {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-post__pips {\n display: flex;\n gap: var(--space-1);\n margin: var(--space-2) 0 var(--space-4);\n color: var(--color-accent);\n}\n.ds-post__pip {\n width: var(--size-meter);\n height: var(--size-meter);\n box-sizing: border-box;\n background: currentColor;\n border: var(--border-width) var(--border-style) currentColor;\n}\n.ds-post__pip.is-off {\n background: transparent;\n border-color: var(--color-border);\n}\n.ds-post__avatar {\n display: block;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin: 0 0 var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-bar-alt);\n}\n.ds-post__facts {\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n}\n.ds-post__fact {\n padding: var(--space-1) 0;\n}\n.ds-post__body {\n display: flex;\n flex-direction: column;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-post__text {\n margin: 0 0 var(--space-4);\n}\n.ds-post__sig {\n margin: auto 0 0;\n padding: var(--space-3) 0 0;\n border-top: 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-post__status,\n.ds-post__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-post__tools {\n justify-content: space-between;\n}\n.ds-post__toolset {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-post__tool {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-post__tool:hover,\n.ds-post__tool.is-hover {\n color: var(--color-link-hover);\n}\n\n/* ---------- quote: a labelled box inside a post ---------- */\n.ds-quote {\n margin: 0 var(--space-5) var(--space-4);\n}\n.ds-quote__label {\n display: block;\n padding: 0 0 var(--space-1);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-quote__body {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\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 display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n\n/* ---------- poll: result bars ---------- */\n.ds-poll {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-poll__question {\n margin: 0 0 var(--space-3);\n font-weight: var(--weight-bold);\n}\n.ds-poll__option {\n padding: 0 0 var(--space-3);\n}\n.ds-poll__track {\n display: block;\n height: var(--size-meter);\n margin: var(--space-1) 0 0;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-poll__fill {\n display: block;\n height: 100%;\n background: var(--fill-accent);\n}\n.ds-poll__fill--46 {\n width: 46%;\n}\n.ds-poll__fill--31 {\n width: 31%;\n}\n.ds-poll__fill--17 {\n width: 17%;\n}\n.ds-poll__fill--6 {\n width: 6%;\n}\n\n/* ---------- sidebar: stacked blocks of the left column ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-sidebar__block {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\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-sidebar__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--color-surface);\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n}\n.ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__item.is-current {\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__bullet {\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-bar-alt);\n}\n.ds-sidebar__item.is-current .ds-sidebar__bullet {\n background: var(--color-accent);\n}\n.ds-sidebar__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n.ds-sidebar__label {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* ---------- grid: board cells with one-pixel gaps ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n padding: var(--space-1);\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-grid__title {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4);\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n flex: none;\n width: calc(var(--size-icon) * 1.5);\n height: calc(var(--size-icon) * 1.5);\n color: var(--color-accent);\n}\n.ds-grid__name {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- stats: one ruled line of figures ---------- */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\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-stat__title {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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}\n.ds-stat__item {\n flex: 1 1 0;\n display: flex;\n justify-content: center;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-stat__value {\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs: view switches of a thread ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\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-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n color: var(--color-link-quiet);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n border-color: var(--color-border-strong);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-badge--quiet {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n text and the status colour as the outline, so they read under any palette. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n border-color: var(--color-danger);\n}\n.ds-new {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\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}\n.ds-prose h1 {\n color: var(--color-heading);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-text);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose hr {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-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.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n/* Destructive action: the error pair, error text on the error surface with\n an error outline. It does not depend on the primary button's colours. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\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-form__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-form__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\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-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--search {\n width: var(--size-search);\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.ds-form__error {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n padding: var(--space-1) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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(--color-surface-alt);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n box-sizing: border-box;\n margin: 0 auto;\n padding: var(--space-1);\n background: var(--fill-panel);\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}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-empty__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\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-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 text-shadow: var(--shadow-text);\n}\n.ds-empty__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__sep {\n opacity: 0.6;\n}\n.ds-footer__note {\n margin: 0;\n}\n\n/* The current item also carries a weight and a bar that a token set cannot reduce to the bar's own fill. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#portal\"],\n.ds-page:has(#portal:target) .ds-nav__link[href=\"#portal\"],\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"],\n.ds-page:has(#post:target) .ds-nav__link[href=\"#post\"],\n.ds-page:has(#panel:target) .ds-nav__link[href=\"#panel\"],\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] {\n font-weight: var(--weight-bold, 700);\n}\n\n/* ---------- progress: a quota or poll bar ---------- */\n.ds-progress {\n display: block;\n margin: 0 0 var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__label {\n display: block;\n margin-bottom: var(--space-1);\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-meter);\n box-sizing: border-box;\n appearance: none;\n -webkit-appearance: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--color-input);\n color: var(--color-accent);\n overflow: hidden;\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-input);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n\n/* ---------- accordion: a collapsible category or FAQ entry ---------- */\n.ds-accordion {\n margin: 0 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-canvas);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-1) var(--space-2);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body {\n margin: 0;\n padding: var(--space-2);\n}\n.ds-accordion__list {\n margin: 0;\n padding: 0 0 0 var(--space-4);\n}\n\n/* ---------- avatar: the picture under a post author's name ---------- */\n.ds-avatar {\n display: flex;\n flex: none;\n align-items: flex-end;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n box-sizing: border-box;\n margin: var(--space-1) 0;\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-avatar svg {\n display: block;\n width: 80%;\n height: 80%;\n}\n\n:root {\n --size-meter: 12px;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: forum portal, board, thread and control panel specimen\n\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n\n
\n \n
\n
\n \n \n chronoskin\n \n Strategy gaming community: maps, mods and match reports\n
\n
\n \n \n \n
\n
\n
\n Logged in as brindle. 0 new messages · Log out\n Sat 19 Nov 2005, 08:47 PM · Posts since last visit · Mark all read\n
\n
\n\n
\n\n \n
\n
\n\n

Winter ladder: sign-ups for the two-against-two season close on 27 November. Read the rules and enter your team.

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

Welcome to chronoskin

\n
\n \n
\n

chronoskin is a home for people who play slow, careful strategy games and like to talk about them afterwards. Browse the map vault, post a match report or ask for a second opinion on your opening. Reading is open to everyone; you need a free account to post or download.

\n

Browse the forums or read the house rules first

\n
\n
\n

6,204 members, 31,877 topics, 268,410 posts Newest member: ironbrook

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

Current poll

\n
\n

Which map size do you play most?

\n
    \n
  • Medium, four players (46%)
    • \n
  • Small, two players (31%)
    • \n
  • Large, six players (17%)
    • \n
  • Whatever is hosted (6%)
    • \n
\n
\n
312 votes. Discuss this poll
\n
\n
\n

Top posters

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

Coming up

\n
\n \n
\n
Open the events forum
\n
\n
\n

Newest files

\n
\n \n
\n
\n
\n\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Latest forum topicsRepliesViewsLast post
Holding the middle ford against a cavalry rush New\n in Openings and build orders, started by brindle271,318Today, 08:31 PM by eskerine
Replay will not load after the weekend patch Solved\n in Technical help, started by fennick11402Today, 07:58 PM by ashgrove
Looking for a ladder partner, evenings GMT Open\n in Winter ladder, started by galloway_t6189Today, 05:14 PM by corvane
Map pack 13: known problems Locked\n in Map workshop, started by dunmarrow584,92017 Nov 2005, 10:02 PM by dunmarrow
Match report: forty turns of siege on Delta Fords Pinned\n in Match reports, started by harrowgate342,07617 Nov 2005, 06:40 PM by brindle
\n\n
\n

Forum sections

\n
\n \n
The war room\n Openings, build orders and match reports\n 12,406 topics
\n
\n
\n \n
Map workshop\n Drafts, play tests and the editor\n 7,318 topics
\n
\n
\n \n
Ladder and events\n Seasons, pairings and results\n 3,950 topics
\n
\n
\n \n
The mess hall\n Introductions and everything else\n 8,203 topics
\n
\n
\n\n
\n

Site statistics

\n
6,204members
\n
31,877topics
\n
268,410posts
\n
1,946maps and replays
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
    2. \n
  2. chronoskin
    3. \n
  3. >
    4. \n
  4. The war room
    5. \n
  5. >
    6. \n
  6. Openings and build orders
    7. \n
\n\n
\n
\n

Openings and build orders

\n

The first ten turns, rush defence and economy timing. 2,114 topics. Moderators: ashgrove, dunmarrow

\n
\n
New topic
\n
\n\n \n\n
\n Mark this forum read · Track this forum · Forum rules\n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TopicRepliesViewsLast post
Pinned topics
Read first: how to ask for help with an opening Locked\n started by ashgrove on 02 Feb 2004018,40202 Feb 2004, 09:15 PM by ashgrove
The build order library, patch 1.4 Pinned\n started by dunmarrow on 30 Sep 2005, pages 1 2 3 917122,960Today, 06:02 PM by harrowgate
Forum topics
Holding the middle ford against a cavalry rush New\n started by brindle on 16 Nov 2005, pages 1 2 3271,318Today, 08:31 PM by eskerine
Two granaries before the first barracks? New\n started by fennick on 18 Nov 200514506Today, 07:40 PM by corvane
Scouting patterns for six player maps\n started by corvane on 14 Nov 2005, pages 1 222940Today, 02:11 PM by galloway_t
Is the walled start still worth it after the patch? Answered\n started by galloway_t on 11 Nov 2005937718 Nov 2005, 11:26 PM by eskerine
Turn by turn: the river town economy\n started by harrowgate on 06 Nov 2005, pages 1 2 3 4463,10518 Nov 2005, 08:03 PM by harrowgate
Archers on the hill or behind the wall Poll\n started by eskerine on 03 Nov 2005311,76417 Nov 2005, 04:48 PM by fennick
\n\n
\n
    \n
  • New posts
    • \n
  • No new posts
    • \n
  • Locked topic
    • \n
\n
\n New topic\n Back to the portal\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
    2. \n
  2. chronoskin
    3. \n
  3. >
    4. \n
  4. The war room
    5. \n
  5. >
    6. \n
  6. Openings and build orders
    7. \n
  7. >
    8. \n
  8. Holding the middle ford
    9. \n
\n\n
\n
\n

Holding the middle ford against a cavalry rush

\n

27 replies, 1,318 views. Started by brindle on 16 Nov 2005. Moderators: ashgrove, dunmarrow

\n
\n
Post reply New topic
\n
\n\n \n\n
\n Track this topic · E-mail this topic · Print this topic\n \n
\n\n
\n
\n Author\n Message\n
\n\n
\n
eskerine
\n
Posted 19 Nov 2005, 06:22 PM Post #12
\n
\n Siege engineer\n \n \n
    \n
  • Group: Members
    • \n
  • Posts: 5,233
    • \n
  • Joined: 04 Mar 2003
    • \n
  • From: the north bank
    • \n
\n
\n
\n
\n Quote (brindle, 19 Nov 2005, 05:48 PM)\n
I lose the ford by turn nine every time. Two towers are not enough and a third leaves me with no economy.
\n
\n

Towers are the wrong answer there. The ford is three tiles wide, so a rush has to come through in single file, and one line of pikes on your own bank holds it for the price of a single tower.

\n

Put the pikes one tile back from the water, not on it. Cavalry that has crossed loses its charge bonus, and your archers on the hill get two free volleys while it reforms.

\n

\"Never fight uphill, never fight downstream.\" Map pack 14, slot 3.

\n
\n
Online
\n
\n Profile Message\n Quote Report\n
\n
\n\n
\n
brindle
\n
Posted 19 Nov 2005, 07:05 PM Post #13
\n
\n Scout\n \n \n
    \n
  • Group: Members
    • \n
  • Posts: 148
    • \n
  • Joined: 22 Aug 2005
    • \n
\n
\n
\n

Tried it twice this evening against the hard computer player. Held until turn fourteen both times, and had a second town up by then. The one tile back detail makes all the difference, thank you.

\n

Replay attached in case anyone wants to tell me what I did wrong after that. Edit: wrong file the first time, fixed now.

\n
\n
Online
\n
\n Profile Message\n Quote Edit Delete\n
\n
\n\n
\n
\n

Please confirm

\n
\n

Delete post #13 and its attachment? This cannot be undone.

\n
\n Yes, delete it\n No, go back\n
\n
\n
\n
\n\n
\n
corvane
\n
Posted 19 Nov 2005, 08:31 PM Post #14
\n
\n Quartermaster\n \n \n
    \n
  • Group: Members
    • \n
  • Posts: 3,094
    • \n
  • Joined: 19 Jan 2004
    • \n
\n
\n
\n

Watched the replay. You stopped scouting at turn eleven, which is why the second wave surprised you. Keep one rider on the far bank and you will see it coming three turns out.

\n

Timings for every opening are in rush-timings.txt, attached to post #2.

\n
\n
Offline
\n
\n Profile Message\n Quote Report\n
\n
\n
\n\n
\n
\n Post reply\n Track topic\n \n Delete topic\n
\n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Attachments in this topicPosted bySizeDownloads
ford-hold-turn14.replaybrindle, post #13184 KB37
pike-line-diagram.txteskerine, post #92 KB112
delta-fords-v2.mapdunmarrow, post #496 KB260
rush-timings.txtcorvane, post #21 KB88
\n\n
\n
\n\n \n
\n
\n\n
    \n
    2. \n
  2. chronoskin
    3. \n
  3. >
    4. \n
  4. Openings and build orders
    5. \n
  5. >
    6. \n
  6. Holding the middle ford
    7. \n
  7. >
    8. \n
  8. Post reply
    9. \n
\n\n
\n
\n

Post a reply

\n

Replying to Holding the middle ford against a cavalry rush as brindle. Please read the posting guide first.

\n
\n
Back to the topic
\n
\n\n
\n Your reply was not added. Files of the type zip cannot be attached. Correct the field marked below and send the reply again.\n
\n\n
\n

Your reply

\n
\n \n
\n
\n
\n \n
\n \n Files of the type zip cannot be attached.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n
\n
\n
\n \n \n Cancel\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AuthorTopic review, newest firstPosted
corvaneWatched the replay. You stopped scouting at turn eleven, which is why the second wave surprised you. Keep one rider on the far bank and you will see it coming three turns out.Today, 08:31 PM Post #14
brindleTried it twice this evening against the hard computer player. Held until turn fourteen both times, and had a second town up by then.Today, 07:05 PM Post #13
eskerineTowers are the wrong answer there. Put the pikes one tile back from the water, not on it.Today, 06:22 PM Post #12
\n\n
\n
\n\n \n
\n
\n\n
    \n
    2. \n
  2. chronoskin
    3. \n
  3. >
    4. \n
  4. My controls
    5. \n
  5. >
    6. \n
  6. Messenger inbox
    7. \n
\n\n
\n
\n

My controls

\n

brindle, Scout. Member since 22 Aug 2005, 148 posts, last visit yesterday at 11:20 PM.

\n
\n
Write a message
\n
\n\n
\n\n \n\n
\n\n
\n

Messenger: inbox

\n
\n

Your inbox is empty. Messages from other members will be listed here.

\n Write a message\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Tracked topicsRepliesLast post
Holding the middle ford against a cavalry rush New\n in Openings and build orders27Today, 08:31 PM by corvane
Two granaries before the first barracks? New\n in Openings and build orders14Today, 07:40 PM by corvane
Looking for a ladder partner, evenings GMT\n in Winter ladder6Today, 05:14 PM by corvane
Map pack 13: known problems Locked\n in Map workshop5817 Nov 2005, 10:02 PM by dunmarrow
\n\n
\n\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
    2. \n
  2. chronoskin
    3. \n
  3. >
    4. \n
  4. Help
    5. \n
  5. >
    6. \n
  6. House rules
    7. \n
\n\n
\n
\n

Help

\n

The house rules, the posting guide and answers to the questions new members ask most.

\n
\n
Ask the staff
\n
\n\n
\n\n \n\n
\n\n
\n

House rules and posting guide

\n

Everyone who posts here agrees to the rules below. They are short. Read them once and you will rarely meet a moderator.

\n

Before you post

\n

Search first; most openings have a long topic already. Name the map and the number of players in the title, and say which patch you are playing.

\n
    \n
  • One topic per question, in one forum only.
    • \n
  • Attach replays as files, not as links to other sites.
    • \n
  • Wrap build orders in [code] tags so the columns stay aligned.
    • \n
\n
\n

Signatures

\n

Signatures are limited to three lines of text and no images.

\n
\n\n
\n

See also

\n
\n

Board code reference · Attachment types and limits · Setting your signature · Ladder rules · Back to the forums · Portal home

\n
\n
Still stuck? Ask in the forums and a moderator will answer.
\n
\n\n
\n\n
\n\n
\n
\n\n
\n\n \n\n

chronoskin. Placeholder content for a style specimen.

\n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.forum.s04.p03.t04.u07\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-4347\",\n \"short\": \"v1-bb-4347\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #efefef;\n --color-surface-alt: #dee3e7;\n --color-surface-strong: #d1d7dc;\n --color-bar: #006699;\n --color-bar-text: #ffa34f;\n --color-bar-alt: #98aab1;\n --color-bar-alt-text: #000000;\n --color-inverse: #006699;\n --color-inverse-text: #e8eef2;\n --color-text: #000000;\n --color-text-muted: #444444;\n --color-heading: #006699;\n --color-heading-alt: #333333;\n --color-link: #006699;\n --color-link-quiet: #006699;\n --color-link-visited: #4691b6;\n --color-link-hover: #333333;\n --color-link-active: #000000;\n --color-border: #98aab1;\n --color-border-strong: #006699;\n --color-border-muted: #d1d7dc;\n --color-accent: #006699;\n --color-accent-text: #ffffff;\n --color-accent-alt: #006600;\n --color-fill-1: #efefef;\n --color-fill-2: #d1d7dc;\n --color-fill-3: #dee3e7;\n --color-fill-4: #e8eef2;\n --color-button: #006699;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffa34f;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #98aab1;\n --color-disabled: #e5e5e5;\n --color-disabled-text: #98aab1;\n --color-danger: #c60202;\n --color-danger-surface: #fddbcc;\n --color-success: #006600;\n --color-warning: #ffa34f;\n --color-notice: #e8eef2;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #d1d7dc;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-heading: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-ui: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 11px;\n --text-h3: 11px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: normal;\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: 0;\n --display-tracking: 0;\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: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 1px 1px 0 color-mix(in srgb, var(--color-shadow), transparent 78%);\n --shadow-control: 1px 1px 0 color-mix(in srgb, var(--color-shadow), transparent 70%);\n --shadow-control-hover: 1px 1px 0 color-mix(in srgb, var(--color-shadow), transparent 40%);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-shadow), transparent 50%);\n --shadow-dialog: 4px 4px 0 color-mix(in srgb, var(--color-shadow), transparent 70%);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(90deg, var(--color-page) 0, var(--color-page) 3px, color-mix(in srgb, var(--color-page), white 16%) 3px, color-mix(in srgb, var(--color-page), white 16%) 4px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 30%) 0, color-mix(in srgb, var(--color-bar), white 8%) 2px, var(--color-bar) 60%, color-mix(in srgb, var(--color-bar), black 14%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 22%) 0, var(--color-bar-alt) 2px);\n --fill-inverse: linear-gradient(to bottom, var(--color-inverse) 0%, color-mix(in srgb, var(--color-inverse), black 28%) 100%);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 26%) 0%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 16%) 100%);\n --fill-button-hover: linear-gradient(to bottom, var(--color-button) 0%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 55%) 0%, var(--color-button-secondary) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }