Claude/website ux UI audit 2o76y3 - #68
Merged
Merged
Conversation
about.html, home-agency.html, single-portfolio.html and "index original.html" were leftover purchased-template scaffolding (Lorem Ipsum, a fictional four-person team, fabricated photography awards) that remained publicly reachable despite being noindexed and unlinked from navigation. Removes the now-dead robots.txt note and the matching stale check in the SEO auditor agent doc.
Introduces assets/css/tokens.css defining a 9-step type scale (1.25 ratio from a 17px body, fluid only at the display/title steps), an 8px spacing scale, three border-radius values, three elevation levels, and two motion durations on one easing curve — replacing the 41 ad-hoc font sizes and 10 border-radius values that had accumulated in redesign.css with no shared source of truth. Loaded first on every page, ahead of redesign.css, so the migration in the next commit has tokens to migrate onto. Color tokens are untouched here; they already live in redesign.css :root and get dark-mode values in a follow-up commit.
Replaces every literal font-size in redesign.css with the nearest of the nine tokens from tokens.css, and every literal border-radius with the nearest of the three radius tokens — 41 raw sizes and 10 raw radii down to 9 and 3 respectively. Values were mapped by nearest numeric fit (clamp() expressions compared at their computed value on a 1280px viewport); where a value fell roughly equidistant between two tokens the surrounding component's role broke the tie. --radius, --radius-sm and --control-fs are kept as variable names but redefined to alias the new tokens (var(--r-card), var(--r-control), var(--fs-small)) rather than rewritten at every call site, since app.css and products.html's inline styles also read var(--radius)/var(--radius-sm) directly and this keeps them correct without touching files outside this migration's stated scope. Two literal font-size pairs are deliberately left untokenized, each with an inline comment explaining why: .hero-name .l1/.l2 (the homepage's giant wordmark — both lines round to the same --fs-display token at that size, which would erase the two-tier hierarchy between them) and their matching mobile vw overrides. Everything else, including the smaller .testi-quote .mark decoration and the page-hero h1 used on every inner page, is fully tokenized.
Adds a full dark palette for every color custom property in redesign.css :root, handling all three viewer states: the bare :root above stays the light default; @media (prefers-color-scheme: dark) guarded as :root:not([data-theme="light"]) covers the unstamped "system" default; :root[data-theme="dark"] covers an explicit toggle. No color is declared only inside one of the guarded blocks — every dark value has a light counterpart already in the bare :root. Palette picked to clear WCAG AA against both surfaces used as text backgrounds (bg #0d1016, card #151a23): ink 15.9:1/14.6:1, ink-soft 7.5:1/6.9:1, muted 5.1:1/4.6:1, accent-as-text 6.0:1/5.5:1. --line-strong is brightened to #5a6685 (3.3:1/3.1:1) so input borders still clear the 3:1 non-text minimum on a dark ground, where the light theme's literal --line-strong value would have gone nearly invisible. Also fixes four hardcoded white surfaces that a token-only swap would have missed and left as bright rectangles on a dark page: the nav's frosted-glass background (new --nav-bg token, since it needs its own translucent value per theme rather than reusing an opaque one), the mobile menu's full-bleed overlay, and the two contact-form field backgrounds — all now read from --card or --bg instead of literal #fff. One more fix the palette forced: --accent, lightened to #7d86f5 so it reads as *text* against a near-black page, then fails 4.5:1 for the white text sitting on top of it as a *button fill* (3.18:1). Added --accent-fill / --accent-fill-hover — an alias for --accent in light mode (no change there), a separately-tuned, more saturated value in dark mode — and repointed the six components that put white text on an accent-filled background (solid buttons, the nav "New" badge, hover icon tiles, the big CTA button, and ::selection) to use it. Deliberately not covered here, flagged rather than silently left broken: the testimonial section's separate warm off-white palette, blog/article category-tag color variants, and casework gradient decorations are all hardcoded literals outside the --bg/--ink/--accent system and won't adapt to dark mode. Converting them needs real design judgment about their dark equivalents, not a mechanical token swap — left for a follow-up pass. app.css and products.html were also left untouched; they consume var(--radius)/var(--radius-sm)/var(--card)/etc. and will pick up correct values automatically, but weren't otherwise in scope.
Converts the 21 raster images actually referenced from the 8 main pages (favicon and the two Open Graph meta images are excluded on purpose — neither can use <picture>, and OG crawlers want a plain JPG/PNG) to AVIF and WebP, and wraps their <img> tags in <picture><source> so modern browsers fetch the smaller format while the original file stays as the final fallback. For a browser that takes the AVIF branch — effectively all current browsers — the transfer weight for these 21 images drops from 9.3 MB to 2.5 MB. hero-cutout.png specifically, the site's LCP element (preloaded with fetchpriority="high"), goes from 874 KB to a 49 KB AVIF; its preload link now points at the .avif directly with type="image/avif" instead of preloading a PNG that AVIF-capable browsers won't even fetch. Where a wrapped <img> carried a class, that class is copied onto the new <picture> wrapper too, not just left on the <img>. This matters wherever the class does more than paint the image — .hero-cutout is the case that would have broken silently: its rule sets `order: 2` inside a flex container on mobile, and `height: 100%` that needs to resolve against the actual flex item's box. Wrapping in <picture> without copying the class would have left `order` and the flex-resolved height applied to nothing (a class-less wrapper box), while the classed <img> a level down kept neither the flex-item role nor a working height:100% chain — the mobile hero would reflow to source order and the image could collapse. Checked the rest of the wrapped classes (.cover-img and the plain <img> logo/photo tags with no class) for the same pattern; none of the others key off order, flex-basis, align-self, or grid placement, so they didn't need it. Deliberately unconverted, and out of scope for this pass: the ~53 files under assets/images that no page actually references (leftovers from the deleted template pages and old page variants) — pruning those is an asset cleanup task, not an image-format task, and wasn't part of what was asked.
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.