From 12989c1c3b7c04812fad36a535a7c455130a5ba8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Fri, 21 Aug 2026 12:41:08 -0400 Subject: [PATCH 1/6] feat(site): campfire homepage and site-wide theme 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) --- packages/site/astro.config.ts | 1 + packages/site/src/components/Head.astro | 7 + packages/site/src/components/Hero.astro | 254 ++++++++++++++++++ packages/site/src/components/TryItOut.astro | 145 ++++++---- .../src/components/home/GatherRound.astro | 83 ++++++ .../src/components/home/PackFeatures.astro | 152 +++++++++++ .../site/src/components/home/TrailMap.astro | 198 ++++++++++++++ packages/site/src/content/docs/index.mdx | 53 ++-- packages/site/src/styles.css | 176 +++++++++--- 9 files changed, 951 insertions(+), 118 deletions(-) create mode 100644 packages/site/src/components/Hero.astro create mode 100644 packages/site/src/components/home/GatherRound.astro create mode 100644 packages/site/src/components/home/PackFeatures.astro create mode 100644 packages/site/src/components/home/TrailMap.astro diff --git a/packages/site/astro.config.ts b/packages/site/astro.config.ts index 31d8328e1e..58ae8e7051 100644 --- a/packages/site/astro.config.ts +++ b/packages/site/astro.config.ts @@ -15,6 +15,7 @@ export default defineConfig({ starlight({ components: { Head: "./src/components/Head.astro", + Hero: "./src/components/Hero.astro", Pagination: "./src/components/Pagination.astro", }, customCss: ["./src/styles.css"], diff --git a/packages/site/src/components/Head.astro b/packages/site/src/components/Head.astro index 5de524d45d..76d1b4e5a6 100644 --- a/packages/site/src/components/Head.astro +++ b/packages/site/src/components/Head.astro @@ -17,6 +17,13 @@ const ogImage = new URL(ogImageUrl, Astro.site).toString(); + + + + diff --git a/packages/site/src/components/Hero.astro b/packages/site/src/components/Hero.astro new file mode 100644 index 0000000000..367610730a --- /dev/null +++ b/packages/site/src/components/Hero.astro @@ -0,0 +1,254 @@ +--- +import { LinkButton } from "@astrojs/starlight/components"; +import { Image } from "astro:assets"; + +const { data } = Astro.locals.starlightRoute.entry; +const { actions = [], image, tagline, title = data.title } = data.hero ?? {}; + +const logo = image && "dark" in image ? image.dark : undefined; +const alt = image?.alt ?? ""; + +const assurances = [ + { color: "moss", text: "100% open source" }, + { color: "ember", text: "Works with TS & JS" }, + { color: "pine", text: "Loves your monorepo" }, +]; +--- + +
+
+

🔥 A fast, friendly linter

+ +

+ + {tagline &&

} + + { + actions.length > 0 && ( +

+ {actions.map( + ({ + attrs: { class: className, ...attrs } = {}, + icon, + link: href, + text, + variant, + }) => ( + + {text} + + ), + )} +
+ ) + } + +
    + { + assurances.map((assurance) => ( +
  • + + {assurance.text} +
    • + )) + } +
+

+ +
+ +
+ { + logo && ( + {alt} + ) + } +
+ + + +
+
+ + diff --git a/packages/site/src/components/TryItOut.astro b/packages/site/src/components/TryItOut.astro index 6f102cf048..72357bca87 100644 --- a/packages/site/src/components/TryItOut.astro +++ b/packages/site/src/components/TryItOut.astro @@ -1,87 +1,124 @@ --- -import FlankedLinkButton from "./FlankedLinkButton.astro"; import PackageManagers from "./PackageManagers.astro"; --- -
-

Try out Flint on any web project:

+
+ + - +
+

🏕️ Pitch your tent in 10 seconds

-
-

+

Try Flint on any project

+ +

Pick your favorite fire-starter:

+ +
+ +
+ +

Frustrated with slow linting that doesn't catch what you actually care - about? + about? Or maybe your linter is fast, but doesn't include powerful lint + rules? Let Flint help you out. ☕

-

- Or maybe your linter is fast, but doesn't include powerful lint rules? -

-

Let Flint help you out.

+ + Get started linting with Flint →
- - Get started linting with Flint - -
+
diff --git a/packages/site/src/components/home/GatherRound.astro b/packages/site/src/components/home/GatherRound.astro new file mode 100644 index 0000000000..0559774c6c --- /dev/null +++ b/packages/site/src/components/home/GatherRound.astro @@ -0,0 +1,83 @@ +--- +import logo from "~/assets/logo.svg"; +import { Image } from "astro:assets"; +--- + +
+ The Flint logo: a flaming heart atop a squiggly underline + +

Gather 'round, friend.

+ +

+ Flint is built in the open by a tiny crew who really, really like good code + and warm drinks. Come hang out. +

+ +
+ 💬 Join the Discord + 📰 Read the blog +
+
+ + diff --git a/packages/site/src/components/home/PackFeatures.astro b/packages/site/src/components/home/PackFeatures.astro new file mode 100644 index 0000000000..b7eca908c5 --- /dev/null +++ b/packages/site/src/components/home/PackFeatures.astro @@ -0,0 +1,152 @@ +--- +import { Icon } from "@astrojs/starlight/components"; + +const features = [ + { + body: "Sensible rules right out of the bag. No config wrangling — just unzip, light the fire, and start linting.", + icon: "heart", + label: "cozy defaults", + title: "Toasty by default", + }, + { + body: "Intelligent caching and CI coordination keep duplicate jobs from wandering off-trail. Your runs finish faster.", + icon: "rocket", + label: "fast & cached", + title: "Always points home", + }, + { + body: "Lint rules powered by the full TypeScript type checker — they catch the kind of bugs that hide under tent flaps.", + icon: "star", + label: "typed power", + title: "Type-checked shelter", + }, + { + body: "Configs you can actually read by lantern-light. Powerful when you need it, quiet when you don't.", + icon: "document", + label: "clear config", + title: "Bright, readable config", + }, +] as const; +--- + +
+
+

🌲 What's in the pack

+

Everything you need for the trail

+

+ Four little tools, packed thoughtfully. Pull them out when the path gets + twisty. +

+
+ +
+ { + features.map((feature) => ( +
+
+ +
+
+ {feature.label} +

{feature.title}

+

{feature.body}

+
+
+ )) + } +
+
+ + diff --git a/packages/site/src/components/home/TrailMap.astro b/packages/site/src/components/home/TrailMap.astro new file mode 100644 index 0000000000..f310fe0f64 --- /dev/null +++ b/packages/site/src/components/home/TrailMap.astro @@ -0,0 +1,198 @@ +--- +import markdownIt from "markdown-it"; + +import { getRuleForPlugin } from "@flint.fyi/rule-data"; + +const renderer = markdownIt(); + +const ruleIds = [ + "anyAssignments", + "unnecessaryComparisons", + "deprecated", + "caseFallthroughs", + "arrayIncludes", + "unnecessaryTernaries", +]; + +const rules = ruleIds.map((ruleId) => { + const { about } = getRuleForPlugin("ts", ruleId); + + return { + description: renderer.renderInline(about.description), + id: ruleId, + preset: about.presets?.[0] ?? "none", + }; +}); +--- + +
+
+

📖 The trail map

+

Hundreds of rules, hand-picked & happy.

+

+ Each rule comes with a friendly explanation, real-world examples, and an + autofix when we can manage it. No cryptic codes. No lecture from the + scout-master. +

+
+ Browse rules + Read the docs +
+
+ +
    + { + rules.map((rule) => ( +
  • + {rule.id} +

    + + + ts + + + {rule.preset} + + +

    • + )) + } +
+
+ + diff --git a/packages/site/src/content/docs/index.mdx b/packages/site/src/content/docs/index.mdx index 1c117213a6..1f16a2e02f 100644 --- a/packages/site/src/content/docs/index.mdx +++ b/packages/site/src/content/docs/index.mdx @@ -1,60 +1,49 @@ --- banner: content: | - Flint is still very early stage and experimental. - Not all features have been implemented. + 🪵 Flint is early and experimental — pull up a log, things are still being whittled. description: Flint is a fast, friendly linter. template: splash hero: actions: - - icon: open-book - link: /about - text: Learn More - variant: "primary" - icon: right-arrow + link: /about + text: Light the fire + variant: primary + - icon: open-book link: /rules - text: Explore Rules + text: Explore the trail variant: secondary - attrs: rel: me target: _blank icon: external link: https://github.com/flint-fyi/flint - text: View on GitHub - target: _blank + text: Star on GitHub variant: minimal image: - alt: A flaming heart atop a brown linter-style squiggly line + alt: "The Flint logo: a flaming heart atop a squiggly underline" dark: ~/assets/logo.svg light: ~/assets/logo.svg - tagline: A fast, friendly linter for JavaScript, TypeScript, and more. - title: "Flint" + tagline: >- + Flint tidies up JavaScript, TypeScript, and more with inviting defaults, + gentle reporting, and wonderful performance. + title: Pull up a log.
Lint by the fire. title: A fast, friendly linter --- -import { Card, CardGrid } from "@astrojs/starlight/components"; +import GatherRound from "~/components/home/GatherRound.astro"; +import PackFeatures from "~/components/home/PackFeatures.astro"; +import TrailMap from "~/components/home/TrailMap.astro"; import Sponsors from "~/components/Sponsors.astro"; import TryItOut from "~/components/TryItOut.astro"; - - - Fall in love with your linter. Flint's intentional defaults and rich - reporting surface only the issues you'll want it to find. - - - Flint's intelligent caching and coordination eliminate duplicate CI - workflows for tasks such as formatting and type-checking. - - - Flint builds the most useful class of lint rules that use the full power of - TypeScript's type checker to find bugs in your code. - - - Flint configs embrace readability and power. They give you control over your - linter without making you learn its internals. - - - + + + + + + diff --git a/packages/site/src/styles.css b/packages/site/src/styles.css index 950ca602f4..6b6a7967b9 100644 --- a/packages/site/src/styles.css +++ b/packages/site/src/styles.css @@ -1,34 +1,90 @@ /* Generated by: https://starlight.astro.build/guides/css-and-tailwind/#theming */ +/* Campfire palette shared by both themes. */ +:root { + --flint-bark: #4b2915; + --flint-cream: #fbf4e6; + --flint-ember: #f6722b; + --flint-ember-deep: #b33a0a; + --flint-ember-soft: #fab36d; + --flint-moss: #65955a; + --flint-night: #0c1a32; + --flint-night-top: #133555; + --flint-pine: #185b37; + --flint-pine-deep: #003821; + + --flint-font-display: Fraunces, ui-serif, Georgia, serif; +} + /* Dark mode colors. */ :root { - --sl-color-accent-low: #072d00; - --sl-color-accent: #247f00; - --sl-color-accent-high: #aad7a0; - --sl-color-white: #ffffff; - --sl-color-gray-1: #eaf0e8; - --sl-color-gray-2: #bdc4bb; - --sl-color-gray-3: #82907f; - --sl-color-gray-4: #4f5c4d; - --sl-color-gray-5: #303c2d; - --sl-color-gray-6: #1f2a1c; - --sl-color-black: #151a13; + --sl-color-accent-low: #562001; + --sl-color-accent: #ef7926; + --sl-color-accent-high: #ffc48a; + --sl-color-white: #fbf4e6; + --sl-color-gray-1: #eee7d9; + --sl-color-gray-2: #cec2af; + --sl-color-gray-3: #a08f7b; + --sl-color-gray-4: #515e75; + --sl-color-gray-5: #2c3e57; + --sl-color-gray-6: #182941; + --sl-color-black: #0b1628; + + /* `--flint-ember` is a flame fill, not a text color: at 3:1 against these + backgrounds it is unreadable as body copy. Text uses these instead. */ + --flint-ember-text: #ef7926; + --flint-ember-fill: #ef7926; + --flint-ember-fill-text: #2a1204; + + --flint-paper: #16263d; + --flint-paper-border: #3b4d68; + --flint-paper-shadow: 0 2px 0 0 #060e1c; + --flint-glow: 0 0 2.5rem -0.5rem #ef792655; + --flint-badge-surface: #2a1a10; + --flint-badge-text: #ffc48a; + --flint-pine-mark: #79ad6c; + + --flint-band-top: var(--flint-night-top); + --flint-band-bottom: var(--flint-night); + --flint-band-text: var(--flint-cream); + --flint-band-muted: #b9c4d6; + --flint-band-eyebrow: var(--flint-ember-soft); + --flint-band-stars: 0.3; } /* Light mode colors. */ :root[data-theme="light"] { - --sl-color-accent-low: #c0e2b8; - --sl-color-accent: #237b00; - --sl-color-accent-high: #0d3e00; - --sl-color-white: #151a13; - --sl-color-gray-1: #1f2a1c; - --sl-color-gray-2: #303c2d; - --sl-color-gray-3: #4f5c4d; - --sl-color-gray-4: #82907f; - --sl-color-gray-5: #bdc4bb; - --sl-color-gray-6: #eaf0e8; - --sl-color-gray-7: #f4f7f3; - --sl-color-black: #ffffff; + --sl-color-accent-low: #fdd7ac; + --sl-color-accent: #b33a0a; + --sl-color-accent-high: #6f1200; + --sl-color-white: #3b1d13; + --sl-color-gray-1: #54301e; + --sl-color-gray-2: #664432; + --sl-color-gray-3: #876b59; + --sl-color-gray-4: #bb9f84; + --sl-color-gray-5: #e3d2b8; + --sl-color-gray-6: #f1e7d2; + --sl-color-gray-7: #f7efe0; + --sl-color-black: #fbf4e6; + + --flint-ember-text: #b33a0a; + --flint-ember-fill: #b33a0a; + --flint-ember-fill-text: var(--flint-cream); + + --flint-paper: #fffaf1; + --flint-paper-border: #4b2915; + --flint-paper-shadow: 0 3px 0 0 #4b291522; + --flint-glow: 0 0 2.5rem -0.75rem #f6722b66; + --flint-badge-surface: #f7d19c; + --flint-badge-text: #6f1200; + --flint-pine-mark: #185b37; + + --flint-band-top: #f4ead5; + --flint-band-bottom: #efd3ac; + --flint-band-text: #3b1d13; + --flint-band-muted: #664432; + --flint-band-eyebrow: #6f1200; + --flint-band-stars: 0; } html[data-theme="light"] .only-dark { @@ -42,6 +98,18 @@ html[data-theme="dark"] .only-light { /* General customizations. */ :root { --sl-content-width: 56rem; + --sl-font: Nunito, ui-sans-serif, system-ui, sans-serif; + --sl-font-mono: "JetBrains Mono", ui-monospace, monospace; +} + +h1, +h2, +h3, +.site-title, +.flint-display { + font-family: var(--flint-font-display); + font-weight: 900; + letter-spacing: -0.015em; } table code { @@ -49,20 +117,64 @@ table code { padding: 0; } +.flint-paper { + background: var(--flint-paper); + border: 2px solid var(--flint-paper-border); + border-radius: 1rem; + box-shadow: var(--flint-paper-shadow); +} + +.flint-eyebrow { + color: var(--flint-ember-text); + font-size: var(--sl-text-sm); + font-weight: 800; + letter-spacing: 0.18em; + margin: 0; + text-transform: uppercase; +} + +.starlight-aside, +.card, +.starlight-package-managers-tabs { + border-radius: 1rem; +} + +.card { + background: var(--flint-paper); + border-color: var(--flint-paper-border); +} + +a.sl-link-button.primary { + background: var(--flint-ember-fill); + border-color: var(--flint-ember-fill); + color: var(--flint-ember-fill-text); +} + +a.sl-link-button.primary:hover { + box-shadow: var(--flint-glow); + transform: translateY(-2px); +} + +a.sl-link-button { + border-radius: 999px; + transition: + box-shadow 150ms, + transform 150ms; +} + /* Homepage (hero) customizations. */ -.hero { - padding-block: clamp(1.25rem, calc(0.5rem + 5vmin), 5rem); +.hero-ember { + color: var(--flint-ember-text); } -.hero img { - max-height: 15rem; - user-select: none; +/* Starlight chrome customizations. */ +header.header { + background: var(--sl-color-black); + border-block-end: 2px solid var(--sl-color-gray-5); } -@media (width >= 800px) { - .hero img { - object-position: right; - } +.site-title { + font-size: var(--sl-text-xl); } :root[data-theme="light"] .only-dark { From f8daeeb4d749172b9e781a7a5e4fd58ccfb88e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Fri, 21 Aug 2026 13:21:13 -0400 Subject: [PATCH 2/6] fix(site): theme-aware banner, distinct feature hues, centered badge - 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) --- packages/site/src/components/Pagination.astro | 9 ++++- packages/site/src/components/TryItOut.astro | 6 ++-- .../src/components/home/PackFeatures.astro | 34 ++++++++++++++++--- packages/site/src/styles.css | 22 ++++++++++++ 4 files changed, 62 insertions(+), 9 deletions(-) diff --git a/packages/site/src/components/Pagination.astro b/packages/site/src/components/Pagination.astro index 2d56586d08..defb1daed4 100644 --- a/packages/site/src/components/Pagination.astro +++ b/packages/site/src/components/Pagination.astro @@ -16,7 +16,7 @@ export type Props = StarlightRouteData; { Astro.url.pathname === "/" && ( - + Deploys by Netlify

- Frustrated with slow linting that doesn't catch what you actually care - about? Or maybe your linter is fast, but doesn't include powerful lint - rules? Let Flint help you out. ☕ + Frustrated with slow linting that doesn't catch what you care about? Or + maybe your linter is fast, but doesn't include powerful lint rules? Let + Flint help you out. ☕

Get started linting with Flint → diff --git a/packages/site/src/components/home/PackFeatures.astro b/packages/site/src/components/home/PackFeatures.astro index b7eca908c5..3f64f709a1 100644 --- a/packages/site/src/components/home/PackFeatures.astro +++ b/packages/site/src/components/home/PackFeatures.astro @@ -4,24 +4,28 @@ import { Icon } from "@astrojs/starlight/components"; const features = [ { body: "Sensible rules right out of the bag. No config wrangling — just unzip, light the fire, and start linting.", + accent: "ember", icon: "heart", label: "cozy defaults", title: "Toasty by default", }, { body: "Intelligent caching and CI coordination keep duplicate jobs from wandering off-trail. Your runs finish faster.", + accent: "moss", icon: "rocket", label: "fast & cached", title: "Always points home", }, { body: "Lint rules powered by the full TypeScript type checker — they catch the kind of bugs that hide under tent flaps.", + accent: "lake", icon: "star", label: "typed power", title: "Type-checked shelter", }, { body: "Configs you can actually read by lantern-light. Powerful when you need it, quiet when you don't.", + accent: "berry", icon: "document", label: "clear config", title: "Bright, readable config", @@ -42,7 +46,7 @@ const features = [
{ features.map((feature) => ( -
+
@@ -107,13 +111,33 @@ const features = [ transform: translateY(-4px); } + .feature[data-accent="ember"] { + --feature-bg: var(--flint-tag-ember-bg); + --feature-fg: var(--flint-tag-ember-fg); + } + + .feature[data-accent="moss"] { + --feature-bg: var(--flint-tag-moss-bg); + --feature-fg: var(--flint-tag-moss-fg); + } + + .feature[data-accent="lake"] { + --feature-bg: var(--flint-tag-lake-bg); + --feature-fg: var(--flint-tag-lake-fg); + } + + .feature[data-accent="berry"] { + --feature-bg: var(--flint-tag-berry-bg); + --feature-fg: var(--flint-tag-berry-fg); + } + .icon { align-items: center; - background: var(--flint-badge-surface); + background: var(--feature-bg); block-size: 3.5rem; border: 2px solid var(--flint-paper-border); border-radius: 0.9rem; - color: var(--flint-badge-text); + color: var(--feature-fg); display: flex; flex-shrink: 0; inline-size: 3.5rem; @@ -121,9 +145,9 @@ const features = [ } .label { - background: color-mix(in srgb, var(--flint-moss) 22%, transparent); + background: var(--feature-bg); border-radius: 999px; - color: var(--sl-color-white); + color: var(--feature-fg); display: inline-block; font-size: var(--sl-text-xs); font-weight: 800; diff --git a/packages/site/src/styles.css b/packages/site/src/styles.css index 6b6a7967b9..eb3cba8d50 100644 --- a/packages/site/src/styles.css +++ b/packages/site/src/styles.css @@ -42,8 +42,19 @@ --flint-glow: 0 0 2.5rem -0.5rem #ef792655; --flint-badge-surface: #2a1a10; --flint-badge-text: #ffc48a; + --sl-color-banner-bg: var(--flint-badge-surface); + --sl-color-banner-text: var(--flint-badge-text); --flint-pine-mark: #79ad6c; + --flint-tag-ember-bg: #3c1d0e; + --flint-tag-ember-fg: #ffb48e; + --flint-tag-moss-bg: #172d12; + --flint-tag-moss-fg: #a4dd98; + --flint-tag-lake-bg: #0b293f; + --flint-tag-lake-fg: #8bd2ff; + --flint-tag-berry-bg: #3b1a28; + --flint-tag-berry-fg: #ffacce; + --flint-band-top: var(--flint-night-top); --flint-band-bottom: var(--flint-night); --flint-band-text: var(--flint-cream); @@ -77,8 +88,19 @@ --flint-glow: 0 0 2.5rem -0.75rem #f6722b66; --flint-badge-surface: #f7d19c; --flint-badge-text: #6f1200; + --sl-color-banner-bg: var(--flint-badge-surface); + --sl-color-banner-text: var(--flint-badge-text); --flint-pine-mark: #185b37; + --flint-tag-ember-bg: #ffcab2; + --flint-tag-ember-fg: #732600; + --flint-tag-moss-bg: #c0e3b8; + --flint-tag-moss-fg: #155003; + --flint-tag-lake-bg: #b1ddff; + --flint-tag-lake-fg: #00457d; + --flint-tag-berry-bg: #fec5da; + --flint-tag-berry-fg: #701f46; + --flint-band-top: #f4ead5; --flint-band-bottom: #efd3ac; --flint-band-text: #3b1d13; From 9f530783a46860dbc2fcccc8691f8e3a2783925c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Fri, 21 Aug 2026 13:24:11 -0400 Subject: [PATCH 3/6] fix(site): keep the install aside's emoji upright Co-Authored-By: Claude Opus 5 (1M context) --- packages/site/src/components/TryItOut.astro | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/site/src/components/TryItOut.astro b/packages/site/src/components/TryItOut.astro index 3e4554301f..9398cb96ad 100644 --- a/packages/site/src/components/TryItOut.astro +++ b/packages/site/src/components/TryItOut.astro @@ -20,7 +20,7 @@ import PackageManagers from "./PackageManagers.astro";

Frustrated with slow linting that doesn't catch what you care about? Or maybe your linter is fast, but doesn't include powerful lint rules? Let - Flint help you out. ☕ + Flint help you out. ☕

Get started linting with Flint → @@ -102,6 +102,10 @@ import PackageManagers from "./PackageManagers.astro"; margin: 2rem 0 0; } + .emoji { + font-style: normal; + } + .button { background: var(--flint-ember-fill); border: 2px solid var(--flint-ember-fill); From d688e976db8582756405bb6fb5826241648e3bd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Fri, 21 Aug 2026 13:25:57 -0400 Subject: [PATCH 4/6] one less emdash :triumph: --- packages/site/src/components/home/PackFeatures.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/site/src/components/home/PackFeatures.astro b/packages/site/src/components/home/PackFeatures.astro index 3f64f709a1..b32ccd6357 100644 --- a/packages/site/src/components/home/PackFeatures.astro +++ b/packages/site/src/components/home/PackFeatures.astro @@ -17,7 +17,7 @@ const features = [ title: "Always points home", }, { - body: "Lint rules powered by the full TypeScript type checker — they catch the kind of bugs that hide under tent flaps.", + body: "Lint rules powered by the full TypeScript type checker. They catch the kind of bugs that hide under tent flaps.", accent: "lake", icon: "star", label: "typed power", From 23ffbc9dcbd334268ccf97dcdd8117fcbfbd17a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Fri, 21 Aug 2026 15:13:42 -0400 Subject: [PATCH 5/6] fix(site): tighten the homepage on narrow screens - 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) --- packages/site/src/components/Hero.astro | 44 +++++++++++++++---- packages/site/src/components/Sponsors.astro | 3 +- packages/site/src/components/TryItOut.astro | 18 +++++--- .../src/components/home/GatherRound.astro | 5 ++- .../src/components/home/PackFeatures.astro | 29 +++++++++--- .../site/src/components/home/TrailMap.astro | 9 ++-- 6 files changed, 82 insertions(+), 26 deletions(-) diff --git a/packages/site/src/components/Hero.astro b/packages/site/src/components/Hero.astro index 367610730a..0e13132d3a 100644 --- a/packages/site/src/components/Hero.astro +++ b/packages/site/src/components/Hero.astro @@ -104,18 +104,18 @@ const assurances = [ color-mix(in srgb, var(--flint-badge-text) 35%, transparent); border-radius: 999px; color: var(--flint-badge-text); - font-size: var(--sl-text-base); + font-size: var(--sl-text-sm); font-weight: 800; - letter-spacing: 0.08em; + letter-spacing: 0.05em; margin: 0; - padding: 0.4rem 1rem; + padding: 0.35rem 0.9rem; text-transform: uppercase; } h1 { color: var(--sl-color-white); - font-size: clamp(2.5rem, calc(1rem + 4.5vw), 4rem); - line-height: 1.02; + font-size: clamp(2.125rem, calc(1rem + 4.5vw), 4rem); + line-height: 1.05; margin: 0; } @@ -129,16 +129,21 @@ const assurances = [ .actions { display: flex; - flex-wrap: wrap; + flex-direction: column; gap: 0.75rem; } + .actions a { + inline-size: 100%; + justify-content: center; + } + .assurances { color: var(--sl-color-gray-2); display: flex; - flex-wrap: wrap; + flex-direction: column; font-size: var(--sl-text-sm); - gap: 0.5rem 1.5rem; + gap: 0.5rem; list-style: none; margin: 0; padding: 0; @@ -194,7 +199,7 @@ const assurances = [ .mark :global(img) { block-size: auto; - inline-size: min(100%, 13rem); + inline-size: min(100%, 9rem); user-select: none; } @@ -245,10 +250,31 @@ const assurances = [ } } + @media (width >= 30rem) { + .actions { + flex-direction: row; + flex-wrap: wrap; + } + + .actions a { + inline-size: auto; + } + + .assurances { + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + } + } + @media (width >= 50rem) { .hero { grid-template-columns: 7fr 5fr; padding-block: clamp(2rem, calc(1rem + 8vmin), 6rem); } + + .mark :global(img) { + inline-size: min(100%, 13rem); + } } diff --git a/packages/site/src/components/Sponsors.astro b/packages/site/src/components/Sponsors.astro index df9ab4716b..2a2c59655e 100644 --- a/packages/site/src/components/Sponsors.astro +++ b/packages/site/src/components/Sponsors.astro @@ -3,7 +3,7 @@ import FlankedLinkButton from "./FlankedLinkButton.astro"; import SponsorsList from "./SponsorsList.astro"; --- -
+

❤️‍🔥
@@ -41,6 +41,7 @@ import SponsorsList from "./SponsorsList.astro"; h2 { font-size: var(--sl-text-h2); + line-height: 1.25; margin: 0; text-align: center; } diff --git a/packages/site/src/components/TryItOut.astro b/packages/site/src/components/TryItOut.astro index 9398cb96ad..7a104f78ad 100644 --- a/packages/site/src/components/TryItOut.astro +++ b/packages/site/src/components/TryItOut.astro @@ -2,7 +2,7 @@ import PackageManagers from "./PackageManagers.astro"; --- -
+
@@ -32,9 +32,9 @@ import PackageManagers from "./PackageManagers.astro"; border: 2px solid var(--flint-paper-border); border-radius: 1.5rem; isolation: isolate; - margin-block: 4rem; + margin-block: clamp(2.5rem, 8vw, 4rem); overflow: hidden; - padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); + padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); position: relative; } @@ -70,9 +70,9 @@ import PackageManagers from "./PackageManagers.astro"; .eyebrow { color: var(--flint-band-eyebrow); - font-size: var(--sl-text-sm); + font-size: var(--sl-text-xs); font-weight: 800; - letter-spacing: 0.2em; + letter-spacing: 0.12em; margin: 0; text-transform: uppercase; } @@ -80,6 +80,7 @@ import PackageManagers from "./PackageManagers.astro"; h2 { color: var(--flint-band-text); font-size: clamp(1.875rem, calc(1rem + 2.5vw), 2.75rem); + line-height: 1.15; margin: 0.75rem 0 0; } @@ -94,6 +95,13 @@ import PackageManagers from "./PackageManagers.astro"; text-align: start; } + @media (width >= 30rem) { + .eyebrow { + font-size: var(--sl-text-sm); + letter-spacing: 0.2em; + } + } + .aside { color: var(--flint-band-muted); font-size: var(--sl-text-lg); diff --git a/packages/site/src/components/home/GatherRound.astro b/packages/site/src/components/home/GatherRound.astro index 0559774c6c..db109acc4a 100644 --- a/packages/site/src/components/home/GatherRound.astro +++ b/packages/site/src/components/home/GatherRound.astro @@ -3,7 +3,7 @@ import logo from "~/assets/logo.svg"; import { Image } from "astro:assets"; --- -
+
The Flint logo: a flaming heart atop a squiggly underline +

🌲 What's in the pack

Everything you need for the trail

@@ -50,7 +50,7 @@ const features = [
-
+
{feature.label}

{feature.title}

{feature.body}

@@ -63,7 +63,7 @@ const features = [