Repository navigation
docs: ADR-0016 records the CLAUDE.md typography fix - #3
Merged
Merged
Conversation
Some projects (antiX, Bodhi Linux, SparkyLinux) publish their logo only as a raster image. Tracing it into SVG would modify the official mark, so the catalog now accepts <slug>.png, prepared by scripts/assets/raster-logo.ts (trim + fit to 256 px, no recoloring) and checked by validate-catalog. OG images take the logo as a data: URI of either type. ADR-0012. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
…o os sources Release modules for seven more catalog distros, each read from the project's own index (Kali SHA256SUMS, manjaro.org download payload, deepin/Devuan/Parrot release directories, KDE neon image listings, TUXEDO OS checksums), with the first synced data. A dry run right after reports all seven unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
The header, footer, favicon, apple-touch-icon and Open Graph images now show Tux (File:Tux.svg on Wikimedia Commons, unmodified, svgo-optimized). The mark is a cached <img> instead of inline SVG so its 12 KB (gzip) load once. Credits for Larry Ewing and The GIMP, Simon Budig's required notice and Garrett LeSage (CC0) are in src/assets/brand/README.md and on /about/. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
A new sync kind, popularity, ranks catalog distros by the previous UTC day's English Wikipedia pageviews (Wikimedia Pageviews REST API, CC0, agent=user), with the day before kept as prevRank. One request per article through the polite client, a no-op once the day is stored, a majority-published-day rule and a 10-minute budget. Retries now honour Retry-After. ADR-0013 amends ADR-0008 for this one signal. serve.ts and the Playwright config accept a build snapshot (--root, --config, E2E_PORT/E2E_ROOT/E2E_CONFIG) so parallel checkouts can test side by side. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
GNOME app-icon tiles (AppTile) for every distro logo, libadwaita accent palette and depth tokens (raised top bar, icon drop shadow, popover-level hover elevation, OSD buttons), use-case chips, two callout looks, a simpler main menu that replaces the mobile bottom bar, a one-row footer, badge-free distro cards, and the quiz renamed to 배포판 추천. ADR-0014. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Home: a Flathub-style "오늘의 인기 배포판" carousel on top (yesterday's English Wikipedia pageviews, editorial fallback), slides tinted with the nearest libadwaita accent of each official logo, then use-case chips, recommended distros, grouped new releases and a guide row. An APG carousel shell (rotation control, OSD arrows, dots, no autoplay under reduced motion) with a 1.9 KB script. Detail: two actions, eight key facts plus "더 보기", last-checked time, fewer link sublabels, three related distros. Install guide and learn pages no longer scroll sideways on phones; sources fold into a details row. Catalog filters live in one disclosure with use-case chips; search shows typed results with logos; learn uses list rows and a two-column chapter layout; finder reasons are text; compare has fewer rows; the family timeline is grouped by decade; releases group Ubuntu flavors; About explains the ranking and folds the logo credits. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Five project skills in .claude/skills/, loaded by local and cloud sessions: frontend-design (anthropics/claude-plugins-official, Apache-2.0, verbatim) and frontend-ui-engineering, browser-testing-with-devtools, performance-optimization and code-review-and-quality (addyosmani/ agent-skills, MIT), each with a "Linuxhub overlay" block that maps the generic advice to Astro + vanilla islands, the CSP, Adwaita tokens, Bun and lab-only performance evidence. WCAG 2.2 and LCP/INP/CLS references are adapted from addyosmani/web-quality-skills (MIT) instead of installing its overlapping skills. Provenance and local changes are in .claude/skills/README.md. .mcp.json adds a pinned chrome-devtools-mcp@1.10.1 server (headless, isolated profile, telemetry and CrUX lookups off) that uses the preinstalled Chromium in cloud containers. CLAUDE.md gains the web quality rules and the 11-step UI process; ADR-0015 records the choice. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage A of applying the approved design system (ADR-0016) — tokens and the shared Adwaita components only; pages keep working unchanged and migrate in the following stages. - Tokens: an eight-step type scale (title-1 32/28, title-2 22, title-3 19, heading 16, body 16, prose 17, control 15, caption 13, code 14) with per-level line heights, ko headings at 700, an English prose measure of 55ch (~70 characters), layout tokens (section/grid spacing, control and row heights with 44/56px on coarse pointers, sidebar/aside widths), one --tint-bg-color for tinted surfaces (dark: 25% oklab instead of muddy sRGB mixes) and a card ring in prefers-contrast. - base/prose CSS: token-based heading and prose rhythm (36/24/18/12), code blocks 14px without the inset ring, layout utilities (.page, .section, .card-grid, .button-row), scroll lock while a dialog is open, a [data-js-only] hook, toast without the translate. - Components: ActionRow prefix/title slots and an aligned property grid, BoxedList section titles, ExpanderRow class/flush, Button control height, Card hover kept on the popover shadow, Callout note/tip/warning with one icon per meaning, Chip check cue for the current state, toggle group, nav row, SearchEntry, spinner, neutral Badge tones with AA contrast, a warning Banner, AppTile dark face #deddda, shared checksum style, and forced-colors edges for cards, lists, callouts, buttons, chips, entries. - Domain/MDX: DocSources on BoxedList, DistroCard 3-line taglines, Tabs on the expander look without nested code surfaces, Steps/Anchor/Latest fixes, formatDate with one format per locale and a client-safe formatBytes. - Docs: ADR-0016, /design/ showcase, CLAUDE.md typography tokens. No new dependencies and no new JavaScript. Verified on the production build: lint, check, 79 unit tests, 64/64 e2e, Lighthouse 99–100 on the gated pages, no horizontal scroll at 320/390/768/1366 in light and dark. Inline CSS grows by 0.92–1.07 KB gzip per page (ADR-0016 budget). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage B of ADR-0016. - nav.ts: one table keyed by name. The header shows Distros, Linux guide, Distro finder and Compare (Compare replaces Family, which moves to the main menu with Releases and About); the footer picks its links by name instead of by position. - Header: the primary nav is the toggle group (raised current item, other labels dimmed because the raised item is only ~1.2:1 on the trough, system Highlight in forced colors) and shows from 768px instead of 900px; every header button is 44×44; the search trigger is a flat icon button with a tooltip, and from 1100px the entry look with dimmed Ctrl/K caps and aria-keyshortcuts; focus rings on toggles sit in the trough so they keep ≥ 3:1 on the current item in dark mode. - Main menu: shared nav rows (old .menu-item CSS removed), primary destinations first below 768px, closes when keyboard focus leaves it, the language row keeps the query and hash (not the skip link's #main) at click time while the server link stays path-only, style switcher hidden without JavaScript, forced-colors edges and Highlight rings. - Footer: no top border, 44px links on touch screens, 1000px breakpoint, "© year Linuxhub" kept on one line; captions use the caption line height. - Skip link is a 44px target. - e2e: Compare is the current header item on /compare/, Tab past the menu closes it, the language link keeps ?d= (67 tests). No new dependencies. theme.ts grows by ~0.2 KB gzip (menu focus-out and language query). Verified on the production build: lint, check, 79 unit tests, 67/67 e2e, Lighthouse 100 on /, /distros/fedora/ and /learn/, no horizontal scroll at 390/768/1366 (ko/en, light/dark); the header fits at 768–1366px in Korean and English. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage C of ADR-0016: home, catalog, distro detail with the download wizard layout, and the install guide. - New shared pieces: site/Breadcrumb (i18n label, 24px links) and AppHeader (128/64px tile, one h1, dim tagline, meta caption, actions row) used by the detail and install pages; BoxedList headers reuse .section-header; Banner gets a warning icon. - Home: page/section/card-grid utilities instead of page copies; New releases as a list of rows with 36px tiles and one date format; slide title at title-3 under the 22px section h2, no decorative star, one date format, "View details"; use-case chips in one scrolling line at every width. - Detail: Download in the hero is a default button, so the wizard's final download is the only suggested action on the page; the second action is the install guide or, for unwritten guides, the official install docs; two columns only when an overview exists, otherwise one column without the empty overview band; related distros as rows; facts as aligned property rows with family and base on separate rows, list formatting, and EOL error/warning badges computed at build time; stale data as a warning banner. - Wizard (server side): boxed lists, a "Download ISO · size" label shared with download.ts through src/lib/releases.ts, the shared checksum style, the true reason when only the official page can be offered, no links to #verify/#usb on unwritten guides. - Install guide: sidebar contents from 1000px and a top disclosure below; unwritten guides are noindex, left out of Pagefind and the sitemap, and show one honest empty state with a single official-docs action. - Decisions recorded in ADR-0016: no tinted hero band on detail pages (a dim tagline cannot sit on a tint), DistroCard taglines up to three lines. - e2e: stub detail and install pages, at most one suggested button in the first viewport (71 tests). No new dependencies. download.ts +40 B gzip (shared label helpers). Verified on the production build: lint, check, 95 unit tests, 71/71 e2e, Lighthouse 100 on /, /distros/, /distros/fedora/, the Fedora install guide and /en/; no horizontal scroll at 390/1366 in light and dark. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage D of ADR-0016. - ComboRow (new adw component): the wizard, catalog facets and compare pickers use one combo row that wraps instead of cutting values, so no select value is truncated at 320px. ChoiceGroup (new) for the finder: fieldsets with radio rows, check rows for multiple answers, and a linked toggle group from 600px for the short questions — no pills; the unchecked toggles are dimmed so the choice is visible beyond the ~1.2:1 raised fill, and forced colors use Highlight. - Search dialog: no form method=dialog (Enter no longer closes it); Enter opens the first result of the current query; title and 44px close; the shared SearchEntry; result rows on nav rows; loading only after 300 ms with aria-busy; an 8 s timeout and a retry that works (no memoized rejection); error with icon, error color and a link to the catalog; empty and truncated states; a full-height sheet below 600px that a tap inside does not close; the single-key "/" shortcut is gone (WCAG 2.1.4). - Download wizard: fetch timeouts and ok checks; while data loads the link and checksum are never stale (no href, aria-disabled, spinner after 300 ms, announced once); failures restore the selects and show an error row with retry; releases and mirrors fail independently; mirrors grouped by country without the star; the timezone fallback says so; the checksum copy button works on detail pages, and a failed copy selects the digest and explains it inline. - Catalog: SearchEntry, neutral filter count, Reset always visible (aria- disabled when nothing is set, full-strength focus ring), an inline empty row naming the query whose reset returns focus to the entry. - Toast: a live region present before the first message, 4 s, replaced not stacked, forced-colors edge; copy strings and icons only on pages with copy buttons. - Compare: a note for unknown ids, an empty state, "None" instead of "—", list formatting in cells. - The mirror suggestion without any location stays the top-ranked official mirror, as before the redesign. - e2e: 19 new tests for these states (90 in total). No new dependencies. Page JS stays under 9 KB gzip on every page (detail page 8.8 KB with the wizard states and copy). Verified on the production build: lint, check, 108 unit tests, 90/90 e2e, Lighthouse perf 99–100 with a11y/BP/SEO 100, screenshots of every state at 390/1366 light and dark. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage E of ADR-0016: Linux guide, finder, compare, family, releases, about, 404 and the /design/ showcase. - DocLayout (new): the install guide and the Linux guide chapters share one layout — a 240px sidebar from 1000px and a closed contents disclosure below — instead of two copies; its CSS ships only on those pages. Chapter navigation on nav rows with the current chapter's sections from Toc; no eyebrow kicker (group and reading time are one caption); related distros and the previous/next pager as list rows (the previous row points back). - Compare: one table — from 768px a real table with a sticky first column and 36px tiles in the column heads; below 768px each attribute is a stacked group with one labelled line per distro, keeping table roles, so all three distros are readable at 390px without sideways scrolling. - Family: one column without holes; each family is a list of nav rows with 24px tiles and 1px connectors; the timeline is one row per decade with "year name" links instead of a cloud of 26 pills. - Releases: one list per month with 36px tiles and the day as suffix. - About: lead utility, logo credits in a closed expander (opens for #logos) with the shared table, table strings in i18n, lang="en" on the English license texts of the Korean page. - Finder and learn index on the page/page-header utilities; 404 keeps one h1 and one action; StatusPage loses its level prop; dead card/status CSS removed; a lone button in a button row keeps its own width. - e2e: compare at 390px and the learn chapter disclosures (94 tests). No new dependencies, no new JavaScript. Every page stays within +1.5 KB gzip inline CSS of the pre-redesign baseline (compare +1483 B, chapter pages +918 B). Verified on the production build: lint, check, 116 unit tests, 94/94 e2e, Lighthouse performance 100 on every run for /learn/, a chapter, /compare/, /family/, /releases/, /about/ and the install guide; screenshots at 320/390/1366 light and dark with a clean console. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Stage F of the design-system rollout (ADR-0016). - Carousel: no auto-rotation. The rotate button, its two strings, the timer and the pause logic are gone; it moves only on the arrows, on ArrowLeft/Right on the arrows (modifiers are left to the browser) and on swipe. On a slide link the arrow keys do nothing, so focus is never dropped. The arrows sit over the card only while the carousel is at least 44rem wide (a component container query); below that they flank the dots, so the slide text never gets squeezed. Dots fade with opacity only. Inline script 1878 -> 1261 B raw. - Header: the 768px nav and 1100px search-entry breakpoints each wrap a rem container query on the header box, so 200% text keeps them in the main menu instead of overflowing the header. - Touch targets: new token --target-size (24px, 44px on coarse pointers) and one .target-link utility for text links that stand alone (breadcrumb, wizard verify links, ranking link, sources, logo credits). Undersized touch targets across 21 pages: 679 -> 0. - e2e: carousel tests rewritten for the no-autoplay behaviour; a11y.spec adds /learn/, a chapter, an install guide and a 390x844 pass. - ADR-0016 amended and closed with the final before/after numbers. No new dependencies. Lighthouse mobile medians 100 on 8 URLs, CLS 0, TBT 0, LCP 1424-1551 ms; page JS <= 8913 B gz; inline CSS +1045 to +1533 B gz against the pre-redesign baseline (ceiling 1536 B). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J8A7WuJeLxG7aBvK6xfgC9
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
2 participants
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.
No description provided.