{ "id": "v1-tm-6776", "long_id": "v1.terminal.forum.s06.p07.t07.u06", "name": "Terminal, a bulletin board in amber", "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": "forum", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is a dial-up bulletin board as its revivals of 2015 to 2026 put it on the web: a forum that lives in one terminal window. One monospace face sets everything, amber text glows on a dark brown screen, boxes are drawn with double lines whose titles are cut into the top edge, and every choice has a letter. It was the look of retro-computing communities, telnet boards with a web front, and the text-mode forums of people who missed the modem.", "url": "https://chrono.skin/s/v1-tm-6776", "preview_url": "https://chrono.skin/s/v1-tm-6776/specimen.html", "files": { "STYLE.md": "# Terminal, a bulletin board in amber\n\n## Summary\n\nThis is a dial-up bulletin board as its revivals of 2015 to 2026 put it on the web: a forum that lives in one terminal window. One monospace face sets everything, amber text glows on a dark brown screen, boxes are drawn with double lines whose titles are cut into the top edge, and every choice has a letter. It was the look of retro-computing communities, telnet boards with a web front, and the text-mode forums of people who missed the modem.\n\n## Layout\n\n- The page is designed for a 1280px window; the content is narrow and fixed. `.ds-window` is one terminal window of `--size-page` (940px, about ninety columns) in the middle of `--fill-page`, `--space-4` from the top: a frame of `--border-width` in `--color-border-strong` on `--color-canvas` with `--shadow-dialog`. It holds, top to bottom, `.ds-window__title` (a small line on `--fill-bar-alt`: what was dialled, the node, the size of the screen), the menu line `.ds-nav`, `.ds-main` (the views, padded `--space-3` and `3ch`) and the status line `.ds-footer`.\n- `.ds-nav` is one line on `--fill-bar`: the `.ds-brand` at the left and `.ds-nav__list` at the right, whose `.ds-nav__link` items each open with their letter in parentheses (`.ds-nav__hot`); the current one is a hole in the bar (`--color-canvas` with `--color-heading`).\n- The home view is one column, top to bottom: `.ds-hero`, the banner after login, centred between two `.ds-hero__shade` rules of typed shade characters; then `.ds-section` blocks `--space-4` (33px) apart: the `.ds-stats` line, the main menu as a `.ds-grid` two by two, the table of boards with its group rows, and `.ds-cols--even`: the newest messages as a list beside the sysop's panel.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` as a path, then `.ds-page-header`, then one column of work: tabs over a list, or notices over messages. `.ds-cols` puts a `--size-side` (230px) sidebar at the right of the messages of a topic; `--form` is 3 to 2 (the form beside a dialog and a panel); `--even` is two equal columns. `.ds-col` is a column that may shrink, `.ds-stack` piles frames `--space-3` apart.\n- Views. The specimen is one small site with four views, one showing at a time; title line, menu line and status line are written once around them. `home` is the main menu. `board` is one board: tabs, the list of topics, pagination and the empty state of the caller's own topics. `thread` is a topic: two notices, its messages as `.ds-post` frames (the first with running text, the last with a quote and links), and a sidebar with the writers and the legend of badges. `post` is the form for writing a message with its four buttons, the confirmation dialog and a panel. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in parts of one 22px text line: `--space-1` 4px is the vertical padding of buttons, inputs, table cells, tabs and the three lines of the window; `--space-2` 11px the padding above the text in a frame, the gap between a rule and what follows and between list rows; `--space-3` 22px the gap between paragraphs, between messages, under a page header and around the banner's title; `--space-4` 33px the gap between sections and above the window; `--space-5` 55px the space below the window. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 120px the label column of a form, `--size-field` 400px a text input, `--size-date` 110px the date column of the list, `--size-dialog` 360px a dialog.\n- Below 900px the window fills the screen and loses its frame, its title line keeps only the first item, columns stack with the sidebar last, the menu grid becomes one column, form labels sit above their fields, list dates sit above their entries, and table cells marked `.ds-table__extra` are left out. The page never scrolls sideways. Below 600px `.ds-nav__list` takes a row of its own under the brand with its `.ds-nav__link` items evenly spread, the current one still a hole in the bar, and the footer stacks with `.ds-footer__keys` as one spread row. 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 (\"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace). Weights are `--weight-body` 400 and 700 for headings, names, bar items (`--weight-ui`) and the brand. Nothing is tracked and nothing is set in capitals: `--heading-transform` and `--ui-transform` are none.\n- Sizes are one size with two exceptions, as on a screen of 80 by 25 cells: `--text-base` 16px with `--line-body` 1.2 is all running text, `--text-ui` 16px bars, buttons, inputs, tabs and pagination, `--text-small` 15px meta lines, hints, badges, the footer and code blocks, `--text-large` 18px the hero's lead and the brand name. `--text-display` 26px is the hero title only, `--text-h1` 20px a page title, a figure and the first heading of running text; `--text-h2` and `--text-h3` are 16px and differ from text by weight and colour.\n- The DOS screen: `--color-page` #000070 is the desktop behind the program (`--fill-page` dithers it with a 4px check of a darker blue), `--color-canvas` #0000a8 the screen, `--color-surface` #0000a8 the inside of frames and table rows, `--color-surface-alt` #00008c alternate rows and code, `--color-surface-strong` #1818c4 group rows, inline code, the cell of an avatar and a line that names the reader. `--color-text` #c6c6c6 is running text, `--color-text-muted` #86a4dc times, counts and hints, `--color-heading` #ffffff headings, names and figures, `--color-heading-alt` #ffff54 frame titles, third headings and tags.\n- Links: `--color-link` #54ffff, `--color-link-quiet` #a8e0ff for breadcrumb, tabs, sidebar and footer links, `--color-link-visited` #dca8ff, `--color-link-hover` #ffffff, `--color-link-active` #ffff54. `--link-decoration` is none: a link is known by its colour, and takes `--link-decoration-hover` (underline) when hovered.\n- Bars: `--color-bar` #00a8a8 with `--color-bar-text` #000000 is the topic line and the head row of a table. `--color-bar-alt` #a8a8a8 with `--color-bar-alt-text` #000000 is the window list. `--color-inverse` #54ffff with `--color-inverse-text` #000000 is inverse video: the current tab, page number and sidebar link, the selected table row, the hovered menu item, the half of a switch that holds.\n- Lines: `--color-border` #a8a8a8 at `--border-width` 1px `--border-style` solid draws every frame and rule; `--color-border-strong` #ffffff at `--border-width-strong` 3px is the rule under a page header, the left edge of the hero, of a notice and of a mentioned line, and the frame of a dialog and a menu; `--color-border-muted` #3c3cd0 parts rows inside a frame.\n- Accents: `--color-accent` #ffff54 with `--color-accent-text` #000000 is the count badge and the mark of a mentioned line; `--color-accent-alt` #54ff54 is the prompt sign, the reader's own name at the input line and the fold marks of a tree. `--color-fill-1` to `--color-fill-4` (#0000a8, #00008c, #004c8c, #1818c4) are the four grid cells and two of the avatar cells. Status words are text in brackets: `--color-success` #54ff54, `--color-warning` #ffb454, `--color-danger` #ff8080; progress bars use the same three.\n- Controls: the primary button is `--color-button` #00a800 with `--color-button-text` #000000; the secondary button is `--color-button-secondary` #000070 with `--color-button-secondary-text` #54ffff and a frame in `--color-border`; fields are `--color-input` #000058 with `--color-input-text` #ffffff and a line in `--color-input-border` #00a8a8; disabled is `--color-disabled` #00008c with `--color-disabled-text` #6464e0. The notice is `--color-notice` #005c78 with `--color-notice-text` #ffffff, the error notice `--color-danger-surface` #400014 with `--color-danger`. `--color-overlay` #000058 is the block a dialog stands on; `--color-focus` #ffff54 is the focus outline.\n- Surface: everything is square and every shadow is a hard black block, as a text screen draws it: `--shadow-control` 3px 3px on buttons and fields (1px 1px when pressed), `--shadow-panel` 6px 5px on frames, `--shadow-dialog` 16px 12px on the hero, a dialog and a pulled-down menu, none of them blurred. `--shadow-text` is none. Buttons and fields are filled (`--fill-button-secondary`, `--fill-input`); `--fill-button-hover` lightens the button (60% of it over white). All four radii are 0, `--backdrop-blur` is 0px, `--focus-ring` is 3px solid var(--color-focus), `--transition` is none.\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`. `--color-button-secondary-text` and `--color-input-text` must read on their own fills and on the canvas and surfaces, because a surface set may leave those controls unfilled. The current item of a bar is a hole in it: `--color-canvas` with `--color-heading`. Nothing but a link in the bar's own text colour, 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; the log's columns are `6ch` for the time and `17ch` for the name; an avatar is at least `4ch` wide; a pulled-down menu is at least `28ch` and a tooltip at most `34ch` wide; horizontal paddings and gaps are whole character cells.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-window` is the framed window with its `.ds-window__title` line, `.ds-main` the padded area the views sit in; `.ds-cols` (`--even`, `--form`) are column pairs, `.ds-col` a column that may shrink, `.ds-stack` a pile of frames, `.ds-section` a block of the page.\n- `.ds-nav`: the menu line, described under Layout. The stylesheet marks the `.ds-nav__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`: the banner of the home view, centred: a `.ds-hero__shade` rule (shade characters, light to full to light, in `--color-border`), `.ds-hero__title` (`--text-display`, tracked), `.ds-hero__lead`, a `.ds-buttons` row, a small muted `.ds-hero__note` (the last call), and a second shade rule.\n- `.ds-footer`: the status line on `--fill-bar-alt`: `.ds-footer__keys`, a list of `.ds-key` hints each holding a `.ds-footer__link`, and a `.ds-footer__text` at the right (node, time left, clock).\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` in `--color-border-strong` closes it.\n- `.ds-prose`: running text, at most 78 characters wide: h1, h2, h3 (the third in `--color-heading-alt`), paragraphs, lists whose bullet is a typed dash, `code` on `--color-surface-strong`, `strong` in the heading 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 (`[reply]`). `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n        \n        \n        \n      \n    \n    
\n      
\n        
\n          
throw it away?
\n          
\n            
Three lines of your reply are not saved as a draft.
\n            
\n              \n              \n            
\n          
\n        
\n      
\n      
\n        
house rules
\n        
\n          
Say which machine. Quote two lines, not twenty. Files go in the file area, not in a message.
\n          
\n          
\n          How long may a message be?\n          
\n          
As long as it needs, in lines of 72 columns.
\n          
\n          
\n          
\n          Where do files go?\n          
\n          
In the file area. A message only names them.
\n          
\n          
\n          
\n        
\n      
\n    
\n  \n
\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.forum.s06.p07.t07.u06\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"forum\",\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-6776\",\n \"short\": \"v1-tm-6776\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000070;\n --color-canvas: #0000a8;\n --color-surface: #0000a8;\n --color-surface-alt: #00008c;\n --color-surface-strong: #1818c4;\n --color-bar: #00a8a8;\n --color-bar-text: #000000;\n --color-bar-alt: #a8a8a8;\n --color-bar-alt-text: #000000;\n --color-inverse: #54ffff;\n --color-inverse-text: #000000;\n --color-text: #c6c6c6;\n --color-text-muted: #86a4dc;\n --color-heading: #ffffff;\n --color-heading-alt: #ffff54;\n --color-link: #54ffff;\n --color-link-quiet: #a8e0ff;\n --color-link-visited: #dca8ff;\n --color-link-hover: #ffffff;\n --color-link-active: #ffff54;\n --color-border: #a8a8a8;\n --color-border-strong: #ffffff;\n --color-border-muted: #3c3cd0;\n --color-accent: #ffff54;\n --color-accent-text: #000000;\n --color-accent-alt: #54ff54;\n --color-fill-1: #0000a8;\n --color-fill-2: #00008c;\n --color-fill-3: #004c8c;\n --color-fill-4: #1818c4;\n --color-button: #00a800;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #000070;\n --color-button-secondary-text: #54ffff;\n --color-input: #000058;\n --color-input-text: #ffffff;\n --color-input-border: #00a8a8;\n --color-disabled: #00008c;\n --color-disabled-text: #6464e0;\n --color-danger: #ff8080;\n --color-danger-surface: #400014;\n --color-success: #54ff54;\n --color-warning: #ffb454;\n --color-notice: #005c78;\n --color-notice-text: #ffffff;\n --color-focus: #ffff54;\n --color-shadow: #000000;\n --color-overlay: #000058;\n}\n\n/* @part type */\n:root {\n --font-body: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-heading: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-ui: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-mono: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 15px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 26px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 16px;\n --line-body: 1.2;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 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: 3px;\n --border-width-strong: 6px;\n --border-style: double;\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 1px var(--color-button);\n --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n --shadow-dialog: none;\n --shadow-text: 0 0 6px color-mix(in srgb, var(--color-heading) 45%, transparent);\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: transparent;\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: transparent;\n --fill-input: transparent;\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }