mirror of
https://github.com/vinta/awesome-python.git
synced 2026-05-09 22:53:49 +08:00
docs(.impeccable): add placestoread reference, no-green rule, type size guidance, consistency checks, and narrow-screen behavior
- Primary visual model: placestoread.xyz (table, expand row, sorting, footer) - Color aversion: no green; warm brown-red/ivory/earthy palette only - Type sizing: default one step larger than impeccable scale; never reduce unprompted - Row numbers: left-align, no leading zeros - Visual consistency checklist: hover/focus, tag variants, typography tiers, gutters, color tokens - Narrow-screen: < 960px and < 680px must stay functional; run playwright-cli after layout changes Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -41,10 +41,15 @@ Stay close to the current direction. It works.
|
||||
|
||||
References (what to stay close to):
|
||||
|
||||
- **https://www.placestoread.xyz** is the primary visual model for the table, expand row, sorting, and footer. "Like placestoread" means dense single-page list, inline click-to-expand rows that indent under the Name column, sortable headers, minimum decoration. When in doubt about a table or row treatment, check placestoread first.
|
||||
- Magazine reference pages (The Economist, FT Weekend, Monocle).
|
||||
- Field-guide books. Curated, functional, hand-made.
|
||||
- Library card catalogs. Dense tabular information, excellent typography, no decoration for decoration's sake.
|
||||
|
||||
Color aversions:
|
||||
|
||||
- No green. The user rejected it when picking the palette. Warm brown-red, ivory, and dark earthy tones are the established system. Do not introduce green even for success states or ancillary accents.
|
||||
|
||||
Anti-references (avoid strictly):
|
||||
|
||||
- Generic dark developer-tool look. No cyan on near-black, neon gradients, VSCode-palette dashboards, terminal-green monospace branding.
|
||||
@@ -70,6 +75,8 @@ Layout and sizing:
|
||||
- The impeccable skill reference rule "cap line length at ~65-75ch" does NOT apply here. Ignore it. Readability at wide widths is carried by vertical rhythm, leading, and the modular type scale instead.
|
||||
- If you believe a width cap is actually necessary for some specific element, ask first with a concrete reason before adding it.
|
||||
- Body type floor is 16px (`--text-base: 1rem`). Content-heavy passages may go to 1.125rem.
|
||||
- When in doubt about any type size, pick one step larger than what the impeccable skill's scale references suggest. The user has repeatedly corrected sizes upward (11+ separate requests across 8 sessions). Never reduce an existing size unprompted. Footer, meta rows, expand content, labels, headings all trend too small by default.
|
||||
- Row numbers in the table: left-align, no leading zeros. The user tried zero-padding and rejected it.
|
||||
- Adjacent heading levels differ by at least 0.25rem of rendered size.
|
||||
|
||||
Color:
|
||||
@@ -88,6 +95,23 @@ CSS hygiene:
|
||||
- Never `text-transform`. Write the casing in the markup.
|
||||
- Sibling components (card lists, grid items) share identical spacing.
|
||||
|
||||
Visual consistency check:
|
||||
|
||||
Before shipping any visual change, check peer elements. The user catches inconsistencies repeatedly.
|
||||
|
||||
- Hover and focus states: if one link type gets a hover treatment, peer links (hero topbar, footer, project names, sponsor names, expand-meta) share it.
|
||||
- Tag variants (group, subcat, source, built-in) inherit the base `.tag` style and differ only where a real difference is needed.
|
||||
- Typography tiers: labels that play the same role share size, weight, and letter-spacing.
|
||||
- Symmetric gutters: logo left-gap equals logo right-gap, column paddings match across header and body.
|
||||
- Role-based color tokens: same role uses the same token everywhere. No one-off inline `color: oklch(...)` buried in a rule.
|
||||
|
||||
Narrow-screen behavior:
|
||||
|
||||
The user actively tests `< 960px` and `< 680px`. Narrow screens must stay functional.
|
||||
|
||||
- Do not drop features that the user might want (sort affordance, filter chips, sticky header where reasonable). Hiding is a last resort and requires justification.
|
||||
- Always run the `playwright-cli` skill at a narrow viewport after any layout change.
|
||||
|
||||
Absolute bans (from the impeccable skill):
|
||||
|
||||
- No `border-left` or `border-right` greater than 1px as a colored accent stripe on cards, list items, callouts, or alerts. Use a different structure.
|
||||
|
||||
Reference in New Issue
Block a user