From 2848a4450c539225c0e553b575a371b83601e733 Mon Sep 17 00:00:00 2001 From: KoalaDev <6156589+Shik3i@users.noreply.github.com> Date: Mon, 6 Jul 2026 16:47:37 +0200 Subject: [PATCH] fix: guarantee the three hero CTAs stay on one line The headline column in the old narrow two-column range (769-1023px) was too tight to fit the full "Add to X" label plus two more buttons, so GitHub wrapped to a second row. The hero is now single-column below 1024px (headline gets the full width, demo stacks under it, matching the demo's own breakpoint) and two-column at >=1024px where the column is wide enough. GitHub button label shortened to "GitHub" for extra margin. Verified one row at 769/900/1024/1280 and the mobile stack at 375px. Co-Authored-By: Claude Opus 4.8 --- website/style.css | 11 ++++------- website/template.html | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/website/style.css b/website/style.css index f883057..4613736 100644 --- a/website/style.css +++ b/website/style.css @@ -384,7 +384,10 @@ html.theme-light .compat-logo { .hero-grid { display: grid; - grid-template-columns: 1.55fr 0.75fr; + /* Single column until the interactive demo appears (1024px). Below that the + headline gets the full width (the three CTAs always fit one row) and the + demo stacks underneath, matching the demo's own 1024px breakpoint. */ + grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3rem; text-align: left; @@ -2462,12 +2465,6 @@ footer a:hover { } } -@media (min-width: 769px) and (max-width: 1200px) { - .hero-grid { - grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); - } -} - @media (min-width: 769px) and (max-height: 920px) { .hero { padding-top: clamp(7.5rem, 10vh, 9rem); diff --git a/website/template.html b/website/template.html index 6954954..ab172a4 100644 --- a/website/template.html +++ b/website/template.html @@ -312,7 +312,7 @@ - GitHub Releases + GitHub

{{HERO_TRUST}}