Mercurial

diff mrjunejune/test/snapshots/root.snapshot @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 40fa2363fee1
children 60a876c4587a
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/root.snapshot	Tue Aug 04 15:12:18 2026 -0700
+++ b/mrjunejune/test/snapshots/root.snapshot	Tue Aug 04 16:49:01 2026 -0700
@@ -4,7 +4,10 @@
     <title> MrJuneJune </title>
     <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f7f3e8">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
+<link rel="manifest" href="/public/manifest.json">
+<link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
 
 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font"  crossorigin>
 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
@@ -17,9 +20,17 @@
 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
 
+<link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
+<link rel="stylesheet" href="/public/design-system/styles/themes.css" />
 <link rel="preload" href="/base.css" as="style" />
 <link rel="stylesheet" href="/base.css" />
+<link rel="stylesheet" href="/public/design-system/styles/components.css" />
+<script
+  type="module"
+  src="/public/design-system/components/index.js"
+></script>
 
+<script src="/public/pwa-register.js" defer></script>
 
     <style>
       .epi-photo {
@@ -47,41 +58,104 @@
           margin-bottom: 0.75em;
         }
       }
+
+      #background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      #game {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 1;
+        cursor: default;
+      }
+
+      #game.active {
+        pointer-events: auto;
+        z-index: 100;
+      }
+
+      #gameUI {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        pointer-events: auto;
+        z-index: 101;
+        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>
      <style>
   :root {
     --header-background: var(--white);
-    --header-color: rgb(var(--black));
+    --header-color: var(--black);
     --link-hover-accent: var(--awesome);
   }
 
-  /* Fixed icon in top left corner */
-  #themeToggle {
+  #themeControl {
     position: fixed;
     top: 20px;
     left: 20px;
-    background: var(--header-background);
-    display: flex;
-    align-items: center;
-    border-radius: 50%;
-    cursor: pointer;
     z-index: 1000;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease;
   }
 
-  #themeToggle:hover {
+  #themeControl:hover {
     transform: scale(1.05);
   }
 
+  #themeToggle {
+    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;
+  }
+
   /* Professional header */
   header {
     margin: auto;
     padding: 1.5em 1em;
     font-family: "More", sans-serif;
-    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    box-shadow: var(--zen-shadow-sm);
     width: 720px;
     max-width: calc(100% - 2em);
     text-align: center;
@@ -105,7 +179,7 @@
 
   /* Mobile responsiveness */
   @media (max-width: 720px) {
-    #themeToggle {
+    #themeControl {
       top: 15px;
       left: 15px;
     }
@@ -120,7 +194,7 @@
   }
 
   @media (max-width: 480px) {
-    #themeToggle {
+    #themeControl {
       top: 10px;
       left: 10px;
     }
@@ -146,20 +220,25 @@
   }
   
   /* 2. MANUAL DARK OVERRIDE */
-  html.dark {
+  html[data-zen-theme="ink"] {
     --logo-invert: invert(1);
     --epi-grayscale: grayscale(1);
   }
   
   /* 3. MANUAL LIGHT OVERRIDE */
-  html.light-mode {
+  html[data-zen-theme="paper"] {
     --logo-invert: invert(0);
     --epi-grayscale: brightness(2.9) grayscale(1);
   }
+
+  html[data-zen-theme="playful"] {
+    --logo-invert: invert(0);
+    --epi-grayscale: saturate(1.25);
+  }
   
   /* 4. SYSTEM PREFERENCE */
   @media (prefers-color-scheme: dark) {
-    :root:not(.light-mode) {
+    :root:not([data-zen-theme]) {
       --logo-invert: invert(1);
     }
   }
@@ -178,16 +257,29 @@
   }
 </style>
 
-<div id="themeToggle">
-  <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
-</div>
+<zen-button id="themeControl" variant="quiet">
+  <button
+    id="themeToggle"
+    type="button"
+    aria-label="Change site theme"
+  >
+    <img
+      id="epiChan"
+      class="epi-logo"
+      alt=""
+      src="/public/epi_all_colors.svg"
+      height="50"
+      width="50"
+    >
+    <span id="themeName" aria-live="polite">Auto</span>
+  </button>
+</zen-button>
 
 <header>
   <h1><a href="/">MrJuneJune</a></h1>
 </header>
 <script src="/index.js"></script>
 
-
      <main>
        <p>Hi, I am Juntae&mdash;usually June, and occasionally MrJuneJune because the domain name has committed me to the bit.</p>
 
@@ -200,12 +292,31 @@
        </div>
 
        <h2>Links</h2>
-       <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> 
+       <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>
+       <canvas id="background"></canvas>
+       <canvas id="game"></canvas>
+       <canvas id="gameUI"></canvas>
      </main>
      <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
   <small>&copy; 2026 June Park</small>
@@ -213,6 +324,7 @@
 
   </body>
   <script>
+    // Epi image
     let arr = Array.from({ length: 18 }, (_, i) => i+1);
     function setRandomImages() {
       const randomIndex = Math.floor(Math.random() * arr.length);
@@ -225,4 +337,5 @@
     }
     setRandomImages();
   </script>
+  <script src="/public/dog-game.js"></script>
 </html>