From 0460991bacdcd9671ef8482052cb6b421caad637 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 04:55:09 +0000
Subject: [PATCH] fix(site): stop the hero buttons stacking flush on a phone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two calls to action were inline-blocks in a paragraph, so nothing
separated them. On a viewport too narrow to hold both on one line they
wrapped into a column with a measured gap of exactly 0px, and since
each is only as wide as its own label — 212px against 252px — and the
hero style squares off their corners, the pair read as one broken box
rather than two buttons.

The row is now a centred flex container with a gap, and once it stacks
the buttons share a width, because a column of two different widths
still looks like a mistake.

Measured in Chromium against the built site, before and after:

    390px  before  stacked, gap 0px,  widths 212/252
    390px  after   stacked, gap 16px, widths 336/336
    1280px after   side by side, gap 16px, widths unchanged

Checked at 320, 360, 390, 430, 500, 560, 768 and 1280px: the switch
happens at 512px, and both sides of it are deliberate. Desktop keeps
the layout it had, minus the missing gap.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018xYa7m3qup5wyN5MaXFgf6
---
 docs/overrides/home.html   |  2 +-
 docs/stylesheets/extra.css | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index b0b6e5f..8ef0f34 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -6,7 +6,7 @@ <h1 id="commit-check">Commit Check</h1>
         <p>
         Clean commits. Clear standards.
         </p>
-        <p>
+        <p class="cc-hero-actions">
             <a class="md-button md-button--primary" href="getting-started/">
                 Get started
                 <span class="twemoji">
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index bee1857..e33c3ea 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -76,6 +76,31 @@ th {
     display: inline-block;
 }
 
+/* The hero's two calls to action. As inline-blocks they carried no gap, so a
+   viewport too narrow to hold them side by side stacked them flush against
+   each other — two square-cornered boxes of different widths touching, which
+   reads as one broken element rather than two buttons. */
+.hero .cc-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.8rem;
+}
+
+/* Once stacked they are a column, and a column of two different widths still
+   looks like a mistake. Give them one width the whole way down. */
+@media screen and (max-width: 32rem) {
+    .hero .cc-hero-actions {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .hero .cc-hero-actions .md-button {
+        width: 100%;
+        max-width: 18rem;
+    }
+}
+
 .hero .md-button:hover {
     /* Was --commit-check-logo-color-green, which is not defined anywhere: the
        hover simply did nothing. */