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