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>