Mercurial
diff mrjunejune/test/snapshots/root.snapshot @ 258:60a876c4587a
[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 |
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/root.snapshot Tue Aug 04 16:49:11 2026 -0700 +++ b/mrjunejune/test/snapshots/root.snapshot Wed Aug 05 05:25:40 2026 -0700 @@ -94,27 +94,6 @@ cursor: pointer; } - .site-link-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); - gap: var(--zen-space-4); - } - - .site-link-grid > a { - color: inherit; - text-decoration: none; - } - - .site-link-grid zen-card, - .site-link-grid article { - height: 100%; - } - - .site-link-grid p { - margin: 0; - color: var(--zen-color-text-muted); - font-size: 0.9rem; - } </style> </head> <body> @@ -138,16 +117,11 @@ } #themeToggle { + display: flex; flex-direction: column; - min-width: 4.5rem; - padding: 0.35rem; - border-radius: 1.5rem; - } - - #themeName { - font-family: "More", sans-serif; - font-size: 0.65rem; - line-height: 1; + padding: 0; + border: 0; + background: transparent; } /* Professional header */ @@ -155,7 +129,6 @@ margin: auto; padding: 1.5em 1em; font-family: "More", sans-serif; - box-shadow: var(--zen-shadow-sm); width: 720px; max-width: calc(100% - 2em); text-align: center; @@ -257,7 +230,7 @@ } </style> -<zen-button id="themeControl" variant="quiet"> +<zen-button id="themeControl" appearance="plain" size="xl"> <button id="themeToggle" type="button" @@ -271,12 +244,12 @@ height="50" width="50" > - <span id="themeName" aria-live="polite">Auto</span> + <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span> </button> </zen-button> <header> - <h1><a href="/">MrJuneJune</a></h1> + <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1> </header> <script src="/index.js"></script> @@ -292,28 +265,12 @@ </div> <h2>Links</h2> - <div class="site-link-grid"> - <a href="https://zenbu.babocoder.com/file/tip"> - <zen-card interactive> - <article><h3>Repository</h3><p>Browse the code behind these experiments.</p></article> - </zen-card> - </a> - <a href="/blog"> - <zen-card interactive> - <article><h3>Blogs</h3><p>Thoughts, experiments, and technical notes.</p></article> - </zen-card> - </a> - <a href="/resume"> - <zen-card interactive> - <article><h3>Resume</h3><p>Professional experience and selected work.</p></article> - </zen-card> - </a> - <a href="/tools"> - <zen-card interactive> - <article><h3>Tools</h3><p>Small things I built for myself.</p></article> - </zen-card> - </a> - </div> + <ul> + <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li> + <li><a href="/blog">Blogs</a> - My thoughts / Experiments </li> + <li><a href="/resume">Resume</a> - My professional experiences </li> + <li><a href="/tools">Tools</a> - Things I made for myself </li> + </ul> <canvas id="background"></canvas> <canvas id="game"></canvas> <canvas id="gameUI"></canvas>