Skip to content

Commit 7a1aa13

Browse files
flagendijk89claude
flagendijk89
and
claude
committed
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) <noreply@anthropic.com> Change-Id: I09186ab200c0ea10d11302c35746c1d841e681b8 Claude-Session-Id: 9d1c27ca-cd0a-4521-bfce-3e9f58e620dc
1 parent 31c333c commit 7a1aa13

6 files changed

Lines changed: 140 additions & 58 deletions

File tree

‎src/components/Button.astro‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Icon } from 'astro-icon/components';
33
44
export interface Props {
5-
colorScheme:
5+
colorScheme?:
66
| 'whiteAlpha'
77
| 'blackAlpha'
88
| 'gray'
@@ -24,7 +24,7 @@ export interface Props {
2424
style?: string;
2525
href?: string;
2626
icon?: string;
27-
variant?: 'ghost' | 'solid';
27+
variant?: 'ghost' | 'solid' | 'primary' | 'secondary';
2828
target?: string;
2929
}
3030
const {
@@ -35,9 +35,17 @@ const {
3535
variant = 'solid',
3636
target = '_blank',
3737
} = Astro.props as Props;
38+
39+
const isPrimary = variant === 'primary';
40+
const isSecondary = variant === 'secondary';
41+
const classes = [
42+
'button',
43+
isPrimary ? 'button-primary' : isSecondary ? 'button-secondary' : `button-${colorScheme}`,
44+
isPrimary || isSecondary ? '' : variant,
45+
].filter(Boolean);
3846
---
3947

40-
<div role="presentation" class:list={['button', `button-${colorScheme}`, variant]} {style}>
48+
<div role="presentation" class:list={classes} {style}>
4149
<a href={href} target={target}>
4250
{icon && <Icon name={icon} />}
4351
<slot />
@@ -54,13 +62,65 @@ const {
5462
cursor: pointer;
5563
width: fit-content;
5664
}
57-
.button a {
65+
.button a,
66+
.button a:hover,
67+
.button a:focus-visible {
5868
display: flex;
5969
align-items: center;
6070
color: inherit;
6171
text-decoration: none;
6272
}
6373

74+
/* Primary button — matches mergify.com */
75+
.button.button-primary {
76+
background-color: #000;
77+
color: #fff;
78+
border-radius: 12px;
79+
padding: 10px 16px;
80+
font-size: 0.875rem;
81+
font-weight: 600;
82+
line-height: 20px;
83+
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
84+
85+
&:hover {
86+
background-color: #3e434c;
87+
}
88+
}
89+
90+
/* Secondary button — matches mergify.com */
91+
.button.button-secondary {
92+
background-color: rgba(255, 255, 255, 0.6);
93+
color: #000;
94+
border-radius: 12px;
95+
padding: 10px 16px;
96+
font-size: 0.875rem;
97+
font-weight: 500;
98+
line-height: 20px;
99+
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
100+
101+
&:hover {
102+
background-color: rgba(255, 255, 255, 0.8);
103+
}
104+
}
105+
106+
.theme-dark .button.button-primary {
107+
background-color: #fff;
108+
color: #000;
109+
110+
&:hover {
111+
background-color: #d1d5db;
112+
}
113+
}
114+
115+
.theme-dark .button.button-secondary {
116+
background-color: rgba(255, 255, 255, 0.1);
117+
color: #fff;
118+
119+
&:hover {
120+
background-color: rgba(255, 255, 255, 0.2);
121+
}
122+
}
123+
64124
@mixin generate-button-styles($colorSchemes) {
65125
@each $colorScheme in $colorSchemes {
66126
.button-#{$colorScheme}.solid {

‎src/components/PageContent/PageContent.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const suppressTitle = content.suppressTitle;
6969
border-style: solid;
7070
border-bottom-width: 1px;
7171
width: 100%;
72-
margin-top: 16px !important;
72+
margin-top: 28px !important;
7373
margin-bottom: 32px;
7474
}
7575

@@ -100,7 +100,7 @@ const suppressTitle = content.suppressTitle;
100100
grid-template-columns: minmax(0, 1fr) auto;
101101
gap: 0.75rem;
102102
align-items: center;
103-
margin-bottom: 0.75rem;
103+
margin-bottom: 2rem;
104104
}
105105
:global(.page-heading-bar__breadcrumbs) {
106106
min-width: 0;

‎src/content/docs/index.mdx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@ import Button from '~/components/Button.astro';
1515
<div class="home-hero">
1616
<div class="hero-inner">
1717
<h1 class="content-title">Ship Code Faster, Break Less</h1>
18-
<p class="tagline content-subtitle">
19-
Mergify eliminates broken builds, tames flaky tests, and cuts CI waste—so
20-
your team ships with confidence.
21-
</p>
18+
<div class="tagline content-subtitle">Mergify eliminates broken builds, tames flaky tests, and cuts CI waste—so your team ships with confidence.</div>
2219
</div>
2320
</div>
2421

@@ -88,9 +85,9 @@ import Button from '~/components/Button.astro';
8885
<h2 class="home-title">Get Started</h2>
8986

9087
<div class="home-get-started">
91-
<Button colorScheme="teal" href="/merge-queue/setup" target="_self">Set up Merge Queue</Button>
92-
<Button colorScheme="gray" href="/ci-insights" target="_self">Enable CI Insights</Button>
93-
<Button colorScheme="gray" href="/monorepo-ci/github-actions" target="_self">Configure Monorepo CI</Button>
88+
<Button variant="primary" href="/merge-queue/setup" target="_self">Set up Merge Queue</Button>
89+
<Button variant="primary" href="/ci-insights" target="_self">Enable CI Insights</Button>
90+
<Button variant="primary" href="/monorepo-ci/github-actions" target="_self">Configure Monorepo CI</Button>
9491
</div>
9592

9693
<a href="https://mergify.com/discovery" class="home-discovery">

‎src/content/docs/merge-queue.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ Stop wasting engineering time on merge conflicts and broken main branches.
9494
Mergify's merge queue tests every PR against the latest code before merging,
9595
while parallel execution and smart batching keep your team shipping fast.
9696

97-
<Button colorScheme="teal" href="/merge-queue/setup" target="_self">
97+
<Button variant="primary" href="/merge-queue/setup" target="_self">
9898
Get Started →
9999
</Button>
100100

‎src/styles/index.css‎

Lines changed: 58 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -591,20 +591,27 @@ a.current-header-link {
591591
/* Home page specific styles moved from inline MDX */
592592
.home-hero {
593593
padding: 2.5rem 0 1rem;
594-
text-align: center;
594+
text-align: left;
595595
}
596596
.hero-inner {
597597
max-width: 60rem;
598598
margin: 0 auto;
599599
}
600600
.hero-inner h1 {
601-
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
602-
margin: 0 0 0.75rem;
603-
letter-spacing: -0.02em;
601+
font-size: clamp(var(--text-4xl), 4.5vw, 2.5rem);
602+
margin: 0;
603+
font-weight: 500;
604+
letter-spacing: -0.03em;
605+
}
606+
.home-hero .content-title {
607+
margin-bottom: 0;
608+
}
609+
#home .home-hero .tagline {
610+
margin-top: 0.65rem;
604611
}
605612
.tagline {
606-
font-size: 1.15rem;
607-
margin: 0 auto 1.25rem;
613+
font-size: var(--text-lg);
614+
margin: 0 0 2rem;
608615
max-width: 46rem;
609616
font-weight: 400;
610617
}
@@ -807,41 +814,46 @@ pre {
807814
}
808815

809816
.content-title {
810-
font-family: var(--font-brand);
811-
font-size: 2rem;
812-
font-weight: 700;
817+
font-size: var(--text-4xl);
818+
font-weight: 500;
813819
line-height: 1.2;
814-
margin-bottom: 0.5em;
820+
letter-spacing: -0.025em;
821+
margin-bottom: 0.25em;
815822
}
816823

817824
.content-subtitle {
818-
font-family: var(--font-brand);
819-
font-size: 1.1rem;
825+
font-size: var(--text-lg);
820826
font-weight: 400;
821-
line-height: 1.4;
827+
line-height: 1.5;
828+
text-wrap: balance;
822829
}
823830

824-
.main-content h2 {
825-
font-family: var(--font-body);
826-
font-weight: 600;
827-
font-size: 1.5rem;
828-
letter-spacing: 0;
831+
#main-content .content-subtitle {
832+
font-size: var(--text-lg);
833+
color: var(--theme-text-lighter);
829834
}
830835

831-
.main-content h3 {
832-
font-family: var(--font-body);
833-
font-weight: 600;
834-
font-size: 1.25rem;
835-
letter-spacing: 0;
836+
#main-content h2 {
837+
font-weight: 500;
838+
font-size: var(--text-2xl);
839+
letter-spacing: -0.025em;
836840
}
837841

838-
.main-content h4,
839-
.main-content h5,
840-
.main-content h6 {
841-
font-family: var(--font-body);
842-
font-weight: 600;
843-
font-size: 1rem;
844-
letter-spacing: 0;
842+
#main-content h3 {
843+
font-weight: 500;
844+
font-size: var(--text-xl);
845+
letter-spacing: -0.01em;
846+
}
847+
848+
#main-content h4 {
849+
font-weight: 500;
850+
font-size: var(--text-lg);
851+
}
852+
853+
#main-content h5,
854+
#main-content h6 {
855+
font-weight: 500;
856+
font-size: var(--text-base);
845857
}
846858

847859
header .nav-wrapper {
@@ -882,13 +894,13 @@ article.content {
882894
}
883895

884896
.home-metric-value {
885-
font-size: 1.5rem;
886-
font-weight: bold;
897+
font-size: var(--text-2xl);
898+
font-weight: 500;
887899
color: var(--theme-accent);
888900
}
889901

890902
.home-metric-label {
891-
font-size: 0.9rem;
903+
font-size: var(--text-sm);
892904
color: var(--theme-text-light);
893905
}
894906

@@ -914,31 +926,34 @@ article.content {
914926
}
915927

916928
.home-problem-title {
917-
font-size: 1.1rem;
929+
font-size: var(--text-lg);
918930
font-weight: 600;
919931
color: var(--theme-text);
920932
margin-bottom: 0.5rem;
921933
}
922934

923935
.home-problem-desc {
924-
font-size: 0.9rem;
936+
font-size: var(--text-sm);
925937
color: var(--theme-text-light);
926938
margin-bottom: 1rem;
927939
line-height: 1.5;
928940
}
929941

930942
.home-problem-cta {
931-
font-size: 0.875rem;
943+
font-size: var(--text-sm);
932944
font-weight: 600;
933945
color: var(--theme-accent);
934946
}
935947

936948
/* Home page: Get started buttons */
937949
.home-get-started {
938950
display: flex;
939-
flex-wrap: wrap;
940951
gap: 0.75rem;
941-
margin: 1rem 0 2rem 0;
952+
margin-bottom: 2rem;
953+
}
954+
.home-get-started .button {
955+
flex: 1;
956+
justify-content: center;
942957
}
943958

944959
/* Home page: Discovery callout */
@@ -956,21 +971,22 @@ article.content {
956971
}
957972

958973
.home-discovery-title {
959-
font-size: 1.1rem;
974+
font-size: var(--text-lg);
960975
font-weight: 600;
961976
color: white;
962977
margin-bottom: 0.25rem;
963978
}
964979

965980
.home-discovery-desc {
966-
font-size: 0.9rem;
981+
font-size: var(--text-sm);
967982
color: rgba(255, 255, 255, 0.9);
968983
}
969984

970985
/* Home page: Section title */
971986
.home-title {
972-
font-size: 1.5rem;
973-
font-weight: 700;
987+
font-size: var(--text-2xl);
988+
font-weight: 500;
989+
letter-spacing: -0.025em;
974990
margin-top: 2rem;
975991
margin-bottom: 1rem;
976992
}

‎src/styles/theme.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,25 @@
5454
*/
5555
:root,
5656
::backdrop {
57-
--font-brand: "Poppins";
5857
--font-fallback:
5958
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
6059
Segoe UI Emoji;
61-
--font-body: "Inter", sans-serif, var(--font-fallback);
60+
--font-body: "Inter", var(--font-fallback);
6261
--font-mono:
6362
"IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
6463
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
6564
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
6665

66+
/* Typescale — Major Third (1.25) */
67+
--text-xs: 0.75rem;
68+
--text-sm: 0.875rem;
69+
--text-base: 1rem;
70+
--text-lg: 1.125rem;
71+
--text-xl: 1.25rem;
72+
--text-2xl: 1.5rem;
73+
--text-3xl: 1.875rem;
74+
--text-4xl: 2rem;
75+
6776
/*
6877
Variables with --color-base prefix define
6978
the hue, and saturation values to be used for

0 commit comments

Comments
 (0)