Add Fraunces display headings and paper/wood texture treatment - #13
Merged
Conversation
- Load Fraunces (opsz/wght/SOFT/WONK axes) alongside Lora; --font-heading now resolves to Fraunces while body text stays Lora - Base-layer heading styles: tighter tracking, SOFT 30 on all headings, SOFT 60 + WONK 1 on h1 for display personality - Remove per-element tracking-wide utilities so letter-spacing is owned by the base layer - Add .texture-paper: SVG fractal-noise paper grain over the page shell, strength tunable via --paper-opacity (light/dark variants) - Add .texture-wood: walnut grain strips replacing the header border-b and footer border-t - Warm the global --border/--input tone from neutral gray to tan - Replace Card shadow-sm with warm-toned --shadow-card lift - Brand wordmarks use the heading face; footer section labels pinned to font-body
✅ Deploy Preview for treepolitics-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
1 participant
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.
Summary
First pass of the UI overhaul: gives the site a distinctive nature/print identity via typography and texture, all routed through the existing CSS-variable theme.
opsz/wght/SOFT/WONKvariable axes; base-layer styles setSOFT 30on all headings andSOFT 60, WONK 1onh1for display personality. Per-elementtracking-wideutilities are removed so letter-spacing is owned centrally by the base layer..texture-paperoverlays an inline-SVG fractal-noise grain (~350 bytes, tiles seamlessly, no network request) behind all content via a negative-z::beforeinside an isolated stacking context. Strength is tunable via--paper-opacity(0.14 light / 0.11 dark)..texture-wood(walnut base + horizontally-stretched turbulence streaks) replaces the headerborder-band footerborder-tash-1.5bands.--border/--inputshift from neutral gray to tan;Cardswapsshadow-smfor a warm-toned--shadow-cardlift so cards read as paper on a textured desk.font-body(uppercase display-serif reads poorly).Design knobs
--paper-opacity,--wood,--border,--shadow-card, and the SOFT/WONK values in@layer baseare the tuning points, all insrc/index.css.Testing
tsc -b/vite buildpass.