{ "id": "v1-tm-3545", "long_id": "v1.terminal.blog.s03.p05.t04.u05", "name": "Terminal, a personal site as a shell session", "era": { "slug": "terminal", "code": "tm", "name": "Terminal", "years": [ 2015, 2026 ], "description": "The text-terminal look of 2015 to 2026: a monospace face for everything, bright text on a dark screen, boxes and rules drawn with borders like character frames, prompts and cursors, status lines and key hints instead of buttons with chrome." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is a personal site or weblog written as a shell session, common from 2015 to 2026 among programmers who wanted a home page that looked like where they work. Every block of the page is the output of a command typed at a prompt above it: the introduction answers `whoami`, the posts are a long directory listing with modes, sizes and dates, and the page ends at an empty prompt with a block cursor. One monospace face sets everything, frames are one-cell lines with their titles cut in, and an editor's status line is stuck to the foot of the window.", "url": "https://chrono.skin/s/v1-tm-3545", "preview_url": "https://chrono.skin/s/v1-tm-3545/specimen.html", "files": { "STYLE.md": "# Terminal, a personal site as a shell session\n\n## Summary\n\nThis is a personal site or weblog written as a shell session, common from 2015 to 2026 among programmers who wanted a home page that looked like where they work. Every block of the page is the output of a command typed at a prompt above it: the introduction answers `whoami`, the posts are a long directory listing with modes, sizes and dates, and the page ends at an empty prompt with a block cursor. One monospace face sets everything, frames are one-cell lines with their titles cut in, and an editor's status line is stuck to the foot of the window.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch: `.ds-session` is one centred column of at most `--size-page` (920px) on `--color-canvas`, with `3ch` of side padding, at least as tall as the window. It holds the header, the views and the footer.\n- `.ds-nav` is the first line of the session, with a rule below: the `.ds-brand`, then `.ds-nav__list` whose `.ds-nav__link` items are written as paths under the home directory (`~/posts`; the stylesheet adds the `~/`), and a muted `.ds-nav__host` at the right. The current link is inverse video.\n- The page is a rhythm of prompt and output: a `.ds-prompt` line, then what it prints in `.ds-out` (or a component with its own margin), `--space-4` (36px) before the next prompt. Nothing is boxed unless the command would print a box.\n- The home view is `.ds-cols`: the session at the left and a `--size-side` (230px) column at the right. The session runs four commands: `whoami` prints the `.ds-hero`, `wc` the `.ds-stats` line, `ls -lt` the `.ds-list` of posts, `ls projects/` the `.ds-grid`, two cells across; it ends at an empty prompt with the `.ds-cursor`. The right column is the `.ds-sidebar` (always at the right): framed blocks of tags and links and one panel.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` as a path from `~`, then `.ds-page-header` (the post view has only the path and the typed `cat` line, because the text starts with its own title). The archive is one column: prompt, tabs written as options, the table in `.ds-tabs__body`, pagination, then the empty state under its own prompt. A post is `.ds-cols` with the text at the left and the sidebar at the right. About and contact are `.ds-cols--even`, two halves each under its own prompt.\n- Views. The specimen is one small site with five views, one showing at a time; header and footer are written once around them. `home` is the session described above. `posts` is the archive. `post` is one post: notices, running text with a listing, related links, pagination, beside its figures, badges and contents. `about` is a text beside a table and a panel. `contact` is the form with its error and four buttons, beside the dialog that asks before a draft is removed. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in quarters and multiples of one 24px text line: `--space-1` 6px is the vertical padding of buttons, inputs, tabs and listing rows; `--space-2` 12px the gap between a prompt and its output and the padding in a frame; `--space-3` 24px the gap between paragraphs and under the header; `--space-4` 36px the gap between one command's output and the next prompt; `--space-5` 48px the room kept above the status line.\n- Fixed sizes: `--size-label` 120px the label column of a form, `--size-field` 480px a text input, `--size-date` 110px the date column of the listing, `--size-dialog` 420px a dialog.\n- Below 900px there is one column: the sidebar goes under the session, the grid is one cell across, the listing keeps its date and name and drops mode and size, form labels sit above their fields, and table cells marked `.ds-table__extra` are left out. The status line stays stuck to the foot. The page never scrolls sideways; only a `.ds-code` block does, inside itself. The `.ds-nav__list` of paths is not shown there: `.ds-nav__menu`, a `.ds-menu` whose `.ds-menu__title` reads \"menu\", stands at the right of the header line with one `.ds-menu__item` per view (the one on screen in inverse video), and `.ds-nav__host` is left out. A `.ds-tooltip__tip` opens under its line across the width of the window.\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- One face for everything: `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same monospace stack (\"Hack\", \"Liberation Mono\", Monaco, \"Lucida Console\", monospace). Weights are `--weight-body` 400 and 800 for bold, headings, the display size and (`--weight-ui`) navigation and buttons. Nothing is tracked.\n- Sizes hardly differ, as on a printed listing: `--text-base` 16px with `--line-body` 1.25 is all running text and, as `--text-large`, the lead; `--text-ui` 14px navigation, buttons, inputs, tabs and pagination; `--text-small` 14px meta lines, hints, badges, code blocks and the footer. `--text-display` 28px is the hero title only, `--text-h1` 24px a page title, figures and section numbers; `--text-h2` and `--text-h3` are 16px, told from text by weight and capitals. `--heading-transform` and `--ui-transform` are uppercase.\n- Ink on paper: black, white and three greys, with a red, a blue and a marker yellow as the only colours.\n- The paper: `--color-page` #e8e8e8 is the desk, `--color-canvas` #ffffff the sheet, `--color-surface` #ffffff the inside of frames and table rows, `--color-surface-alt` #f3f3f3 the rail, alternate rows and code blocks, `--color-surface-strong` #dedede group rows and inline code. `--color-text` #1c1c1c is running text, `--color-text-muted` #636363 dates, counts, hints and the tree's lines, `--color-heading` #000000 headings and figures, `--color-heading-alt` #a3001b frame titles, option names, tags and the roots of the tree.\n- Links: `--color-link` #0037a6, `--color-link-quiet` #1c1c1c for the rail, breadcrumb, tabs and sidebar links, `--color-link-visited` #6a2c91, `--color-link-hover` #000000, `--color-link-active` #a3001b. `--link-decoration` is underline; a hovered link loses it (`--link-decoration-hover` none); `--link-decoration-quiet` is none.\n- Bars: `--color-bar` #000000 with `--color-bar-text` #ffffff is the head row of a table. `--color-bar-alt` #dedede with `--color-bar-alt-text` #000000 is the footer line. `--color-inverse` #000000 with `--color-inverse-text` #ffffff is inverse video: the current link of the rail, tab, page number and sidebar link, a selected row.\n- Lines: `--color-border` and `--color-border-strong` are both #000000 and `--border-width` and `--border-width-strong` both 2px solid: one heavy line draws every frame, rule, table cell and field. `--color-border-muted` #c4c4c4 parts rows inside a frame and boxes the empty state.\n- Accents: `--color-accent` #ffe14d with `--color-accent-text` #000000 is the count badge and a search hit; `--color-accent-alt` #006f80 is the prompt sign and flags in a synopsis. `--color-fill-1` to `--color-fill-4` (#ffffff, #f3f3f3, #e8e8e8, #f3f3f3) are the four grid cells. Status words: `--color-success` #1a7a1a, `--color-warning` #8a5a00, `--color-danger` #a3001b.\n- Controls: the primary button is `--color-button` #000000 with `--color-button-text` #ffffff (`--color-button-hover-text` #ffe14d); the secondary button is `--color-button-secondary` #ffffff with #000000 text; fields are unfilled (`--fill-input` transparent) with `--color-input-text` #000000 and a line in `--color-input-border` #000000; disabled is `--color-disabled` #e8e8e8 with `--color-disabled-text` #8a8a8a. The notice is `--color-notice` #f3f3f3 with `--color-notice-text` #1c1c1c, the error notice `--color-danger-surface` #fbe9ec with `--color-danger`. `--color-overlay` #c4c4c4 is the block a dialog stands on; `--color-focus` #0037a6 the focus outline, `--focus-ring` 2px dotted.\n- Surface: boxes throw hard block shadows in `--color-shadow` #000000 with no blur: `--shadow-panel` 4px 4px on panels, sidebar frames, the synopsis box and grid cells, `--shadow-control` 2px 2px on buttons, fields and the brand tile (4px when hovered, inset when pressed), `--shadow-dialog` 12px 12px. `--fill-panel` is `--color-surface`; `--fill-button-hover` lightens the button. `--shadow-text` is none, all four radii are 0, `--backdrop-blur` is 0px and `--transition` is none. The only motion is the blinking `.ds-cursor`, under `prefers-reduced-motion: no-preference`.\n- The era's rule for which text stands on which fill (every layout of the era keeps it, so any palette works with any layout): `--color-text`, `--color-text-muted`, the two heading colours, every link colour and the three status colours stand on `--fill-page`, `--color-canvas`, the three surfaces, `--fill-panel` and the four fills, and on nothing else. `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`; `--color-accent-text` only on `--fill-accent`; `--color-button-text` and `--color-button-hover-text` only on `--fill-button` and its hover; `--color-notice-text` only on `--color-notice`; `--color-danger` also on `--color-danger-surface`; `--color-disabled-text` on `--color-disabled`. Two tokens must read in two places, because a surface set may leave a control unfilled: `--color-button-secondary-text` on `--fill-button-secondary` and on the canvas and surfaces, `--color-input-text` on `--fill-input` and on the canvas and surfaces. Whatever is current or selected is inverse video (`--fill-inverse` with `--color-inverse-text`); where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`.\n- One-off sizes written with `calc()` or `ch`: a frame title is lifted by half of `--text-h3` times `--line-body` so that the frame's top line runs through it; the brand tile is one text line square; horizontal paddings, column gaps and the indents of a manual page are whole character cells; the checkbox is `2ch` square.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-session` is the centred column; `.ds-cols` (`--even`) are its column pairs, `.ds-main` a column that may shrink, `.ds-out` the output of one command.\n- `.ds-nav`: the header line. `.ds-nav__list` holds `.ds-nav__link` items written as paths, and `.ds-nav__host` is the muted text at the right. 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-hero`: what `whoami` prints: `.ds-hero__title` (`--text-display`), `.ds-hero__lead` at most 62 characters wide, and a `.ds-buttons` row. No box, no fill, left-aligned, under its prompt.\n- `.ds-footer`: an editor's status line on `--fill-bar-alt`, stuck to the foot of the window: `.ds-footer__mode` (a bold word on `--fill-bar`), then `.ds-footer__seg` segments, the last pushed right with `.ds-footer__seg--right`; links in it are `.ds-footer__link`, key hints `.ds-key`.\n- `.ds-brand`: the site's mark and name, a link to the home view, first thing in the header. `.ds-brand__mark` is a tile one text line square, dressed like the primary button (`--fill-button`, `--color-button-text`, the button's frame, `--radius-control`, `--shadow-control`); `.ds-brand__name` is bold at `--text-large`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a path: `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`) and one muted `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A rule of `--border-width-strong` closes it.\n- `.ds-prose`: running text, at most 78 characters wide: h1, h2, h3, paragraphs, lists whose bullet is a typed dash, `code` on `--color-surface-strong`, `strong` in the heading colour. Headings keep their marks, as in the source file: the stylesheet writes `#`, `##` or `###` before them in the muted colour. Anything typed literally goes in `.ds-code`, a `
` at `--text-small` on `--color-surface-alt` in a frame; it scrolls sideways inside itself.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta and tool links, `.ds-link--bracket` for a link written as a word in brackets (`[copy]`, `[get]`). `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n          \n          \n          \n        \n      \n    \n    
\n      
~ $ rm draft.txt
\n      
\n        
\n          
rm: remove draft.txt?
\n          
\n            
The message has not been sent. Clearing the form throws away 14 words.
\n            
\n              \n              \n            
\n          
\n        
\n      
\n      
Answers usually take a few days. The address is never passed on and the form sets no cookie.
\n    
\n  \n
\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.blog.s03.p05.t04.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-tm-3545\",\n \"short\": \"v1-tm-3545\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #0b0b0b;\n --color-surface: #121212;\n --color-surface-alt: #1c1c1c;\n --color-surface-strong: #303030;\n --color-bar: #87afff;\n --color-bar-text: #000000;\n --color-bar-alt: #303030;\n --color-bar-alt-text: #d0d0d0;\n --color-inverse: #bbbbbb;\n --color-inverse-text: #000000;\n --color-text: #bbbbbb;\n --color-text-muted: #8a8a8a;\n --color-heading: #ffffff;\n --color-heading-alt: #ffff00;\n --color-link: #87afff;\n --color-link-quiet: #bbbbbb;\n --color-link-visited: #af87ff;\n --color-link-hover: #ffffff;\n --color-link-active: #ffff00;\n --color-border: #585858;\n --color-border-strong: #bbbbbb;\n --color-border-muted: #303030;\n --color-accent: #ffff00;\n --color-accent-text: #000000;\n --color-accent-alt: #00d7d7;\n --color-fill-1: #0f1b2d;\n --color-fill-2: #0f2414;\n --color-fill-3: #2b2410;\n --color-fill-4: #24122a;\n --color-button: #00d7d7;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #303030;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #ffffff;\n --color-input-border: #585858;\n --color-disabled: #1c1c1c;\n --color-disabled-text: #585858;\n --color-danger: #ff5555;\n --color-danger-surface: #2a0a0a;\n --color-success: #5fd700;\n --color-warning: #ffaf00;\n --color-notice: #0f1b2d;\n --color-notice-text: #afd7ff;\n --color-focus: #ffff00;\n --color-shadow: #3a3a3a;\n --color-overlay: #1c1c1c;\n}\n\n/* @part type */\n:root {\n --font-body: \"Hack\", \"Liberation Mono\", Monaco, \"Lucida Console\", monospace;\n --font-heading: \"Hack\", \"Liberation Mono\", Monaco, \"Lucida Console\", monospace;\n --font-ui: \"Hack\", \"Liberation Mono\", Monaco, \"Lucida Console\", monospace;\n --font-mono: \"Hack\", \"Liberation Mono\", Monaco, \"Lucida Console\", monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 14px;\n --text-large: 16px;\n --text-display: 28px;\n --text-h1: 24px;\n --text-h2: 16px;\n --text-h3: 16px;\n --line-body: 1.25;\n --line-heading: 1.25;\n --line-display: 1.25;\n --weight-body: 400;\n --weight-bold: 800;\n --weight-heading: 800;\n --weight-display: 800;\n --weight-ui: 800;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\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 var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: inset 0 -2px 0 var(--color-focus);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-shadow);\n --shadow-dialog: 4px 4px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 75%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }