Mercurial

comparison mrjunejune/src/parts/header.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
16 #themeControl:hover { 16 #themeControl:hover {
17 transform: scale(1.05); 17 transform: scale(1.05);
18 } 18 }
19 19
20 #themeToggle { 20 #themeToggle {
21 display: flex;
21 flex-direction: column; 22 flex-direction: column;
22 min-width: 4.5rem; 23 padding: 0;
23 padding: 0.35rem; 24 border: 0;
24 border-radius: 1.5rem; 25 background: transparent;
25 }
26
27 #themeName {
28 font-family: "More", sans-serif;
29 font-size: 0.65rem;
30 line-height: 1;
31 } 26 }
32 27
33 /* Professional header */ 28 /* Professional header */
34 header { 29 header {
35 margin: auto; 30 margin: auto;
36 padding: 1.5em 1em; 31 padding: 1.5em 1em;
37 font-family: "More", sans-serif; 32 font-family: "More", sans-serif;
38 box-shadow: var(--zen-shadow-sm);
39 width: 720px; 33 width: 720px;
40 max-width: calc(100% - 2em); 34 max-width: calc(100% - 2em);
41 text-align: center; 35 text-align: center;
42 } 36 }
43 37
135 filter: var(--epi-grayscale); 129 filter: var(--epi-grayscale);
136 transition: filter 0.3s ease; 130 transition: filter 0.3s ease;
137 } 131 }
138 </style> 132 </style>
139 133
140 <zen-button id="themeControl" variant="quiet"> 134 <zen-button id="themeControl" appearance="plain" size="xl">
141 <button 135 <button
142 id="themeToggle" 136 id="themeToggle"
143 type="button" 137 type="button"
144 aria-label="Change site theme" 138 aria-label="Change site theme"
145 > 139 >
149 alt="" 143 alt=""
150 src="/public/epi_all_colors.svg" 144 src="/public/epi_all_colors.svg"
151 height="50" 145 height="50"
152 width="50" 146 width="50"
153 > 147 >
154 <span id="themeName" aria-live="polite">Auto</span> 148 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
155 </button> 149 </button>
156 </zen-button> 150 </zen-button>
157 151
158 <header> 152 <header>
159 <h1><a href="/">MrJuneJune</a></h1> 153 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
160 </header> 154 </header>
161 <script src="/index.js"></script> 155 <script src="/index.js"></script>