{ "id": "v1-tm-3233", "long_id": "v1.terminal.blog.s03.p02.t03.u03", "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 }, "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-3233", "preview_url": "https://chrono.skin/s/v1-tm-3233/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 720px 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.\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 (\"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace). Weights are `--weight-body` 400, bold and `--weight-ui` 700, and `--weight-display` 800 for the hero title. The stack starts with SF Mono and Cascadia Code, the faces terminal programs ship with. Nothing is tracked: `--heading-tracking` and `--display-tracking` are 0.\n- Sizes stay close to one size, as on a screen of character cells: `--text-base` 14px with `--line-body` 1.45 is all running text, `--text-ui` 13px navigation, buttons, inputs, tabs and pagination, `--text-small` 12px meta lines, hints, badges, code blocks and the status line, `--text-large` 16px the hero's lead and the brand name. Headings are told apart by weight and colour more than by size: `--text-display` 32px is the hero title only, `--text-h1` 20px a page title and the first heading of running text, `--text-h2` 16px section rules and second headings, `--text-h3` 14px frame titles, grid titles and third headings. `--heading-transform` is none, `--ui-transform` is none.\n- A modern sixteen-colour scheme on blue-grey, with each colour given a role: cyan for links, blue for quiet links, bars and heavy rules, magenta for the primary button, the prompt path, frame titles and tags, yellow for the accent, focus and warnings, green and red for status.\n- The screen: `--color-page` #181825 is the window, `--color-canvas` #1e1e2e the sheet the text stands on, `--color-surface` #24253a the inside of frames and table rows, `--color-surface-alt` #2a2b40 alternate rows, code blocks and the install line, `--color-surface-strong` #45475a group rows and inline code. `--color-text` #bac2de is running text, `--color-text-muted` #9399b2 dates, counts, hints and the brackets of fields, `--color-heading` #cdd6f4 headings, typed commands and figures, `--color-heading-alt` #cba6f7 frame titles, third headings and tags.\n- Links: `--color-link` #89dceb, `--color-link-quiet` #89b4fa for navigation, breadcrumb, tabs and sidebar links, `--color-link-visited` #b4befe, `--color-link-hover` #f5c2e7, `--color-link-active` #f9e2af. `--link-decoration` is underline for links in text and titles, `--link-decoration-quiet` none for navigation, and every link takes `--link-decoration-hover` (underline) when hovered. A link may also be marked by brackets (`.ds-link--bracket`).\n- Bars: `--color-bar` #89b4fa with `--color-bar-text` #11111b is the head row of a table and, where a layout has one, the menu line and the labels of the key bar. `--color-bar-alt` #313244 with `--color-bar-alt-text` #cdd6f4 is the status line at the foot. `--color-inverse` #cdd6f4 with `--color-inverse-text` #1e1e2e is inverse video: the current navigation link, tab, page number and sidebar link, the selected table row, a text selection.\n- Lines: `--color-border` #585b70 at `--border-width` 2px `--border-style` solid draws every frame and rule; `--color-border-strong` #89b4fa at `--border-width-strong` 4px is the rule under a page header, the left edge of a notice and the frame of a dialog; `--color-border-muted` #3b3d54 parts rows inside a frame and boxes the empty state.\n- Accents: `--color-accent` #f9e2af with `--color-accent-text` #1e1e2e is the count badge; `--color-accent-alt` #cba6f7 is the prompt sign and flag letters. `--color-fill-1` to `--color-fill-4` (#1e2a3a, #2a2238, #2e2a24, #1f2e2a) are the four grid cells. Status words are text in brackets: `--color-success` #a6e3a1, `--color-warning` #f9e2af, `--color-danger` #f38ba8; meters use the first two.\n- Controls: the primary button is `--color-button` #cba6f7 with `--color-button-text` #11111b; the secondary button is `--fill-button-secondary` with `--color-button-secondary-text` #cdd6f4 and a frame in `--color-border`; fields are `--fill-input` with `--color-input-text` #cdd6f4 and a line in `--color-input-border` #585b70; disabled is `--color-disabled` #313244 with `--color-disabled-text` #6c7086. The notice is `--color-notice` #1e2a3a with `--color-notice-text` #b4d8f0, the error notice `--color-danger-surface` #302030 with `--color-danger`. `--color-overlay` #313244 is the block a dialog stands on; `--color-focus` #f9e2af is the focus outline.\n- Surface: Lines are 2px and solid, the heavy rule 4px. `--fill-panel` is `--color-surface`; `--fill-button-secondary` and `--fill-input` are their own colours; `--fill-button-hover` lightens the button (60% of it over white). Shadows are hard lines and blocks only: `--shadow-control-hover` is a 2px ring in `--color-focus`, `--shadow-control-pressed` a 2px inner line in `--color-shadow`, and `--shadow-dialog` drops a block of `--color-shadow` 8px down and right, the way a text-mode dialog throws its shadow one cell away; `--shadow-panel`, `--shadow-control` and `--shadow-text` are none. All four radii are 0 and `--backdrop-blur` is 0px. `--focus-ring` is 2px solid var(--color-focus); `--transition` is none: states change at once. The only motion is the blinking `.ds-cursor`, and only under `prefers-reduced-motion: no-preference`.\n- The era's rule for which text stands on which fill (all three layouts keep 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. Where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`. Nothing but a button, a badge or a key label stands on a bar or an inverse block.\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 (`--text-base` times `--line-body`); horizontal paddings and column gaps are whole character cells (`1ch`, `2ch`, `3ch`, `4ch`); 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.p02.t03.u03\",\n \"library\": \"2026.10.07-2111\",\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 },\n \"source\": \"https://chrono.skin/s/v1-tm-3233\",\n \"short\": \"v1-tm-3233\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #efe6c8;\n --color-canvas: #fbf5dc;\n --color-surface: #fbf5dc;\n --color-surface-alt: #f1e9c9;\n --color-surface-strong: #e4d9b0;\n --color-bar: #3b2a1a;\n --color-bar-text: #fbf5dc;\n --color-bar-alt: #e4d9b0;\n --color-bar-alt-text: #3b2a1a;\n --color-inverse: #3b2a1a;\n --color-inverse-text: #fbf5dc;\n --color-text: #3b2a1a;\n --color-text-muted: #7a6748;\n --color-heading: #1f140a;\n --color-heading-alt: #9a4a00;\n --color-link: #a64b00;\n --color-link-quiet: #3b2a1a;\n --color-link-visited: #6b4a6e;\n --color-link-hover: #1f140a;\n --color-link-active: #c2410c;\n --color-border: #8c7a58;\n --color-border-strong: #3b2a1a;\n --color-border-muted: #cfc39c;\n --color-accent: #c2410c;\n --color-accent-text: #fffbdc;\n --color-accent-alt: #1a6fb0;\n --color-fill-1: #fbf5dc;\n --color-fill-2: #f1e9c9;\n --color-fill-3: #e4d9b0;\n --color-fill-4: #f1e9c9;\n --color-button: #3b2a1a;\n --color-button-text: #fbf5dc;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f1e9c9;\n --color-button-secondary-text: #3b2a1a;\n --color-input: #fffdf0;\n --color-input-text: #1f140a;\n --color-input-border: #8c7a58;\n --color-disabled: #e4d9b0;\n --color-disabled-text: #9c8c6a;\n --color-danger: #b3123f;\n --color-danger-surface: #f8e1d4;\n --color-success: #3d7a1c;\n --color-warning: #a86400;\n --color-notice: #f1e9c9;\n --color-notice-text: #3b2a1a;\n --color-focus: #c2410c;\n --color-shadow: #8c7a58;\n --color-overlay: #e4d9b0;\n}\n\n/* @part type */\n:root {\n --font-body: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-heading: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-ui: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-mono: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 32px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 14px;\n --line-body: 1.45;\n --line-heading: 1.3;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 4px;\n --border-style: solid;\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: 0 0 0 2px var(--color-focus);\n --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n --shadow-dialog: 8px 8px 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-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 60%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }