feat(site): campfire homepage and site-wide theme - #3258
Conversation
Implements the campfire homepage design across the whole site rather than only the landing page, so docs and blog pages inherit the same palette, typography, and card treatment. - Maps the campfire palette onto Starlight's token system for both light and dark modes, adding Fraunces/Nunito/JetBrains Mono. - Rebuilds the homepage as hero, install band, feature pack, trail map, and community sections, with a custom Starlight Hero override. - Uses the existing Flint logo for hero and community artwork instead of generated illustrations. - Pulls the trail map's rules from `@flint.fyi/rule-data` so their descriptions and presets stay in sync with the plugin. The design's `--ember` was used as both a flame fill and a text color, which left light-mode labels at 2.0:1 and white-on-ember buttons at 2.6:1. Text and button fills now use a deepened ember instead. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
✅ Deploy Preview for flint-fyi ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
- The banner defaulted to Starlight's `--sl-color-bg-accent` with inverted text, so it read dark in light mode and light in dark mode. It now sets `--sl-color-banner-bg` and `--sl-color-banner-text` per theme. - The four feature cards all shared one green tag. Each now carries its own hue for its icon tile and label, at 6.8:1 or better in both themes. - Centers the Netlify badge below the homepage credits. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- Stacks the hero's calls to action full-width below 30rem, so the pair of buttons and the orphaned GitHub link stop competing for one cramped row. The assurance list stacks alongside them. - Stacks each feature card's icon above its copy below 30rem, giving the headings the full card width instead of roughly half. - Scales down the hero headline floor and both eyebrows so they stop crowding the viewport edge and wrapping mid-label. - Marks the homepage sections `not-content`. They were inheriting `.sl-markdown-content`'s sibling margins, which added stray gaps between card icons and their labels; headings now set their own line-height, which that opt-out no longer supplies. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
`.glow` used `inset: -10%`, so its box extended past the viewport and grew the document's scrollable width: 410px against a 390px viewport, 826 against 768. Anchoring it to `inset: 0` and leaning on the blur keeps the same halo without the sideways scroll. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
| tagline: >- | ||
| Flint tidies up JavaScript, TypeScript, and more with inviting defaults, | ||
| gentle reporting, and wonderful performance. | ||
| title: Pull up a log.<br /><span class="hero-ember">Lint by the fire.</span> |
There was a problem hiding this comment.
[Question] Is this too marketing-y? I'm leaning towards switching this to have the big text say "A fast, friendly linter" for the first line & "for JavaScript, TypeScript, and more" for the second (or something like that). 🤔
There was a problem hiding this comment.
Yeah, some of the descriptions in the second part are odd. I've never seen a set of defaults, and said "wow those were some inviting defaults" 😅 Now, sensible defaults is a bit better. "gentle reporting" is similar. I'm not sure I've ever yearned for "gentle" reporting.
I'm leaning towards switching this to have the big text say "A fast, friendly linter" for the first line & "for JavaScript, TypeScript, and more" for the second
I like that more. simple and to the point.
|
This is more of a design / content critique than a pure code review. I definitely like the color scheme more than the previous one, so thumbs up on the new palette👍 I'm not 100% on the title font choice, but it's not bad either. Just feels slightly misplaced, and I can't put my finger on why. It give me a similar feel as Cooper Black, the classic advertising / newspaper font, which isn't what the palette really embodies. Again, I don't hate it, but it may be worth exploring other options for the title font. 
I'm not sure that I would know what to expect clicking "Light the fire" would actually take me to. Explore the trail makes sense as a guide book / documentation. But I wouldn't have guessed clicking Light the fire would take me to an about page. 
The analogies here are disjointed. For one, pitching a tent is also an innuendo, and i'd probably avoid that lol, but also, are we pitching a tent or starting a fire? Because I'm not sure why I would need a fire-starter to pitch a tent. Maybe something like "Roasting mallows in moments..." -> "pick your favorite fire-starter" 😆 
These floating emojis look odd in mobile. Recommend dropping those for smaller screens.
This is mostly good, but "doesn't include powerful lint rules" feels a bit weaker than the rest. Maybe "doesn't meet your linting needs", though that's a bit generic. What about "doesn't lint for all the things you think it should" (though that's long...). "Let flint help you out" -> "Give flint a shot"? 
Keep it simple. "Get started"? 
I really want to like this; the analogy is clever. But calling a set of four benefits "tools" feels odd. Spitballing, maybe something like four flares or beacons to light the way? Or maybe change up the analogy entirely to be about using stars in the sky to guide your way (e.g. north star). 
I do like my warm drinks 😍 
Minor, but "Join our Discord; Read our blog" feels more inviting And I mentioned this in slack, but the mobile experience on the home page feels cluttered. Would be good to use some container queries to reduce some of the complexity of the hero section for mobile. 
|
|
Yeah I'm away from computer rn so I'll avoid going too deep, but beyond the language @michaelfaith already highlighted, in general I feel like the colors clash. It feels like you had Claude start with an editorial style site but had Codex finish with a dashboard. It feels noisy; there's glow, colored shadows, dots, and just a lot of text. Nobody wants to read text. Oh, and starting with an em dash is a bold choice. 🙃 I won't say that it's not an improvement over the status quo in a vacuum but I can't say I love it. I know that's a fair bit of criticism without a lot of positivity, I'm just trying to keep it brief and failing (as evidenced by this) |
|
I did just see the message in Dis and def it looks significantly better on desktop :) |
Yeah I think I personally focused more on the light mode, and then the dark mode I just kind of splashed on top. I think I'll try out some less contrast-y colors for it. Maybe, like green (leaves) and/or brown (wood) with the dark blue (sky)? Something thematic like that?
Hit me! This is great!! 😁
LOL. That didn't occur to me 🤦 I was so amused by the suggested camping puns, and then ones I added, that I definitely went overboard. I'll dial it down and try to sprinkle them more liberally.
👍 Agreed. I made a little progress but not enough. |
3 participants
PR Checklist
status: accepting prsOverview
Implements a campfire-y design across the whole site. It's midnight-y dark blue in dark mode, and a light orange-y tint in light mode.
The logo could still use work; I'll file a followup if this goes in.
❤️🔥