diff --git a/.design-context.md b/.design-context.md new file mode 100644 index 0000000..7cb973c --- /dev/null +++ b/.design-context.md @@ -0,0 +1,66 @@ +# Design Context — MicroHAMS + +> Written by the `design-context` skill. Priming for all `design-*` work. Update the +> Design Context section in place rather than duplicating it. + +## Design Context + +### Users + +MicroHAMS is an amateur radio club in the Puget Sound area. The site serves **two audiences +equally**: + +- **Existing members & licensed hams** — want event details (monthly meetings, Field Day, swap + meets), technical articles, and reference docs. They value information density, accuracy, and + utility. +- **Prospective / newly licensed hams** — need an inviting front door: who the club is, when it + meets, how to show up. They value warmth, clear on-ramps, and low jargon. + +Context of use: desktop and mobile, often checking "when/where is the next meeting" or reading a +long technical article. Both light and dark environments (shacks are dark; phones are everywhere). + +### Brand Personality + +Three words: **precise, credible, welcoming**. The voice is knowledgeable but not gatekeeping — +technical authority delivered plainly. Emotionally the interface should evoke **confidence and +calm competence** (this club knows its craft) without feeling cold or corporate. A subtle nod to +the hobby's signal/RF heritage is welcome (see the header's radio-wave motif). + +### Aesthetic Direction + +Deliberately **Swiss / editorial / typographic** — the codebase explicitly cites Vignelli, Tufte, +and Bringhurst. Characteristics: + +- Achromatic base (black/white/grays in OKLCH) with restrained accent use. +- **Single accent: blue** (`--color-accent`, hue ~240). Red has been **retired** as an accent — + every interactive/emphasis role (links, focus rings, active nav, blockquote rule, tag hover, + badges, primary buttons, the logo, the header wave motif) uses the one blue. Reserve any future + red strictly for genuine error/danger semantics, never decoration. +- **Web-tuned type scale**: round-px text band (12–20px) + exact alternating 1.2/1.25 display band + (20·24·30·36·45px, h1 capped at 45px), 16px base (`1rem`, honors zoom), on a 24px + baseline grid — the old print-derived φ=1.618 ramp was too poster-aggressive for screens. Generous + measure (≈62ch body), Every-Layout primitives. +- **Self-hosted fonts via Fontsource** (no third-party request): **Atkinson Hyperlegible Next** + (body/UI — Braille Institute low-vision face, incl. italic for blockquotes) and **JetBrains Mono** + (headings + code). No serif face. Fallback stacks use only generic keywords (`ui-sans-serif`, + `ui-monospace`) — never named/system or banned fonts. +- Full light + dark mode, WCAG AA targeted throughout the tokens. + +**Anti-references:** generic AI-template aesthetics — purple/indigo gradients, glassmorphism, +gradient text, hero stat-counters, emoji-as-icons, drop-shadow soup. The site should look +_designed and edited_, not _generated_. Also banned as fonts (incl. fallback stacks): Inter, +Roboto, Arial, Open Sans, Helvetica Neue, Segoe UI, system-ui, Space Grotesk — and near-name +"kissing-cousins" of these. Nerd Fonts evaluated and rejected (no relevant glyphs, heavy payload). + +### Design Principles + +1. **Typography is the interface.** Hierarchy comes from the type scale and spacing, not + decoration. Protect the measure and the baseline rhythm. +2. **Systematic, not rigid.** Every value derives from tokens (space, type, color, radius). No + magic numbers in components; reach for a token or a primitive first. +3. **Accent with discipline.** Color is rare and meaningful. Keep the blue/red roles separated and + documented; never let an accent become decoration. +4. **AA is the floor, not the goal.** Contrast, focus visibility, semantics, and 44px touch + targets are non-negotiable; aim past AA where cheap. +5. **Fast and quiet.** A static club site should load instantly and never flash. Performance and a + stable first paint are part of the design, not an afterthought. diff --git a/package-lock.json b/package-lock.json index 90ef888..00197b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "microhams", "version": "0.0.1", "dependencies": { + "@fontsource-variable/atkinson-hyperlegible-next": "^5.2.6", + "@fontsource-variable/jetbrains-mono": "^5.2.8", "@js-temporal/polyfill": "^0.5.1", "@types/leaflet": "^1.9.21", "astro": "^6.3.1", @@ -1187,6 +1189,24 @@ } } }, + "node_modules/@fontsource-variable/atkinson-hyperlegible-next": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/atkinson-hyperlegible-next/-/atkinson-hyperlegible-next-5.2.6.tgz", + "integrity": "sha512-D0Z8peFkRGYACvmWp8Sl8YPGYLBEJbzqapugtsMEYSUUtpQDiZVDHjk9s7bqB4hSCRYCrKuW6V1V+mnHybVnPw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource-variable/jetbrains-mono": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz", + "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/package.json b/package.json index 6e5d10f..e89def7 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,8 @@ "prepare": "husky" }, "dependencies": { + "@fontsource-variable/atkinson-hyperlegible-next": "^5.2.6", + "@fontsource-variable/jetbrains-mono": "^5.2.8", "@js-temporal/polyfill": "^0.5.1", "@types/leaflet": "^1.9.21", "astro": "^6.3.1", diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro index d3f4ae5..e81b922 100644 --- a/src/components/SiteHeader.astro +++ b/src/components/SiteHeader.astro @@ -7,7 +7,8 @@ */ --- -
+
+
diff --git a/src/components/event/EventCard.astro b/src/components/event/EventCard.astro index 7dfba4f..80bb0b4 100644 --- a/src/components/event/EventCard.astro +++ b/src/components/event/EventCard.astro @@ -100,6 +100,7 @@ const dateStr = formatEventDate(event.data.eventDate, tzOptions);
+ d.toLocaleDateString('en-US', { + timeZone: 'UTC', + weekday: 'long', + month: 'long', + day: 'numeric', + ...(d.getUTCFullYear() === currentYear ? {} : { year: 'numeric' }), + }); -const timeStr = startTime - ? `${startTime}${endTime ? `–${endTime}` : ''} ${tzAbbrev}` - : ''; +// Compact date for multi-day ranges (two dates already carry enough context) +const mediumDate = (d: Date) => + d.toLocaleDateString('en-US', { + timeZone: 'UTC', + weekday: 'short', + month: 'short', + day: 'numeric', + }); -const fullDisplay = timeStr ? `${dateStr} · ${timeStr}` : dateStr; +// Format static fallback +let fullDisplay: string; +if (isMultiDay) { + // "Sat, Jun 27, 11:00 AM – Sun, Jun 28, 11:00 AM PDT" + const start = startTime ? `${mediumDate(eventDate)}, ${startTime}` : mediumDate(eventDate); + const end = endTime ? `${mediumDate(endDate!)}, ${endTime}` : mediumDate(endDate!); + fullDisplay = `${start} – ${end}${tzAbbrev ? ` ${tzAbbrev}` : ''}`; +} else { + const timeStr = startTime ? `${startTime}${endTime ? `–${endTime}` : ''} ${tzAbbrev}` : ''; + fullDisplay = timeStr ? `${longDate(eventDate)} · ${timeStr}` : longDate(eventDate); +} --- -
+ ) +} + { teams && (
diff --git a/src/content/articles/field-day-2026-site-layout.png b/src/content/articles/field-day-2026-site-layout.png new file mode 100644 index 0000000..4192d50 Binary files /dev/null and b/src/content/articles/field-day-2026-site-layout.png differ diff --git a/src/content/articles/field-day-40-41-tribander.png b/src/content/articles/field-day-40-41-tribander.png new file mode 100644 index 0000000..1b6fe55 Binary files /dev/null and b/src/content/articles/field-day-40-41-tribander.png differ diff --git a/src/content/articles/field-day-camp-freeman.png b/src/content/articles/field-day-camp-freeman.png new file mode 100644 index 0000000..8240f0a Binary files /dev/null and b/src/content/articles/field-day-camp-freeman.png differ diff --git a/src/content/articles/field-day-rv-operator.png b/src/content/articles/field-day-rv-operator.png new file mode 100644 index 0000000..b315ffe Binary files /dev/null and b/src/content/articles/field-day-rv-operator.png differ diff --git a/src/content/articles/microhams-field-day-history.md b/src/content/articles/microhams-field-day-history.md new file mode 100644 index 0000000..e4d4ea7 --- /dev/null +++ b/src/content/articles/microhams-field-day-history.md @@ -0,0 +1,51 @@ +--- +title: 'MicroHAMS Field Day: From Parking Garages to Camp Freeman' +description: 'A look back at MicroHAMS Field Day — the rooftop-garage and park sites of the early years, Field Day with BEARONS and Snohomish ACS at Camp Freeman, and the engineered HF/VHF station returning for 2026 as N7OS.' +author: 'MicroHAMS' +date: 2026-06-14 +draft: false +featured: false +tags: ['Field Day', 'HF'] +--- + +## A tradition since 1999 + +Since our formation in 1999, MicroHAMS has put on MANY field day efforts. Some large, some small. Some of the sites included the roof top level of the building 40/41 parking garage, the old campus recycling area and Farrel-McWhirter Park in Redmond. + +![A tribander beam antenna silhouetted against a pink-and-blue sunset sky, with a work light glowing below the boom, atop the building 40/41 parking garage.](./field-day-40-41-tribander.png) + +_Tribander at sunset over the 40/41 garage._ + +During the pandemic, we leveraged both field day rules and virtual meeting tools to have field day together as a group and have the same sort of fun we enjoyed at physical field days: midnight troubleshooting, teach members new things, and generally having a great time and holding true to the spirit of field day. + +## Back to the Field Day + +In 2024, we were invited by the Boeing Everett employee's amateur radio club BEARONS, to join them at a wonderful site in Eastern Snohomish county and once again had a GREAT field day together. Snohomish DEM/ACS supplied a communications vehicle for the VHF+ station and a [MITRU](https://snohomishcountywa.gov/6417/MITRU-Program) trailer to provide power and Internet to the stations. + +![MicroHAMS Field Day at Camp Freeman — a large covered pavilion, the Snohomish County communications van, antenna masts, pop-up canopies, and tents spread across a grassy clearing ringed by tall evergreens.](./field-day-camp-freeman.png) + +_2024/25 Field Day VHF station at Camp Freeman (2024 setup shown)._ + +## Field Day 2025 + +In 2025, the Snohomish ACS team provided additional assistance with setup and operating. The antenna configuration was simplified to a Buddihex antenna for 20m, 15m and 10m with a triplexer and bandpass filters feeding the three Icom IC-7300 HF radios. Dipoles were available for 40m and 80m at night. + +We operated under the call “W7FLY”. 3A plus VHF (6m, 2m and 70cm) with a vertical and two wire dipoles up at 62' and 80+'. We had a great time and great weather (it was “too hot” on Friday, but we all had fun!) Plenty of space for on-site camping, great food, and really good band conditions for the entire 24 hours. + +## The 2026 station + +For 2026, operating as N7OS, we will be 3A class again with 3 HF stations and a VHF+ station. We expect to have the Buddihex back on a 72' telescoping tower trailer with the triplexer and bandpass filters. We will only need a single dipole for the low bands with a duplexer and bandpass filters splitting 40m and 80m. We will have the Icom radios back along with the MITRU and communications van for VHF+. + +![Aerial map of the expected 2026 Field Day site at Camp Freeman: the BuddiHex on a mast trailer and an 80m/40m wire dipole feed the HF stations; the VHF+ station sits with its Yagis on the mast trailer beside the MITRU and the DEM communications van; parking, a visitor information table, and camping ring the clearing, with north toward the top.](./field-day-2026-site-layout.png) + +_Expected 2026 site layout._ + +Three stations are planned: an **80/10m** station and a **20m** station, each on an Icom IC-7300, plus a **VHF+** position pairing an IC-7300 and an IC-9700. The Buddihex rides the 72' mast trailer for the high bands while a single low-band dipole handles 80m and 40m through a duplexer and bandpass filters, and the VHF+ Yagis share the mast trailer beside the [MITRU](https://snohomishcountywa.gov/6417/MITRU-Program) and the communications van. Each position runs dual-monitor PCs and the N3FJP logger; parking and a visitor information table sit toward the entrance, with camping around the north, south, and east perimeter. + +## Come join us for fun on the air! + +![A smiling operator in a ball cap and headset logging contacts on a laptop and radio at a table inside an RV.](./field-day-rv-operator.png) + +Please check out our other pages for more information about our field day efforts this year, how to find us, and more! We really do look forward to you joining us for another FUN field day! + +[Come join us in 2026 on June 26 (for setup) and 27-28 for operating and tear down at Camp Freeman near Lake Roesiger.](/events/2026-06-arrl-field-day) diff --git a/src/content/events/2026-06-arrl-field-day/cover.jpg b/src/content/events/2026-06-arrl-field-day/cover.jpg new file mode 100644 index 0000000..590190d Binary files /dev/null and b/src/content/events/2026-06-arrl-field-day/cover.jpg differ diff --git a/src/content/events/2026-06-arrl-field-day/index.md b/src/content/events/2026-06-arrl-field-day/index.md new file mode 100644 index 0000000..16c3269 --- /dev/null +++ b/src/content/events/2026-06-arrl-field-day/index.md @@ -0,0 +1,79 @@ +--- +title: 'ARRL Field Day 2026' +description: 'MicroHAMS returns to Camp Freeman near Monroe for our 4th year of ARRL Field Day as N7OS — a 3A HF station plus VHF, camping, great food, and a standing invitation to Snohomish County ACS and former BEARONS. Operate, help, or just stop by.' +author: 'Grant Hopper, KB7WSD' +eventDate: 2026-06-27 +endDate: 2026-06-28 +startTime: '11:00 AM' +endTime: '11:00 AM' +timezone: 'America/Los_Angeles' +customVenue: + name: 'Camp Freeman' + address: 'Near Monroe, WA 98272' + room: 'Covered pavilion' + mapUrl: 'https://maps.app.goo.gl/tFc7BcSDmgtieApJ6' + latitude: 47.979857 + longitude: -121.885245 +eventType: 'field-day' +registrationRequired: false +contactPerson: 'Grant Hopper, KB7WSD' +contactEmail: 'kb7wsd@gmail.com' +featured: true +cover: './cover.jpg' +coverAlt: 'The covered pavilion at Camp Freeman with a VHF/UHF beam on a mast and the Snohomish County Emergency Management MITRU trailer during a previous Field Day' +tags: ['Field Day', 'ARRL', 'portable', 'emergency preparedness', 'camping'] +--- + +MicroHAMS is heading back to **Camp Freeman near Monroe, WA** to operate ARRL Field Day 2026 as **N7OS**. This is our 4th year with a MicroHAMS presence at the site, and it just keeps getting better. The operating period runs **11:00 AM Saturday, June 27 through 11:00 AM Sunday, June 28**, with setup beginning the early afternoon of **Friday, June 26**. + +Field Day is amateur radio's largest annual on-air event — a 24-hour exercise in setting up and operating capable stations away from commercial power and permanent infrastructure. It's equal parts emergency-preparedness practice, operating contest, and club campout. + +## The Site: Camp Freeman + +If you haven't been to Camp Freeman, it's a great spot for Field Day: + +- A large covered structure where we set up the stations +- Plenty of room for tent camping or parking a limited number of trailers and RVs +- A "honey bucket" that stays remarkably clean throughout the weekend +- AC power for the kitchen and computers (the radios run on solar power from the MITRU) +- Lots of space to just hang out and enjoy the day + +[Open the site in Google Maps](https://maps.app.goo.gl/tFc7BcSDmgtieApJ6) (47.979857, -121.885245). + +## Our Setup + +We'll again run a **3A station** — three transmitters, each dedicated to a specific band — plus a **VHF station** covering **6m, 2m, and 70cm**, with computer logging and additional operating resources such as propagation mapping. + +Much of this is possible thanks to **Snohomish County Department of Emergency Management** resources made available through the **ACS**, including the **MITRU trailer** that provides internet connectivity and solar power for our Field Day. + +## Everyone's Invited + +We're inviting all **Snohomish County ACS** members. As always, we're grateful for the help and participation of the ACS — without them we wouldn't have as much to offer, and we wouldn't have as much fun. As Scott puts it: _"If you don't have other field day plans, at least stop by!"_ + +We're also inviting members of the former **BEARONS (W7FLY)** club — it's thanks to them that we started having a real Field Day again. + +## We Need Your Help + +There's a job for everyone, whether you want to operate or pitch in behind the scenes: + +- Getting a couple of wire antennas up into the trees +- Bonus-point activities — satellite contacts, copying the W1AW bulletin, and sending NTS messages +- Computer and network management +- Greeters and help with visitors +- Parking management + +And of course, **great food** and plenty of chances to operate on your own or with assistance. + +## Get Involved + +**Save the date**, then contact **Grant Hopper, KB7WSD** at [kb7wsd@gmail.com](mailto:kb7wsd@gmail.com) to ask questions, volunteer, or just let us know you're planning to come and camp — **especially if you want to bring a trailer or RV**, since space for those is limited. + +Want to get in on the planning? Join the Field Day group: [groups.google.com/g/microhamsfd](https://groups.google.com/g/microhamsfd). + +We look forward to seeing you at MicroHAMS Field Day 2026 on June 27 and 28! + +## Schedule + +- **Friday, June 26 — early afternoon:** Setup begins +- **Saturday, June 27 — 11:00 AM:** Field Day operating begins +- **Sunday, June 28 — 11:00 AM:** Operating ends, followed by teardown diff --git a/src/content/events/2026-06-june-meeting/index.md b/src/content/events/2026-06-june-meeting/index.md new file mode 100644 index 0000000..dabeed1 --- /dev/null +++ b/src/content/events/2026-06-june-meeting/index.md @@ -0,0 +1,43 @@ +--- +title: 'June Meeting' +description: 'Monthly MicroHAMS meeting focused on ARRL Field Day 2026 — our N7OS operation at Camp Freeman near Monroe. Final plans, station and volunteer assignments, camping logistics, and how to get on the air.' +eventDate: 2026-06-16 +startTime: '6:00 PM' +endTime: '8:30 PM' +venue: 'building-31' +onlineMeeting: 'microhams-teams' +eventType: 'meeting' +registrationRequired: false +draft: false +featured: false +tags: ['Field Day'] +--- + +## Program + +### Field Day 2026 Planning — N7OS at Camp Freeman + +This month's meeting is all about **[ARRL Field Day 2026](/events/2026-06-arrl-field-day)**, our biggest operating event of the year. MicroHAMS returns to **Camp Freeman near Monroe** to operate as **N7OS** the weekend of **June 27–28**, with setup starting Friday afternoon, June 26. + +We'll walk through the plan and lock in the details together: + +- **The site:** what Camp Freeman offers — covered pavilion, camping and limited RV/trailer space, AC power for the kitchen, and solar power for the radios via the MITRU +- **The stations:** our 3A setup (three band-dedicated HF transmitters) plus a VHF station for 6m, 2m, and 70cm, with computer logging and propagation mapping, supported by Snohomish County ACS / Emergency Management resources +- **Volunteer assignments:** antenna raising, bonus-point activities (satellite contacts, copying the W1AW bulletin, sending NTS messages), computers and networking, greeters, and parking +- **Logistics:** camping plans, who's bringing trailers or RVs, food, and the setup/teardown timeline + +Whether you're a seasoned contester or have never operated Field Day before, come find out how to take part. There's a job — and a seat at a radio — for everyone. + +**Coordinating Field Day:** Grant Hopper, KB7WSD. Reach him at [kb7wsd@gmail.com](mailto:kb7wsd@gmail.com), and join the Field Day group at [groups.google.com/g/microhamsfd](https://groups.google.com/g/microhamsfd) to get in on the planning. + +## Meeting Schedule + +**6:00 PM - Meeting Begins:** + +- Show and Tell (bring your cool things!) +- Ham Help (bring your questions and challenges!) +- News and upcoming ham events and activities + +**6:30 PM - Presentation:** + +- Field Day 2026 Planning — N7OS at Camp Freeman diff --git a/src/content/pages/about.md b/src/content/pages/about.md index e1f5d45..0c47468 100644 --- a/src/content/pages/about.md +++ b/src/content/pages/about.md @@ -33,6 +33,8 @@ Since 2007, we've hosted an annual conference focusing on digital communications We participate in ARRL Field Day, often partnering with BEARONS (Boeing Employee Amateur Radio Society), showcasing emergency communications capabilities and portable station operations. Our most recent Field Day operations were multi-station, multi-band, multi-op events held in the summer of 2024 and 2025 in an area with a low RF noise floor and good access for amateurs in and around the Seattle area. +Read more about [our Field Day history and 2026 plans](/articles/microhams-field-day-history), or see the details for [ARRL Field Day 2026](/events/2026-06-arrl-field-day). + ### Mike & Key Swapmeet Lightning Talks In spring of 2025 members and the board pulled together a series of lightning talks that were available to visitors of the annual Mike & Key Swapmeet in Puyallup, WA. The open format is designed to encourage engagement with the community to the benefit of all hams. diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro index ad7d6f8..64cb949 100644 --- a/src/layouts/MarkdownLayout.astro +++ b/src/layouts/MarkdownLayout.astro @@ -41,6 +41,7 @@ const { frontmatter } = Astro.props; year: 'numeric', month: 'long', day: 'numeric', + timeZone: 'UTC', })} @@ -84,6 +85,7 @@ const { frontmatter } = Astro.props; year: 'numeric', month: 'long', day: 'numeric', + timeZone: 'UTC', })} ) diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro index b67a33b..703ce5c 100644 --- a/src/layouts/RootLayout.astro +++ b/src/layouts/RootLayout.astro @@ -12,6 +12,14 @@ */ import { ClientRouter } from 'astro:transitions'; + +// Self-hosted fonts (Fontsource → bundled woff2, no third-party request). +// Atkinson Hyperlegible Next: body/UI (Braille Institute low-vision face, incl. italic). +// JetBrains Mono: headings + code. +import '@fontsource-variable/atkinson-hyperlegible-next'; +import '@fontsource-variable/atkinson-hyperlegible-next/wght-italic.css'; +import '@fontsource-variable/jetbrains-mono'; + import '../styles/main.css'; interface Props { @@ -32,15 +40,28 @@ const { title, description = 'MicroHAMS - Amateur Radio Community', author } = A {author && } + { + /* Set theme synchronously before first paint to avoid a flash of the wrong theme. + Runs blocking in (is:inline keeps it out of the deferred module bundle). */ + } + + - - - - + {/* Fonts are self-hosted via Fontsource (imported above) — no third-party request. */} @@ -52,28 +73,28 @@ const { title, description = 'MicroHAMS - Amateur Radio Community', author } = A diff --git a/src/lib/event-datetime-toggle.test.ts b/src/lib/event-datetime-toggle.test.ts index 31d9ded..d4560a5 100644 --- a/src/lib/event-datetime-toggle.test.ts +++ b/src/lib/event-datetime-toggle.test.ts @@ -412,8 +412,10 @@ describe('Time Range Display', () => { }); it('handles events without any time', async () => { + // Current-year events omit the year, so pin the fixture to the current year. + const thisYear = new Date().getUTCFullYear(); const container = setupContainer(` - @@ -426,10 +428,30 @@ describe('Time Range Display', () => { expect(text).toContain('January'); expect(text).toContain('20'); - expect(text).toContain('2026'); - // No time should be shown + // Current-year events omit the year + expect(text).not.toContain(String(thisYear)); + // A bare calendar date shows neither a time nor a timezone expect(text).not.toContain('PM'); expect(text).not.toContain('AM'); + expect(text).not.toContain('UTC'); + + container.remove(); + }); + + it('shows the year for events outside the current year', async () => { + const otherYear = new Date().getUTCFullYear() + 2; + const container = setupContainer(` + + `); + + const { initDateTimeToggles } = await import('./event-datetime-toggle'); + initDateTimeToggles(); + + const text = container.querySelector('.datetime-text')!.textContent!; + expect(text).toContain(String(otherYear)); container.remove(); }); diff --git a/src/lib/event-datetime-toggle.ts b/src/lib/event-datetime-toggle.ts index ed10dec..4450e0f 100644 --- a/src/lib/event-datetime-toggle.ts +++ b/src/lib/event-datetime-toggle.ts @@ -1,10 +1,10 @@ /** * Event DateTime Toggle - * + * * Client-side script for toggling event times between: * - Browser local timezone (default) * - UTC - * + * * Usage: Add data attributes to a + ``` **Variants** (use `data-variant`): + - `primary` - Main actions - `secondary` - Alternative actions - `ghost` - Subtle actions **Sizes** (use `data-size`): + - `sm` - Compact - (default) - Normal - `lg` - Prominent @@ -151,20 +156,15 @@ Auto-fit creates responsive columns without media queries.

Title

Description

-
- Main content here -
-
- Footer content -
+
Main content here
+
Footer content
``` ### Badge ```html -Default -Accent +Default Accent ``` ## Modern CSS Features @@ -205,9 +205,9 @@ margin-right: var(--space-4); ```css font-size: clamp( - var(--text-xl), /* minimum */ - 5vw + 1rem, /* preferred */ - var(--text-3xl) /* maximum */ + var(--text-xl), + /* minimum */ 5vw + 1rem, + /* preferred */ var(--text-3xl) /* maximum */ ); ``` @@ -245,7 +245,7 @@ margin-block-start: var(--space-6); ```css /* GOOD - flat specificity */ -.nav__link[data-active="true"] { +.nav__link[data-active='true'] { color: var(--color-accent); } ``` @@ -267,7 +267,7 @@ margin-block-start: var(--space-6); /* Use layout primitives */ } -.card[data-variant="error"] { +.card[data-variant='error'] { color: var(--color-error); } ``` @@ -299,22 +299,31 @@ margin-block-start: var(--space-6); ### Naming Conventions **BEM for components**: + ```css -.card { } -.card__header { } -.card__title { } -.card--featured { } +.card { +} +.card__header { +} +.card__title { +} +.card--featured { +} ``` **Data attributes for state**: + ```html - ``` **Kebab-case for utilities**: + ```css -.text-center { } -.stack-4 { } +.text-center { +} +.stack-4 { +} ``` ### Documentation Comments @@ -352,7 +361,7 @@ Maintain WCAG AA minimum (4.5:1 for body text): ```css /* Use text-muted for secondary text */ -color: var(--color-text-muted); /* 4.5:1+ contrast */ +color: var(--color-text-muted); /* 4.5:1+ contrast */ ``` ### Reduced Motion @@ -376,21 +385,26 @@ Inline critical styles in ``: ```html ``` ### Font Loading -```css -@font-face { - font-family: 'Geist Variable'; - src: url('/fonts/geist-var.woff2') format('woff2-variations'); - font-display: swap; /* FOIT → FOUT */ -} -``` +Fonts are **self-hosted via Fontsource** and imported in `src/layouts/RootLayout.astro` +(`@fontsource-variable/atkinson-hyperlegible-next` for body/UI, `@fontsource-variable/jetbrains-mono` +for headings/code). Vite bundles and fingerprints the woff2 and serves them same-origin — there is no +`@font-face` to hand-write and no third-party request. Reference fonts only through the +`--font-sans` / `--font-mono` tokens (defined once in `01-typography/_fonts.css`); never paste a raw +or near-name family string into CSS. ## Quality Checklist diff --git a/src/styles/main.css b/src/styles/main.css index 9d0cea5..23bbd50 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -25,3 +25,6 @@ /* Utilities - Single-purpose helper classes */ @import './06-utilities/_utilities.css'; + +/* Motion - Scroll-driven enhancement (progressive, opt-in) */ +@import './06-utilities/_motion.css';