From fc6d22ba68284798b1d52575c6c8217309d2df2e Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 11:43:05 +0000 Subject: [PATCH] Keep the marked page level with the rest of the breadcrumb The current page carries a 2px line and a 1px gap under it, which made its box 3px taller than the other entries; the bar centres its entries, so the marked word sat 1.5px higher than Home and moved whenever the reader went to another page. A margin of -3px takes the line out of the height: the word stays level, only the line is added. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_014YZFmFizjMGgrfvyidBoKd --- CONVENTION.md | 4 +++- src/styles/global.css | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CONVENTION.md b/CONVENTION.md index 053ae2f..ffecd91 100644 --- a/CONVENTION.md +++ b/CONVENTION.md @@ -24,7 +24,9 @@ page says **Home**; its two sister sites say **Home / Samples** and (**Home / Samples / Learn / Basics**, **Home / Addons & Tools / sapgui**). The ancestors are muted links, the separator `/` is in the line colour, and only the last entry - the current page, not a link - is marked: the ink -colour, weight 600 and a 2px underline in the accent. The home page reaches +colour, weight 600 and a 2px underline in the accent. The underline takes +no height (`margin-bottom: -3px` against its 2px line and 1px gap): the +marked word stays level with the rest of the trail. The home page reaches the sister sites by a tile that opens in the same tab (→), not by a tab. ```html diff --git a/src/styles/global.css b/src/styles/global.css index bfdcebe..6013e3d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -68,7 +68,7 @@ img { max-width: 100%; height: auto; } .sites .sep { color: var(--line); } .sites .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; margin-right: 8px; } .sites .brand img { width: 22px; height: 22px; } -.sites [aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--brand); padding-bottom: 1px; } +.sites [aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--brand); padding-bottom: 1px; margin-bottom: -3px; /* the line takes no height: the word stays level with the trail */ } /* ---- the greeting -------------------------------------------------------- */ /* the text stands at the top of the row, where Samples, Addons and Insights