From 6a04d75c0698aa88d1c6d63d9df2a07ea756e630 Mon Sep 17 00:00:00 2001 From: Chris Hodapp Date: Tue, 1 Sep 2026 01:32:35 -0700 Subject: [PATCH] docs: align the landing-page link with the menu bar's icons The link sat above the icons beside it. An inline-flex box with an explicit height aligns on its own baseline rather than filling the line box, so it rode high against buttons that mdBook centers with a line-height of the menu bar's height. Align the box to the top of the line box, where its full-bar height makes it fill the bar, and let the flex row center the mark against the word inside it. Trim the right padding to 2px: the next button brings its own 8px on that side, so a symmetric 8px left a visibly wider gap there than between the icons. Co-Authored-By: Claude Opus 5 (1M context) --- site/docs-brand.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/site/docs-brand.css b/site/docs-brand.css index d84adaf..b071232 100644 --- a/site/docs-brand.css +++ b/site/docs-brand.css @@ -29,22 +29,32 @@ /* The way back up to the landing page, in mdBook's sticky menu bar so it stays reachable while reading. theme/index.hbs places it. */ +/* A flex row centers the mark against the word. The box is exactly + as tall as the bar and aligns to the top of the line box, so it + fills the bar the way mdBook's own buttons do with their + line-height; without the top alignment an inline-flex box sits on + the baseline and rides high. */ .caisson-site-link { display: inline-flex; align-items: center; + vertical-align: top; gap: 0.35rem; - padding: 0 0.5rem; height: var(--menu-bar-height); + /* The sibling icons bring their own 8px of left padding, so this + side needs less to sit the same distance from the next button. */ + padding: 0 2px 0 8px; color: var(--icons); font-size: 0.9rem; font-weight: 600; + line-height: 1; text-decoration: none; + white-space: nowrap; } -.caisson-site-link:hover { color: var(--icons-hover); } - .caisson-site-link img { display: block; } +.caisson-site-link:hover { color: var(--icons-hover); } + /* On narrow screens the icon alone carries it. */ @media only screen and (max-width: 500px) { .caisson-site-link span { display: none; }