docs: terminal-aesthetic refresh - #343
Open
yjp20 wants to merge 14 commits into
Open
Conversation
- restyle the landing page: TUI-framed keymap panels, terminal-style download buttons/platform switch, blinking prompt cursor - square off borders/radii across the docs (code blocks, admonitions, search, buttons) to match the monospace-web base - group the sidebar into Docs / Reference / Misc tree sections - restyle search as an fzf-style command palette: one entry per line with full header paths (via processResult), amber match highlights, whole-row links, and a larger default page size - demote changelog versions to h2 so header paths include them, and group the TOC by the shallowest selected heading level to support h2-only selectors Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- drop the `• ` bullet prefix from generated API headers and indent entries by heading depth instead, including method signatures rendered as invisible headers - replace the `/` search button with a `Search (/)` entry at the top of the sidebar tree - tighten the search palette spacing by overriding pagefind's default drawer gap and message sizing Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Entry bodies are tagged with their heading depth at runtime as the rendered markdown is a flat list of siblings, so this cannot be done in CSS alone. Also scopes the indentation to the API page; `code-heading` applies to any heading containing code, so the previous rules leaked into other pages. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A Conway's Game of Life glider - the classic hacker emblem, and literally a glider. `logo.svg` is the tiled app-icon variant and `logo-inline.svg` uses currentColor so it adapts to the surrounding theme when inlined. Not wired into the site chrome yet. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- inline the currentColor glider in the sidebar heading so it follows the theme - prefer the SVG favicon with a PNG fallback - deploy the new logo assets Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The glider now sits in the tree gutter, as the root of the tree. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The sidebar glider steps through its four actual Life generations while hovered. The svg grid is the union of all four generations' cells, each classed with its alive-mask which CSS steps through discretely; the amber cell is alive in every generation so the accent persists. Gated behind prefers-reduced-motion. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The global `label` styles round the width down to a whole ch. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A two-facet paper dart mid-glide: wing in currentColor (theme-aware when inlined), keel in the site's amber accent. On hover it glides up-right. Replaces the Game of Life cells and their animation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Both are bordered boxes inset from the viewport edges; the mobile drawer keeps just a right border. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This reverts commit 81cf8aff7c71c92e4aa4d5c05a292dea1488d2f3.
The body's top padding pushed the 100vh sidebar one line down, so it overflowed the viewport bottom until scrolled past the padding. Cancel it with a negative margin and pin the flex item to the start. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces the `> Glide` prompt heading and its blinking cursor. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The vim command line as a mark: a currentColor `:` prompt (theme-aware when inlined) and the amber block cursor. On hover the cursor blinks. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A visual and structural refresh of the docs site, leaning back into the terminal aesthetic of The Monospace Web that
docs.cssis based on.Styling
> macOSselection), framed demo video, and the tutor's asciiGLIDEbanner as the page headercodebeing dark-on-light in light modeSearch
The pagefind modal is restyled as an fzf-style command palette:
>prompt, one result per line with amber match highlightsKeys > Syntax > Modifier keys), built inprocessResultby walking pagefind's anchor data…load-more line#→##so paths include the version (e.g.Changelog > 0.1.63a > Changes); the TOC now groups by the shallowest selected heading level to supporth2[id]selectorsNavigation
Search (/)entry replaces the/button100vhbox down)API reference
▪-bulleted and indented by heading depth, with bodies indented along with their heading (tagged at runtime indocs.ts; the rendered markdown is a flat sibling list so CSS alone can't scope "until the next heading")pre) render as normal entry lines•heading prefix is removed frombuild-api-reference.mtsandapi.mdLogo
New logo: the vim command line — a
:prompt and the amber block cursor (logo.svg+ theme-awarelogo-inline.svgviacurrentColor, inlined in the sidebar where the cursor blinks on hover, SVG favicon with PNG fallback).Notes for review
pnpm dev:docs+ a pagefind reindex to confirm the real build, especially the API page and searchlogo.png/logo.webp/logo1024.png, og:image) still uses the feather — rasterizing the new logo needs the build toolchain, left for a follow-up🤖 Generated with Claude Code