From c88dfe1a5219053497b3ebaf7d189abe5bcf97b9 Mon Sep 17 00:00:00 2001 From: Frank Lagendijk Date: Wed, 1 Apr 2026 17:16:01 +0200 Subject: [PATCH 1/2] style: update homepage and page styling to match mergify.com - Add typescale CSS variables and update font setup - Add primary/secondary button variants matching mergify.com design - Fix heading font-weight selector (#main-content vs .main-content) - Improve page heading spacing (breadcrumb, title, subtitle, divider) - Set doc page subtitle to lighter color with balanced text-wrap - Update homepage hero to left-aligned layout - Make Get Started buttons fill width in a row Co-Authored-By: Claude Opus 4.6 (1M context) Change-Id: I09186ab200c0ea10d11302c35746c1d841e681b8 Claude-Session-Id: 9d1c27ca-cd0a-4521-bfce-3e9f58e620dc --- src/components/Button.astro | 68 ++++++++++++- src/components/PageContent/PageContent.astro | 4 +- src/content/docs/index.mdx | 11 +- src/content/docs/merge-queue.mdx | 2 +- src/styles/index.css | 100 +++++++++++-------- src/styles/theme.css | 13 ++- 6 files changed, 140 insertions(+), 58 deletions(-) diff --git a/src/components/Button.astro b/src/components/Button.astro index c41fbb167e..cb9efe3a3e 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -2,7 +2,7 @@ import { Icon } from 'astro-icon/components'; export interface Props { - colorScheme: + colorScheme?: | 'whiteAlpha' | 'blackAlpha' | 'gray' @@ -24,7 +24,7 @@ export interface Props { style?: string; href?: string; icon?: string; - variant?: 'ghost' | 'solid'; + variant?: 'ghost' | 'solid' | 'primary' | 'secondary'; target?: string; } const { @@ -35,9 +35,17 @@ const { variant = 'solid', target = '_blank', } = Astro.props as Props; + +const isPrimary = variant === 'primary'; +const isSecondary = variant === 'secondary'; +const classes = [ + 'button', + isPrimary ? 'button-primary' : isSecondary ? 'button-secondary' : `button-${colorScheme}`, + isPrimary || isSecondary ? '' : variant, +].filter(Boolean); --- -
+
{icon && } @@ -54,13 +62,65 @@ const { cursor: pointer; width: fit-content; } - .button a { + .button a, + .button a:hover, + .button a:focus-visible { display: flex; align-items: center; color: inherit; text-decoration: none; } + /* Primary button — matches mergify.com */ + .button.button-primary { + background-color: #000; + color: #fff; + border-radius: 12px; + padding: 10px 16px; + font-size: 0.875rem; + font-weight: 600; + line-height: 20px; + transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + background-color: #3e434c; + } + } + + /* Secondary button — matches mergify.com */ + .button.button-secondary { + background-color: rgba(255, 255, 255, 0.6); + color: #000; + border-radius: 12px; + padding: 10px 16px; + font-size: 0.875rem; + font-weight: 500; + line-height: 20px; + transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + background-color: rgba(255, 255, 255, 0.8); + } + } + + .theme-dark .button.button-primary { + background-color: #fff; + color: #000; + + &:hover { + background-color: #d1d5db; + } + } + + .theme-dark .button.button-secondary { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } + @mixin generate-button-styles($colorSchemes) { @each $colorScheme in $colorSchemes { .button-#{$colorScheme}.solid { diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index c821b72df1..d02912e509 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -69,7 +69,7 @@ const suppressTitle = content.suppressTitle; border-style: solid; border-bottom-width: 1px; width: 100%; - margin-top: 16px !important; + margin-top: 28px !important; margin-bottom: 32px; } @@ -100,7 +100,7 @@ const suppressTitle = content.suppressTitle; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; - margin-bottom: 0.75rem; + margin-bottom: 2rem; } :global(.page-heading-bar__breadcrumbs) { min-width: 0; diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 160ab8b15a..12681bdfe7 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -15,10 +15,7 @@ import Button from '~/components/Button.astro';

Ship Code Faster, Break Less

-

- Mergify eliminates broken builds, tames flaky tests, and cuts CI waste—so - your team ships with confidence. -

+
Mergify eliminates broken builds, tames flaky tests, and cuts CI waste—so your team ships with confidence.
@@ -88,9 +85,9 @@ import Button from '~/components/Button.astro';

Get Started

- - - + + +
diff --git a/src/content/docs/merge-queue.mdx b/src/content/docs/merge-queue.mdx index d1bf20942e..2d7c1cee27 100644 --- a/src/content/docs/merge-queue.mdx +++ b/src/content/docs/merge-queue.mdx @@ -94,7 +94,7 @@ Stop wasting engineering time on merge conflicts and broken main branches. Mergify's merge queue tests every PR against the latest code before merging, while parallel execution and smart batching keep your team shipping fast. - diff --git a/src/styles/index.css b/src/styles/index.css index 16d6ce3dbf..4368e84b91 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -591,20 +591,27 @@ a.current-header-link { /* Home page specific styles moved from inline MDX */ .home-hero { padding: 2.5rem 0 1rem; - text-align: center; + text-align: left; } .hero-inner { max-width: 60rem; margin: 0 auto; } .hero-inner h1 { - font-size: clamp(2.2rem, 4.5vw, 3.2rem); - margin: 0 0 0.75rem; - letter-spacing: -0.02em; + font-size: clamp(var(--text-4xl), 4.5vw, 2.5rem); + margin: 0; + font-weight: 500; + letter-spacing: -0.03em; +} +.home-hero .content-title { + margin-bottom: 0; +} +#home .home-hero .tagline { + margin-top: 0.65rem; } .tagline { - font-size: 1.15rem; - margin: 0 auto 1.25rem; + font-size: var(--text-lg); + margin: 0 0 2rem; max-width: 46rem; font-weight: 400; } @@ -807,41 +814,46 @@ pre { } .content-title { - font-family: var(--font-brand); - font-size: 2rem; - font-weight: 700; + font-size: var(--text-4xl); + font-weight: 500; line-height: 1.2; - margin-bottom: 0.5em; + letter-spacing: -0.025em; + margin-bottom: 0.25em; } .content-subtitle { - font-family: var(--font-brand); - font-size: 1.1rem; + font-size: var(--text-lg); font-weight: 400; - line-height: 1.4; + line-height: 1.5; + text-wrap: balance; } -.main-content h2 { - font-family: var(--font-body); - font-weight: 600; - font-size: 1.5rem; - letter-spacing: 0; +#main-content .content-subtitle { + font-size: var(--text-lg); + color: var(--theme-text-lighter); } -.main-content h3 { - font-family: var(--font-body); - font-weight: 600; - font-size: 1.25rem; - letter-spacing: 0; +#main-content h2 { + font-weight: 500; + font-size: var(--text-2xl); + letter-spacing: -0.025em; } -.main-content h4, -.main-content h5, -.main-content h6 { - font-family: var(--font-body); - font-weight: 600; - font-size: 1rem; - letter-spacing: 0; +#main-content h3 { + font-weight: 500; + font-size: var(--text-xl); + letter-spacing: -0.01em; +} + +#main-content h4 { + font-weight: 500; + font-size: var(--text-lg); +} + +#main-content h5, +#main-content h6 { + font-weight: 500; + font-size: var(--text-base); } header .nav-wrapper { @@ -882,13 +894,13 @@ article.content { } .home-metric-value { - font-size: 1.5rem; - font-weight: bold; + font-size: var(--text-2xl); + font-weight: 500; color: var(--theme-accent); } .home-metric-label { - font-size: 0.9rem; + font-size: var(--text-sm); color: var(--theme-text-light); } @@ -914,21 +926,21 @@ article.content { } .home-problem-title { - font-size: 1.1rem; + font-size: var(--text-lg); font-weight: 600; color: var(--theme-text); margin-bottom: 0.5rem; } .home-problem-desc { - font-size: 0.9rem; + font-size: var(--text-sm); color: var(--theme-text-light); margin-bottom: 1rem; line-height: 1.5; } .home-problem-cta { - font-size: 0.875rem; + font-size: var(--text-sm); font-weight: 600; color: var(--theme-accent); } @@ -936,9 +948,12 @@ article.content { /* Home page: Get started buttons */ .home-get-started { display: flex; - flex-wrap: wrap; gap: 0.75rem; - margin: 1rem 0 2rem 0; + margin-bottom: 2rem; +} +.home-get-started .button { + flex: 1; + justify-content: center; } /* Home page: Discovery callout */ @@ -956,21 +971,22 @@ article.content { } .home-discovery-title { - font-size: 1.1rem; + font-size: var(--text-lg); font-weight: 600; color: white; margin-bottom: 0.25rem; } .home-discovery-desc { - font-size: 0.9rem; + font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); } /* Home page: Section title */ .home-title { - font-size: 1.5rem; - font-weight: 700; + font-size: var(--text-2xl); + font-weight: 500; + letter-spacing: -0.025em; margin-top: 2rem; margin-bottom: 1rem; } diff --git a/src/styles/theme.css b/src/styles/theme.css index f8630342ad..d6e63e916d 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -54,16 +54,25 @@ */ :root, ::backdrop { - --font-brand: "Poppins"; --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --font-body: "Inter", sans-serif, var(--font-fallback); + --font-body: "Inter", var(--font-fallback); --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; + /* Typescale — Major Third (1.25) */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2rem; + /* Variables with --color-base prefix define the hue, and saturation values to be used for From 4f8e9c40b49a7aa38010dcb0c2f8dd1e3fcfce7a Mon Sep 17 00:00:00 2001 From: Frank Lagendijk Date: Wed, 8 Apr 2026 11:39:38 +0200 Subject: [PATCH 2/2] fix: wrap tagline to comply with max line length lint rule Co-Authored-By: Claude Opus 4.6 (1M context) Change-Id: I2dc637d72bd37c5d344066f60c83d5d587be9889 Claude-Session-Id: 9d1c27ca-cd0a-4521-bfce-3e9f58e620dc --- src/content/docs/index.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 12681bdfe7..c067e1134c 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -15,7 +15,10 @@ import Button from '~/components/Button.astro';

Ship Code Faster, Break Less

-
Mergify eliminates broken builds, tames flaky tests, and cuts CI waste—so your team ships with confidence.
+
+ Mergify eliminates broken builds, tames flaky tests, and + cuts CI waste—so your team ships with confidence. +