Mercurial

diff mrjunejune/src/offline.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 a6d8d32a0261
children
line wrap: on
line diff
--- a/mrjunejune/src/offline.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/offline.html	Wed Aug 05 05:25:40 2026 -0700
@@ -3,6 +3,13 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/public/design-system/styles/tokens.css">
+    <link rel="stylesheet" href="/public/design-system/styles/themes.css">
+    <link rel="stylesheet" href="/public/design-system/styles/components.css">
+    <script
+      type="module"
+      src="/public/design-system/components/index.js"
+    ></script>
     <title>Offline - MrJuneJune</title>
     <style>
       body {
@@ -13,30 +20,34 @@
         justify-content: center;
         min-height: 100vh;
         margin: 0;
-        padding: 20px;
+        padding: var(--zenbu-sys-padding-lg);
         background: linear-gradient(135deg, #544e43 0%, #3a3630 100%);
         color: white;
         text-align: center;
       }
 
       h1 {
-        font-size: 3em;
+        font-size: var(--zenbu-sys-font-size-3xl);
         margin: 0 0 0.5em 0;
       }
 
       p {
-        font-size: 1.2em;
+        font-size: var(--zenbu-sys-font-size-lg);
+        line-height: var(--zenbu-sys-line-height-lg);
         margin: 0 0 2em 0;
         opacity: 0.9;
       }
 
       button {
-        padding: 12px 32px;
-        font-size: 1em;
+        min-height: var(--zenbu-control-height);
+        padding:
+          var(--zenbu-control-padding-block)
+          var(--zenbu-control-padding-inline);
+        font-size: var(--zenbu-control-font-size);
         background: white;
         color: #544e43;
         border: none;
-        border-radius: 8px;
+        border-radius: var(--zenbu-sys-radius-control);
         cursor: pointer;
         font-weight: bold;
         transition: transform 0.2s;
@@ -53,9 +64,13 @@
     </style>
   </head>
   <body>
-    <div class="icon">📡</div>
+    <div class="icon">
+      <zen-icon name="offline" label="Offline"></zen-icon>
+    </div>
     <h1>You're Offline</h1>
     <p>It looks like you've lost your internet connection.<br>Don't worry, some cached pages might still work!</p>
-    <button onclick="window.location.reload()">Try Again</button>
+    <zen-button appearance="plain" size="lg">
+      <button onclick="window.location.reload()">Try Again</button>
+    </zen-button>
   </body>
 </html>