From 4dfb672f740e42ea930e850f15c70bd964e9a389 Mon Sep 17 00:00:00 2001 From: teahubxyz Date: Tue, 20 Oct 2026 03:28:23 +0000 Subject: [PATCH] Havre: on a phone the three tabs sit on one line, smaller and without the slashes Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01VAvUH72XsdCitHdh3t7mjr --- ventures/havre/style.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ventures/havre/style.css b/ventures/havre/style.css index f389082..61d6b77 100644 --- a/ventures/havre/style.css +++ b/ventures/havre/style.css @@ -511,7 +511,11 @@ p.note { padding: 8px 10px; border: 1px solid var(--ink); background: var(--hi); .keybar { gap: 8px 10px; } .keybar input:not([type=checkbox]) { flex: 1 1 100%; } .keyfine, .keystatus { margin-left: 0; } - .sechead h2, .lefthead [role=tab], .lefthead .sep { font-size: 28px; } + .sechead h2 { font-size: 28px; } + /* the three tabs on one line: smaller, no slashes between them */ + .lefthead [role=tablist] { flex-wrap: nowrap; gap: 0 18px; } + .lefthead [role=tab] { font-size: 21px; white-space: nowrap; } + .lefthead .sep { display: none; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid > li:nth-child(2n) { border-right: 0; } .line { grid-template-columns: minmax(0, 1fr); gap: 0; } @@ -537,7 +541,8 @@ p.note { padding: 8px 10px; border: 1px solid var(--ink); background: var(--hi); } /* a small phone (an iPhone SE is 375px wide): the left column's tabs a little smaller, so a count of what's new fits */ @media (max-width: 400px) { - .lefthead [role=tab], .lefthead .sep { font-size: 24px; } + .lefthead [role=tablist] { gap: 0 14px; } + .lefthead [role=tab] { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; }