Mercurial

comparison mrjunejune/test/snapshots/root.snapshot @ 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 1f9877b637e9
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
92 pointer-events: auto; 92 pointer-events: auto;
93 z-index: 101; 93 z-index: 101;
94 cursor: pointer; 94 cursor: pointer;
95 } 95 }
96 96
97 .site-link-grid {
98 display: grid;
99 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
100 gap: var(--zen-space-4);
101 }
102
103 .site-link-grid > a {
104 color: inherit;
105 text-decoration: none;
106 }
107
108 .site-link-grid zen-card,
109 .site-link-grid article {
110 height: 100%;
111 }
112
113 .site-link-grid p {
114 margin: 0;
115 color: var(--zen-color-text-muted);
116 font-size: 0.9rem;
117 }
118 </style> 97 </style>
119 </head> 98 </head>
120 <body> 99 <body>
121 <style> 100 <style>
122 :root { 101 :root {
136 #themeControl:hover { 115 #themeControl:hover {
137 transform: scale(1.05); 116 transform: scale(1.05);
138 } 117 }
139 118
140 #themeToggle { 119 #themeToggle {
120 display: flex;
141 flex-direction: column; 121 flex-direction: column;
142 min-width: 4.5rem; 122 padding: 0;
143 padding: 0.35rem; 123 border: 0;
144 border-radius: 1.5rem; 124 background: transparent;
145 }
146
147 #themeName {
148 font-family: "More", sans-serif;
149 font-size: 0.65rem;
150 line-height: 1;
151 } 125 }
152 126
153 /* Professional header */ 127 /* Professional header */
154 header { 128 header {
155 margin: auto; 129 margin: auto;
156 padding: 1.5em 1em; 130 padding: 1.5em 1em;
157 font-family: "More", sans-serif; 131 font-family: "More", sans-serif;
158 box-shadow: var(--zen-shadow-sm);
159 width: 720px; 132 width: 720px;
160 max-width: calc(100% - 2em); 133 max-width: calc(100% - 2em);
161 text-align: center; 134 text-align: center;
162 } 135 }
163 136
255 filter: var(--epi-grayscale); 228 filter: var(--epi-grayscale);
256 transition: filter 0.3s ease; 229 transition: filter 0.3s ease;
257 } 230 }
258 </style> 231 </style>
259 232
260 <zen-button id="themeControl" variant="quiet"> 233 <zen-button id="themeControl" appearance="plain" size="xl">
261 <button 234 <button
262 id="themeToggle" 235 id="themeToggle"
263 type="button" 236 type="button"
264 aria-label="Change site theme" 237 aria-label="Change site theme"
265 > 238 >
269 alt="" 242 alt=""
270 src="/public/epi_all_colors.svg" 243 src="/public/epi_all_colors.svg"
271 height="50" 244 height="50"
272 width="50" 245 width="50"
273 > 246 >
274 <span id="themeName" aria-live="polite">Auto</span> 247 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
275 </button> 248 </button>
276 </zen-button> 249 </zen-button>
277 250
278 <header> 251 <header>
279 <h1><a href="/">MrJuneJune</a></h1> 252 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
280 </header> 253 </header>
281 <script src="/index.js"></script> 254 <script src="/index.js"></script>
282 255
283 <main> 256 <main>
284 <p>Hi, I am Juntae&mdash;usually June, and occasionally MrJuneJune because the domain name has committed me to the bit.</p> 257 <p>Hi, I am Juntae&mdash;usually June, and occasionally MrJuneJune because the domain name has committed me to the bit.</p>
290 <div class="epi-photo"> 263 <div class="epi-photo">
291 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" /> 264 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
292 </div> 265 </div>
293 266
294 <h2>Links</h2> 267 <h2>Links</h2>
295 <div class="site-link-grid"> 268 <ul>
296 <a href="https://zenbu.babocoder.com/file/tip"> 269 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li>
297 <zen-card interactive> 270 <li><a href="/blog">Blogs</a> - My thoughts / Experiments </li>
298 <article><h3>Repository</h3><p>Browse the code behind these experiments.</p></article> 271 <li><a href="/resume">Resume</a> - My professional experiences </li>
299 </zen-card> 272 <li><a href="/tools">Tools</a> - Things I made for myself </li>
300 </a> 273 </ul>
301 <a href="/blog">
302 <zen-card interactive>
303 <article><h3>Blogs</h3><p>Thoughts, experiments, and technical notes.</p></article>
304 </zen-card>
305 </a>
306 <a href="/resume">
307 <zen-card interactive>
308 <article><h3>Resume</h3><p>Professional experience and selected work.</p></article>
309 </zen-card>
310 </a>
311 <a href="/tools">
312 <zen-card interactive>
313 <article><h3>Tools</h3><p>Small things I built for myself.</p></article>
314 </zen-card>
315 </a>
316 </div>
317 <canvas id="background"></canvas> 274 <canvas id="background"></canvas>
318 <canvas id="game"></canvas> 275 <canvas id="game"></canvas>
319 <canvas id="gameUI"></canvas> 276 <canvas id="gameUI"></canvas>
320 </main> 277 </main>
321 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 278 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">