Skip to content

Frame content units and divide them with dashed hairlines - #60

Merged
130U merged 1 commit into
mainfrom
claude/frames-and-dashed-hairlines
Nov 6, 2026
Merged

130U merged 1 commit into
mainfrom
claude/frames-and-dashed-hairlines

Conversation

@130U

@130U 130U commented Nov 6, 2026

Copy link
Copy Markdown
Owner

Summary

After #59 removed entry and directory rules, the pages read as too bare. This restores structure with restraint: three weights instead of uniform rules.

Weight Where
Strong solid rule Top of each page-level section (unchanged)
Faint frame: 1px --frame (rgba(0,0,0,.09)) on --panel, square, no shadow, 16px apart Each unit of content
Dashed hairline: --dash-x / --dash-y, 4px dash Divisions inside a frame
  • Section index (Experience, Coursework): a framed list beside the page title (title on axis A, index on axis B from 1200px), with inset dashed row dividers and labels at the subheading size, weight 400, down from the heading size.
  • Entries (Experience, Selected Research, Education): each is a frame; from 1200px a dashed vertical hairline divides the title from the summary. Degree records are divided by a dashed line.
  • Record strip and contact details: framed fields divided by dashed hairlines, re-flowing to 2×2 and stacked layouts.
  • Course lists: framed, three columns from 1200px and two from 768px, with dashed column-rule.

Copy and contracts

  • Styles only: no markup or copy changes. protected-sources.json and visible-copy-manifest.json pass unchanged.
  • Design-contract tests now require the frame and dash tokens and the framed entries and index; the index label size assertion moves to the subheading role. docs/design.md is updated.

Test plan

  • npm run check (protected sources, lint, build, 146/146 artifact tests, visible copy)
  • npm run typecheck
  • Visual review at 1536px (Experience, About, Coursework, an AI article) and 390px (Experience)

🤖 Generated with Claude Code

Give structure back without returning to ruled rows. Structure now has three
weights: a strong rule opens each section, a faint 1px frame on the panel
surface holds each unit of content, and divisions inside a frame are dashed
hairlines.

- The Experience and Coursework indexes become framed lists beside the page
  title, with inset dashed row dividers and subheading-size labels.
- Experience and Selected Research entries are frames with a dashed divider
  between title and summary; degree records are divided by a dashed line.
- The detail-page record strip and the contact details are framed fields
  divided by dashed hairlines.
- Course lists are framed, in three columns from 1200px and two from 768px,
  with dashed column rules.

Styles only: no markup or copy changes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@130U
130U merged commit 388dcb7 into main Nov 6, 2026
2 checks passed
@130U
130U deleted the claude/frames-and-dashed-hairlines branch November 6, 2026 00:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant