v0.9.0
design / Components

Components

.head — the header: the wr mark with a block cursor, the version, the

v0.9.0 06 / 09 2 min read docs/DESIGN.md
  • .head — the header: the wr mark with a block cursor, the version, the five destinations (the current one has an accent underline that slides in), the search trigger with its key caps (⌘K on a Mac), the theme dot and GitHub. A progress line in the accent sits on its bottom edge. On a narrow screen the destinations move into .mnav.
  • .status — a status line fixed to the bottom, like a terminal multiplexer: a mode block (WR, GUIDE, REF, …), the path (~/docs/guide/start), then / search, ? keys, the reading position and the version.
  • .pal — the dialog shape shared by the command palette (data-palette), the theme dialog (data-theme-modal) and the keyboard map (data-help). The selected row is inverted with the accent, the way the program highlights a line. The palette searches the text of every page (the same index as the search page) and also lists the pages, the guide’s sections, the themes and a few actions; items with a destination are real links without JavaScript.
  • .install — the install box: tabs (script, go install, source), one command, a copy button and a one-line note.
  • .win — a terminal window; #reel is the product window, whose tabs are the recorded scenes and whose command line types the key that produced each frame.
  • .vs — the noise-versus-signal demo: the clutter of a page is struck out and removed piece by piece the first time it is seen.
  • .cells, .steps, .keys-grid, .tiles, .doors — 1px-gap grids on a line-colored background, so the separation is the line of the grid itself.
  • .prose — rendered Markdown: § before each ## with a short accent bar on its rule, – and 01 list markers, key caps for <kbd>, tables in a scrolling wrapper, blockquotes as a ruled panel with an accent edge, headings that reveal a # link, and code frames with a language label and a copy button.
  • .pager — previous and next page of a document, with the [ and ] keys.