From 1d0af381f9bd76b9af29d9f6966fde0905c0c525 Mon Sep 17 00:00:00 2001 From: axisrow Date: Thu, 13 Aug 2026 14:20:13 +0700 Subject: [PATCH 1/5] fix: restore icon-style theme toggle and GitHub topbar buttons The theme select and GitHub link had regressed to wide text pills after the theme-select rework. Restore compact circular icon buttons for both: the theme select now shows a sun/moon/monitor icon matching the current mode (system/light/dark) with the native - GitHub ↗ + + + diff --git a/styles.css b/styles.css index d55ba8c..f39d900 100644 --- a/styles.css +++ b/styles.css @@ -225,10 +225,6 @@ a { display: none; } -.topbar-link { - padding: 0 13px; -} - .icon-button:hover, .topbar-link:hover { border-color: var(--line-strong); @@ -249,34 +245,58 @@ a { } .theme-select-label { + position: relative; + display: inline-flex; + padding: 0; + overflow: hidden; +} + +.theme-select-icon { display: inline-flex; + align-items: center; + justify-content: center; + pointer-events: none; +} + +.theme-icon { + display: none; + width: 18px; + height: 18px; +} + +html[data-theme-choice="system"] .theme-icon-system, +html:not([data-theme-choice]) .theme-icon-system { + display: block; +} + +html[data-theme-choice="light"] .theme-icon-light { + display: block; +} + +html[data-theme-choice="dark"] .theme-icon-dark { + display: block; } .theme-select { - height: 38px; - padding: 0 28px 0 12px; - border: 1px solid var(--line); - border-radius: 10px; - background-color: var(--page-soft); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 10px center; - color: var(--ink); - font: 500 12px/1 "IBM Plex Mono", monospace; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + padding: 0; + border: 0; + background: transparent; + color: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; - transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; } -.theme-select:hover { - border-color: var(--line-strong); - background-color: var(--surface-raised); - transform: translateY(-1px); +.theme-select:focus-visible { + outline: none; } -.theme-select:focus-visible { +.theme-select-label:has(.theme-select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } @@ -1675,10 +1695,6 @@ main { vertical-align: middle; } - .topbar-link { - display: none; - } - .topbar-actions { grid-column: 3; } @@ -1688,10 +1704,6 @@ main { height: 44px; } - .theme-select { - height: 44px; - } - .hero { min-height: 100svh; align-items: flex-end; From 3ee2cd9bfcbcf9028297f274e9ce7112b4e4d2f7 Mon Sep 17 00:00:00 2001 From: axisrow Date: Thu, 13 Aug 2026 14:30:51 +0700 Subject: [PATCH 2/5] fix: repair mobile topbar row and restore the original theme glyph MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three follow-ups on the topbar icon work: - Mobile topbar broke onto two rows. .topbar-inner declared four columns while only three children are visible there, and .topbar-actions was left to auto-placement after .menu-toggle had already claimed column 4 — so the grid cursor had passed it and dropped the actions onto row 2. Pin brand/actions/burger to explicit row-1 columns over a 3-column track and right-align the actions. - Restore the original ◐ glyph the pre-select toggle used, replacing the three-SVG sun/moon/monitor set. - Translate the theme control back to English (Colour theme / System / Light / Dark); the page is lang="en" and everything else on it is English, but #26 introduced Russian strings here. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv --- index.html | 18 +++++++----------- styles.css | 36 ++++++++++++++---------------------- 2 files changed, 21 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 3d142fa..1cc6736 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ document.documentElement.classList.add("js"); }()); - +
@@ -61,17 +61,13 @@ Contact
-