{ "id": "v1-br-13b2-dc", "long_id": "v1.brutalism.blog.s01.p03.t11.u02.dc", "name": "Web brutalism, 2017", "era": { "slug": "brutalism", "code": "br", "name": "Web brutalism", "years": [ 2014, 2019 ], "description": "The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "density": "compact", "summary": "A page that looks undesigned on purpose, as published between 2014 and 2019 by people reacting against polished, template-built sites: the browser's own serif at the browser's own sizes, black on white, blue underlined links that turn purple once visited, and hard black rules where other styles would use cards. Nothing is rounded, tinted or animated, and the only relief is the browser's own 1px bevel on a push button; structure comes from the order of the HTML, from 1px and 2px lines, from ruled tables and bulleted lists, and from one oversized bold headline. It was the common look of personal logs, link lists, manifestos and small tools whose authors wanted the page to load instantly and to say so.", "url": "https://chrono.skin/s/v1-br-13b2-dc", "preview_url": "https://chrono.skin/s/v1-br-13b2-dc/specimen.html", "files": { "STYLE.md": "# Web brutalism, 2017\n\n## Summary\n\nA page that looks undesigned on purpose, as published between 2014 and 2019 by people reacting against polished, template-built sites: the browser's own serif at the browser's own sizes, black on white, blue underlined links that turn purple once visited, and hard black rules where other styles would use cards. Nothing is rounded, tinted or animated, and the only relief is the browser's own 1px bevel on a push button; structure comes from the order of the HTML, from 1px and 2px lines, from ruled tables and bulleted lists, and from one oversized bold headline. It was the common look of personal logs, link lists, manifestos and small tools whose authors wanted the page to load instantly and to say so.\n\n## Layout\n\n- The page is fluid: `.ds-page__frame` is `--size-page` (100%) wide and starts `--space-3` (8px, the browser's body margin) from the window edge on every side. It is never centred in a narrow column and never given a maximum width; text lines run as long as the window allows.\n- Order from the top: `.ds-nav` (the brand, a ruled square mark and the site name, with a one-line tagline beside it, then one line of links cut by `|`, then a 2px rule across the page), `.ds-page__columns`, `.ds-footer`.\n- `.ds-page__columns` holds `.ds-page__main`, which takes all remaining width, and `.ds-sidebar` at `--size-sidebar` (300px) on the right behind a 1px vertical rule. The sidebar is always on the right. A page that needs no sidebar leaves it out and the main column fills the window.\n- The main column is one stack in source order. Blocks are `.ds-page__section`, `--space-5` (24px) apart, with a bold `.ds-page__label` line above when the block needs a name. Blocks are separated by that gap or by a rule (`.ds-page__rule`, or the component's own border), never by cards, tints or large whitespace.\n- Inner pages (an archive, a single entry, a table of readings, an about page) keep the same header, the same line of links, the same two columns and the same footer. The `.ds-breadcrumb` sits directly under the 2px rule of the navigation, above the columns. The hero is not used: the main column opens with `.ds-page-header` (32px title, one line of description, one button at the right, a 2px rule below). Under it, in this order when present: the `.ds-stats` line, `.ds-tabs` with the table or list in `.ds-tabs__body`, `.ds-pagination`, then a `.ds-page__rule` and the form. Tabs are a line of text links under the page header, never part of the navigation. The sidebar carries lists that belong to that page, enough of them that the two columns end near each other.\n- Views. The specimen is one small site with five views, one showing at a time; the header, the line of links and the footer are written once around them. `log` is the home page: hero, the newest entry in full, earlier entries as a list, the sections grid. `archive` is a year of entries: figures, tabs over the table, pagination, and the empty state of a section with nothing in it. `entry` is one entry with its comments, the notice that a comment is held, the confirmation for deleting a comment, and the comment form with its error. `readings` is a month of daily figures in a grouped table. `about` is running text, the one boxed note and the list of other logs. A view is `
`; links between views are plain `href=\"#id\"`.\n- Below 800px the columns stack: the sidebar goes under the main column behind a 1px rule, the hero headline drops to `--text-h1`, figures go two to a line, the grid becomes two columns and form labels sit above their fields.\n- Spacing scale: `--space-1` 2px is the vertical padding of the link bar, buttons and inputs; `--space-2` 4px is the padding of table cells, panel titles and tags and the gap under a title; `--space-3` 8px is the page margin, the padding of panels, notices, grid cells and list rows and the gap between buttons; `--space-4` 16px is the gap between paragraphs, under headings and between the columns; `--space-5` 24px is the gap between blocks and the indent of sidebar lists; `--space-6` 40px is the indent of lists and quotations in running text.\n- Fixed sizes: `--size-label` 140px is the label column of a form, `--size-field` 320px a text input (a textarea is twice that), `--size-num` 120px a numeric table column, `--size-dialog` 420px a dialog.\n- On a phone (560px and below) there is no menu button: `.ds-nav__bar` stays a wrapping line of its links, but each `.ds-nav__item` after the first stretches (`flex: 1 1 auto`) and its `|` separator takes the free space, so the links spread across the full width. The current page stays an inverted block.\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- The system's own sans: `--font-body`, `--font-heading` and `--font-ui` are -apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; `--font-mono` is Consolas, Monaco, monospace.\n- `--text-base` and `--text-ui` 16px with `--line-body` 1.4; `--text-small` 14px; `--text-large` 18px. Headings are bold: `--text-display` 36px, `--text-h1` 24px, `--text-h2` 21px, `--text-h3` 16px. Navigation and buttons are regular weight (`--weight-ui` 400).\n- Every link is underlined at rest and on hover; nothing is uppercased or tracked.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour, 8px margin and base type. Everything goes in `.ds-page__frame`; the columns in `.ds-page__columns` with `.ds-page__main` first. `.ds-page__section` is a block of the main column (`--last` drops its bottom gap), `.ds-page__label` its bold caption, `.ds-page__rule` a 2px rule across the column.\n- `.ds-nav`: site header closed by a 2px rule. `.ds-nav__head` holds the `.ds-brand` and `.ds-nav__tagline`, centred on one line. `.ds-nav__bar` is a list of `.ds-nav__item`, each holding one `.ds-nav__link`; the `|` between items is drawn by the stylesheet. The current page is an inverted block: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own, give the link `is-current`.\n- `.ds-brand`: the site's mark and name, a link to the home page, first thing in the header. `.ds-brand__mark` is a plain ruled square as tall as the name (1.2 times `--text-h1`), dressed like the push button: `--fill-button`, the same edge in `--color-input-border` and the same bevel, the mark drawn in `--color-button-text` with square line caps; no radius and no shadow beyond what the tokens give. `.ds-brand__name` is 32px bold underlined text in `--color-heading`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`>`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the introduction of the home page: `.ds-hero__title` (48px bold, line height 1), one `.ds-hero__lead` line at 18px and `.ds-hero__actions` with one button and one text link, closed by a 2px rule. No box, no fill, no centring.\n- `.ds-page-header`: the head of an inner page, instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (32px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A 2px rule closes it.\n- `.ds-stat`: one figure: a bold 24px `.ds-stat__value` followed on the same line by its `.ds-stat__label` in body text. Three to five sit in a `.ds-stats` row between two 1px rules, divided by 1px vertical rules. It is a line of a ruled table, not a set of cards.\n- `.ds-post`: one entry: `.ds-post__date` in monospace above, a `.ds-prose` body, `.ds-post__meta` below with quiet links separated by `|`.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, disc-bulleted and numbered lists indented 40px, `code` in 13px monospace with no background, `blockquote` indented 40px on both sides with no rule.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is for meta and tool links; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: the default push button, a `\n \n \n
\n

Sections

\n \n
\n
\n

Recently

\n \n
\n
\n

This month

\n
\n

Rain against a usual March 75%

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

Elsewhere

\n \n
\n
\n

By year

\n \n
\n
\n

How this is made

\n

Typed into a text file and copied to a server. No tracking, no fonts to download, nothing that moves. More

\n
\n \n \n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. archive
    4. \n
  4. >
    5. \n
  5. 2017
    6. \n
\n
\n
\n\n
\n
\n

Archive for 2017

\n

Every entry written this year, newest month first.

\n
\n
\n
\n\n
    \n
  • 57 entries
    • \n
  • 483 comments
    • \n
  • 212.6 mm of rain
    • \n
  • 31,400 words
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthLongest entryDiscussionComments
March 2017The rain gauge finally agrees with the bucketopen43
February 2017The barometer is wrong againopen118
January 2017Fog, four days of itclosing96
December 2016A year of high waterclosed72
November 2016The gauge post goes inclosed154
\n
\n
\n\n
\n \n
\n\n
\n

Filed under snow

\n
\n

Nothing is filed under “snow” yet. It has not snowed.

\n Back to the log\n
\n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. instruments
    4. \n
  4. >
    5. \n
  5. A wind vane made from a baking tray
    6. \n
\n
\n
\n\n
\n
\n

A wind vane made from a baking tray

\n

2017-03-09 18:10, filed under instruments. Comments are open until 2017-04-08.

\n
\n
All entries
\n
\n\n
\n
\n

The shop vane lasted one winter. This one is a baking tray cut along the diagonal, a bicycle spoke and the bearing out of a dead hard disk, and it has now pointed the right way for eleven days running.

\n

It turns in less wind than the old one did. That is the bearing, not the tray: the tray is only there because it was flat and already ruined.

\n
If it looks home-made, that is because it is. The wind does not mind.
\n

Readings from it go into the same table as everything else, eight compass points and no more, because that is as well as anyone can read a tray from a kitchen window.

\n
\n
\n\n
\n

4 comments

\n
\n

Received. Your comment is held until someone has read it. That can take a day.

\n
\n
    \n
  • \n jpJonas Pell\n

    What stops it spinning right round in a gust? Mine did, and then it unscrewed itself.

    \n

    2017-03-09 22:05 | reply | delete

    \n
    • \n
  • \n ivInes Varga\n

    Nothing stops it. The spoke is bent over at the top, so it can spin as long as it likes.

    \n

    2017-03-10 07:31 | reply

    \n
    • \n
  • \n maMarit Aas\n

    A tray is steel. Give it a year by the sea and you will be writing this entry again.

    \n

    2017-03-11 12:48 | reply

    \n
    • \n
\n
\n\n
\n
\n
\n

Delete your comment?

\n
\n

The comment you posted at 22:05 will be removed from this entry. This cannot be undone.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n

Leave a comment

\n

Not posted. One field below needs another look. Nothing has been sent.

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

That is not an e-mail address.

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

Plain text. Line breaks are kept; addresses become links.

\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
  1. log
    2. \n
  2. >
    3. \n
  3. readings
    4. \n
  4. >
    5. \n
  5. March 2017
    6. \n
\n
\n
\n\n
\n
\n

Readings, March 2017

\n

One line a day, taken at 09:00. Nothing is smoothed or corrected.

\n
\n
\n
\n\n
    \n
  • 61.4 mm of rain
    • \n
  • 71 km/h, strongest gust
    • \n
  • 5.92 m, highest tide
    • \n
  • -2.1 °C, coldest night
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DayWindStateRain, mmHigh tide, mNight low, °C
Week 11
Tue 14SW, freshread4.25.316.4
Mon 13W, strongread18.65.487.0
Week 10
Sun 12W, galeestimated21.05.925.2
Sat 11NW, lightread0.05.601.8
Fri 10N, lightread0.05.44-2.1
Thu 9not readmissing7.85.710.3
Wed 8S, moderateread2.45.394.9
Tue 7SE, lightread0.25.123.3
\n
\n
\n\n
\n \n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. about
    4. \n
\n
\n
\n\n
\n
\n

About this log

\n

Who keeps it, how it is made and what you may do with it.

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

Who writes this

\n
\n

Ines Varga keeps the instruments on a marsh she can see from her kitchen and answers mail slowly. 12 entries this month, filed under instruments tides. Comments on an entry are open for thirty days, closing in the last week and closed after that.

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

How it is made

\n

Every entry is a text file. A script of forty lines turns the files into pages and copies them to a server that costs less than the batteries in the rain gauge. There is no database, so there is nothing to back up except the files, and they are in the archive for anyone to take.

\n
    \n
  1. Write the entry in a text editor.
    2. \n
  2. Run make log.
    3. \n
  3. Read it once on the real page, then leave it alone.
    4. \n
\n

What you may do with it

\n

Copy what you like. The readings are facts and belong to nobody; the entries are mine, and you may quote them at any length if you say where they came from.

\n
\n
\n

What it does not do

\n
\n
\n Does it count me?\n

No. It does not count you, follow you or remember you.

\n
\n
\n What is kept when I comment?\n

Your name beside the comment, and only if you tick the box. The address is read once and thrown away.

\n
\n
\n May I have the readings as a file?\n

Yes. Every month is a plain text file, and so is every year since 2014.

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

Elsewhere

\n \n
\n\n
\n\n \n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.blog.s01.p03.t11.u02.dc\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-13b2-dc\",\n \"short\": \"v1-br-13b2-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0c0c0c;\n --color-canvas: #0c0c0c;\n --color-surface: #0c0c0c;\n --color-surface-alt: #181818;\n --color-surface-strong: #202020;\n --color-bar: #ac130d;\n --color-bar-text: #ffffff;\n --color-bar-alt: #202020;\n --color-bar-alt-text: #a0a0a0;\n --color-inverse: #dedede;\n --color-inverse-text: #0c0c0c;\n --color-text: #dedede;\n --color-text-muted: #a0a0a0;\n --color-heading: #dedede;\n --color-heading-alt: #c4c4c4;\n --color-link: #8ab1ff;\n --color-link-quiet: #a0a0a0;\n --color-link-visited: #5070b1;\n --color-link-hover: #ffffff;\n --color-link-active: #ffffff;\n --color-border: #585858;\n --color-border-strong: #a0a0a0;\n --color-border-muted: #303030;\n --color-accent: #ac130d;\n --color-accent-text: #ffffff;\n --color-accent-alt: #d4b106;\n --color-fill-1: #3b320d;\n --color-fill-2: #3b1719;\n --color-fill-3: #15293d;\n --color-fill-4: #202020;\n --color-button: #303030;\n --color-button-text: #dedede;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #181818;\n --color-button-secondary-text: #c4c4c4;\n --color-input: #181818;\n --color-input-text: #dedede;\n --color-input-border: #707070;\n --color-disabled: #202020;\n --color-disabled-text: #707070;\n --color-danger: #f0706a;\n --color-danger-surface: #3b1719;\n --color-success: #8fc07a;\n --color-warning: #d4b106;\n --color-notice: #15293d;\n --color-notice-text: #dedede;\n --color-focus: #8ab1ff;\n --color-shadow: #000000;\n --color-overlay: #181818;\n}\n\n/* @part type */\n:root {\n --font-body: -apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-heading: -apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-ui: -apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-mono: Consolas, Monaco, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 36px;\n --text-h1: 24px;\n --text-h2: 21px;\n --text-h3: 16px;\n --line-body: 1.4;\n --line-heading: 1.3;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-surface-alt);\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: transparent;\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: transparent;\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }