Design/hierarchy theming pass#47
Merged
Merged
Conversation
- Remove the three render-blocking remote @import rules from _fonts.css; fonts now load via the single preconnected <link> in RootLayout (was fetching Google Fonts CSS 4x: 1 link + 3 @imports). - Set data-theme synchronously in <head> (is:inline) before first paint to eliminate the theme flash for visitors whose stored theme differs from their OS preference. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the Google-Fonts-loaded Geist/Geist Mono/Noto Serif JP with a self-hosted, accessibility-forward pairing (Fontsource → bundled woff2, no third-party request, no IP logging): - Body/UI: Atkinson Hyperlegible Next (Braille Institute low-vision face, incl. italic — now used for blockquotes instead of a serif). - Headings + code: JetBrains Mono (h1-h5; h6 stays the body face as a small UI label). Drop the serif face entirely. - Remove the Google Fonts <head> link/preconnects; import via Fontsource. - Clean --font-* tokens: single source of truth in _fonts.css (removed the duplicate in _tokens.css), fallbacks use only ui-sans-serif/ui-monospace/ generics — no banned fonts (Helvetica Neue/Arial/Segoe UI removed). - Delete the 'Geist Variable' @font-face doc-rot from CSS_GUIDE.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add the ARRL Field Day 2026 event (N7OS at Camp Freeman, June 27-28) and the June membership meeting (June 16), which previews and plans the Field Day operation. Wire up customVenue rendering, which the schema supported but no display component consumed: - EventLogistics renders an in-person block and map for customVenue - events/[slug] includes customVenue in the in-person CTA, the logistics mount, and the copy-invite text Existing config-venue events are unaffected. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Date-only frontmatter (event/article 'date'/'updated') is parsed as UTC midnight; formatting it without an explicit timeZone rendered the previous day in Pacific (e.g. 2026-04-14 showed as 'April 13, 2026'). Add timeZone:'UTC' to every date-only formatter: - src/pages/index.astro (recent articles) - src/pages/articles/index.astro - src/pages/tags/[tag].astro (articles + events) - src/layouts/MarkdownLayout.astro (date + updated) Also fix the tag page sorting/displaying events by a non-existent 'startDate' field -> 'eventDate' (the real schema field), so events on tag pages are sorted and dated correctly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The print-derived golden-ratio (phi=1.618) scale was poster-aggressive for screens (h1 ~42px up to ~84px) and collided at h3/h4 (1.21x) and lg/xl (1.07x). Replace with a web modular scale (~1.2 text / ~1.25 display, 16px base, capped at 48px) so adjacent heading steps are distinct and the top end isn't billboard-sized. - Type tokens (sizes, leading, measure, tracking, weights, families) now have a single source of truth in 01-typography/_scale.css; deleted the duplicate (and divergent) blocks from _tokens.css, and fixed a third stale scale in CSS_GUIDE.md. - Body leading 1.777 -> 1.6 (screen optimum); paragraph measure 75ch -> 62ch. - Leading/tracking retuned for the new sizes; fluid display clamp capped at 48px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The site had two accents (red --color-accent for links/focus/nav/blockquote/ tags/badges, blue --color-blue for buttons/logo), and dark mode only re-tuned the red — so the primary CTA and logo receded into the dark surface. Per the decision to drop red: - Repoint --color-accent* to blue (hue 240); --color-blue* become aliases of the accent, so every interactive/emphasis role now uses one blue. - Finish dark mode: lighten the (now single) accent on the dark surface so the primary button and links both read correctly; previously blue was left dark. - Make .text-accent honest (was silently mapped to subtle gray -> uses accent). - Update stale red value + 'red accent' comments in _tokens.css and CSS_GUIDE. Note: the non-monotonic gray ramp (200/300, 700/800) is deferred to the polish pass to avoid touching border-contrast values here. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The <ClientRouter> swaps the whole document on navigation, so the header was torn down and cross-faded on every transition (e.g. in/out of the Field Day event) — the nav links briefly flashed. Mark the header transition:persist so Astro keeps the same element across navigations. Because the header now persists, the theme-toggle listener can't be re-bound on each astro:page-load (that would stack handlers and fire the toggle multiple times per click). Wire it once via delegated click on document; setActiveNav still runs per navigation to update the active link. The redundant per-navigation applyTheme is dropped (the blocking <head> script sets the theme and <html> persists).
Regression from the previous commit: I removed the per-navigation theme reapplication. Astro's ClientRouter resets <html data-theme> on every document swap, so without reapplying it the whole page dropped to the default theme for a frame on each navigation and snapped back — constant flicker. Reapply the saved/system theme in astro:after-swap (fires before the new page paints, so no flash — strictly better than the old astro:page-load timing), and refresh the active nav there too. The header keeps transition:persist so it is not torn down per navigation; the toggle stays delegated.
Per design decision: keep round, legible px in the text band (12-20px) but make the heading/display steps mathematically exact — alternating 1.2 / 1.25 from --text-lg: 20->24 (x1.2), 24->30 (x1.25), 30->36 (x1.2), 36->45 (x1.25), continued for 5xl/6xl. h1 moves 48->45px so 36->45 is a true 1.25. Update the fluid clamp cap and the scale comments/docs to describe it accurately (the old comment overstated the text band as ~1.2).
Pure cleanup, no visual change. Adds three small, inference-friendly classes —
.eyebrow (the uppercase kicker, ~3x on the homepage), .link-plain (card-title
link reset), .region--muted (closing editorial band) — plus a base
summary{cursor:pointer} rule, and reuses existing utilities (.text-muted,
.text-subtle, .font-medium, .grid--auto-fit + --grid-min-width). The homepage's
inline style= attributes drop from ~19 to 3, and the survivors are only dynamic
custom-property assignments (--grid-min-width / --grid-gap), per the 'no static
inline styles' policy. Redundant inline styles that merely re-declared base
element styles (hr, .lead measure) are removed.
The shared EventDateTime component and its timezone toggle only ever
rendered startTime–endTime against a single eventDate, so a 24-hour
event like Field Day collapsed to "June 27 · 11:00 AM–11:00 AM PDT".
Make the component endDate-aware: when endDate lands on a different day
it renders a compact two-endpoint range ("Sat, Jun 27, 11:00 AM – Sun,
Jun 28, 11:00 AM PDT"). The data-end-date attribute is threaded into the
client toggle so local/UTC conversion shifts both the day and the time
correctly. endDate is now passed from the featured/horizontal cards and
the event detail page; single-day events keep the long-form display.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Date-only events (no startTime) were showing a timezone abbreviation
("Tuesday, June 16, 2026 PDT") even though a bare calendar date has no
time to anchor a zone. Drop the tz when there is no time, and omit the
year for current-year events since it's noise for near-term dates — kept
for past/future-year dates. Applied in both the SSR fallback and the
client timezone toggle.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The homepage was three stacked full-width bands (featured-event hero eating ~half the viewport, a flat 4-up article grid, a 3-col editorial footer) separated by two horizontal rules — wasted horizontal space and too much vertical breakup. Recompose as a 12-col bento: band 1 pairs the featured event (span-8) with a span-4 rail carrying a derived Next Meeting quick-fact tile and a running list of other upcoming events; band 2 sets a ranked article column (one lead + a quieted thirds strip) beside a muted Explore rail (About / Docs / Events). Both <hr> dividers are gone — region spacing and a muted surface separate the bands instead. Spans collapse to source order on mobile, so no media queries. No new CSS: reuses modular-grid, span-*, grid--gap-*, box--*, proportion--thirds, and the existing EventDateTime/EventCard components. Card surfaces are never nested. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First of three motion tiers. Add ease-out-quart/quint/expo easing tokens and repoint the transition scale onto them for a more refined decel than the old material curve. Replace every 'transition: all' on interactive components with explicit GPU-friendly property lists (button, nav link, theme toggle, tag) — cheaper and no accidental layout animation. Micro-interactions: a tactile button press, a quiet 2px card lift paired with the existing shadow, and a slow contained zoom on the featured event image (frame crops, image breathes). The global prefers-reduced- motion reset already neutralizes these. Also type the homepage follower article map param. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Second motion tier, CSS-only and zero new dependencies. A new 06-utilities/_motion.css adds two opt-in scroll-timeline effects: - .reveal: fade + rise as an element enters the viewport (view() timeline), applied to the below-fold homepage band. Content already in view at load resolves to its final state, so there is no load flash. - .scroll-progress: a thin accent 'tuning' line in the header that fills with scroll position (scroll(root) timeline). Both are gated behind @supports (animation-timeline) — unsupported browsers get the final static state, never hidden content — and wrapped in prefers-reduced-motion: no-preference, since scroll timelines are not duration-based and the global reduced-motion reset would not silence them. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Addressing review of the bento homepage: - Field Day showed twice — as the hero event and as the lead 'Latest' article. Filter the homepage article list to drop any article sharing the hero event's primary tag, so the featured event isn't echoed as an article below it. - The 'Latest' items were bare floating text with no structure, which read as chaotic. Give each article a bounded .card in a clean two-up auto-fit grid (inheriting the hover lift), restoring clear edges. - The Explore rail repeated 'Events', already present in the nav and the 'Full calendar' link above. Drop it; keep About + Documentation. - Widen the gap between the two bands (stack-12 -> stack-16) so the page breathes instead of feeling tight. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The datetime display now drops the year for current-year events and the timezone for date-only events. Update the date-only toggle test to pin its fixture to the current year and assert the year/timezone are absent, and add a complementary test proving non-current-year events still show the year. Fixtures use the live current year so the tests don't rot. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Draft article drawn from the club's Field Day site: the early years (40/41 garage and park sites), the 2025 operation as W7FLY at Camp Freeman with Snohomish ACS, the engineered 2026 N7OS station with the expected site-layout map, and a closing invite. Includes four photos (tribander at sunset, the Camp Freeman VHF station, the 2026 layout, and an RV operating position). Marked draft: visible in dev, excluded from production until ready. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bring the club's Field Day site wording across verbatim, organized into sections (1999 history with the pandemic note, Back to the Field Day for the 2024 BEARONS/ACS operation, Field Day 2025 as W7FLY, the 2026 N7OS station, and the closing invite) with the four photos and captions. The 2026 layout note now lists the actual stations (80/10m and 20m on IC-7300s, VHF+ on an IC-7300/9700). MITRU links to the county program page. Link the article and the event from the About page's Field Day Operations section, and publish (draft -> false). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Styling and Field Day 2026 content updates.