68 lines
5.1 KiB
Markdown
68 lines
5.1 KiB
Markdown
|
# Apple II Interface Theme
|
||
|
|
|
||
|
|
## Target
|
||
|
|
|
||
|
|
The site should feel like a black-and-white Apple II desktop interface rendered on a CRT, not a modern terminal and not a normal blog with a monospace font. The visual language is based on low-resolution desktop UI: black outlines, gray dither fills, compact list rows, square controls, and high-contrast pixel-like text. Keep it minimal: do not add fake menus, fake window controls, decorative title bars, icons, or OS chrome unless they directly serve the content.
|
||
|
|
|
||
|
|
## Reference Traits
|
||
|
|
|
||
|
|
- **Desktop surface:** medium gray dithered background, not a flat white or black page.
|
||
|
|
- **Content panels:** white rectangular content areas with hard black borders, square corners, and no shadows or blur.
|
||
|
|
- **No fake chrome:** avoid menu bars, title bars, desktop icons, and inactive controls. Use Apple II constraints, not Apple II decoration.
|
||
|
|
- **Controls:** checkboxes, buttons, and tag filters should be square, black-and-white, and visibly low resolution.
|
||
|
|
- **Cursor:** use small raster PNG cursor assets for the page pointer and interactive hand state; avoid SVG cursors because Safari may rasterize them badly.
|
||
|
|
- **Typography:** use the bundled `VT323` bitmap-style webfont for headings and title-like labels only. Body text, dates, tags, controls, captions, and code should use a sharper monospace so small text does not wash out.
|
||
|
|
- **Color:** black, white, and gray only. No green phosphor, amber phosphor, gradients, or colorful accents.
|
||
|
|
- **Resolution:** layout should use coarse units, hard edges, and visible dither patterns so it reads as low-res.
|
||
|
|
- **CRT:** apply one consistent screen overlay across the whole site: scanlines, slight vignette, and pixel grid. Do not apply separate unrelated glows to individual elements.
|
||
|
|
- **Figures:** technical figures and plots must stay legible. The theme should protect figures with a clear panel, border, and caption treatment, but should not require hand-tuning individual SVGs.
|
||
|
|
- **Math:** math can keep its own rendering. Do not force KaTeX into a fake bitmap style if that reduces clarity.
|
||
|
|
|
||
|
|
## Theme Modes
|
||
|
|
|
||
|
|
- `displayMode: "crt"` is the default: gray dither desktop, subtle scanlines, slight vignette.
|
||
|
|
- `displayMode: "clean"` keeps the monochrome interface but removes dither and CRT overlay.
|
||
|
|
- `displayMode: "plain"` is the least styled reading/printing baseline.
|
||
|
|
- `density: "compact"` is the default low-res layout.
|
||
|
|
- `density: "comfortable"` increases panel padding, section gaps, and row spacing without changing the component language.
|
||
|
|
|
||
|
|
## Home Page Rules
|
||
|
|
|
||
|
|
- The whole home page sits inside one primary content panel.
|
||
|
|
- The intro is the top content region, not a giant hero.
|
||
|
|
- Posts are a Finder-style list: date column, title column, inline tags.
|
||
|
|
- Post tags appear inline next to post titles as compact metadata. There is no separate tag filter panel on the home page.
|
||
|
|
- Tag toggles are real square checkboxes with on/off state.
|
||
|
|
- Spacing is compact, but rows must not collide or wrap dates.
|
||
|
|
|
||
|
|
## Post Page Rules
|
||
|
|
|
||
|
|
- A post page uses one primary document panel.
|
||
|
|
- The post title and date live in the document panel.
|
||
|
|
- The table of contents is a compact fixed side panel in the left margin on wide screens, outside the bordered article box.
|
||
|
|
- Code blocks use bordered listing panels with compact title strips and light code fields, not large black slabs.
|
||
|
|
- Inline code uses hard recessed rectangular boxes.
|
||
|
|
- Figures use a protected light paper panel with no CRT shadow inside.
|
||
|
|
|
||
|
|
## Component Rules
|
||
|
|
|
||
|
|
- **Links:** no underline by default; hover and keyboard focus invert black/white.
|
||
|
|
- **Inline code:** recessed monochrome field treatment, never a soft rounded badge.
|
||
|
|
- **Code blocks:** monochrome program-listing panel with square border, a compact title strip, readable text size, and no colored syntax requirement.
|
||
|
|
- **Tables:** square outer border and strong horizontal rules so rows survive the CRT treatment.
|
||
|
|
- **Sidenotes:** high-contrast text with coarse superscript markers; mobile fallback uses a square bordered panel.
|
||
|
|
- **TOC:** compact bordered navigation panel with a Macintosh-style striped title strip, tight rows, subordinate nested headings, and inverted active state.
|
||
|
|
- **Tags:** compact inline metadata next to post titles; do not render a separate tag filter box.
|
||
|
|
- **Captions:** larger, darker, and heavier than normal modern captions so they do not wash out.
|
||
|
|
- **Blockquotes:** square bordered callout panel, not a thin modern quote line.
|
||
|
|
|
||
|
|
## Implementation Notes
|
||
|
|
|
||
|
|
- `VT323` is bundled from Google Fonts under the SIL Open Font License 1.1; keep its license at `static/licenses/VT323-OFL.txt`, but do not make it the global body font.
|
||
|
|
- Use CSS variables for theme colors and dither patterns.
|
||
|
|
- Use `image-rendering: pixelated`, square corners, and `-webkit-font-smoothing: none` where useful.
|
||
|
|
- CRT overlay belongs in one common CSS layer, not scattered across unrelated components.
|
||
|
|
- Honor reduced-transparency, increased-contrast, and print contexts by removing the CRT/dither layer.
|
||
|
|
- Avoid modern UI motifs: rounded cards, soft shadows, gradients, glass, pill tags, or animated decoration.
|
||
|
|
- Keep the design readable first; the Apple II treatment should constrain the UI, not make the content hard to scan.
|