Mercurial

comparison mrjunejune/test/snapshots/talk.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
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
32 ></script> 32 ></script>
33 33
34 <script src="/public/pwa-register.js" defer></script> 34 <script src="/public/pwa-register.js" defer></script>
35 35
36 <style> 36 <style>
37 body { font-family: sans-serif; padding: 20px; } 37 body { font-family: sans-serif; padding: var(--zenbu-sys-padding-lg); }
38 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; } 38 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: var(--zenbu-sys-space-control); padding: var(--zenbu-sys-padding-md); }
39 #chat { display: flex; gap: 10px; } 39 #chat { display: flex; gap: 10px; }
40 input { flex-grow: 1; } 40 input { flex-grow: 1; }
41 </style> 41 </style>
42 </head> 42 </head>
43 <body> 43 <body>
59 #themeControl:hover { 59 #themeControl:hover {
60 transform: scale(1.05); 60 transform: scale(1.05);
61 } 61 }
62 62
63 #themeToggle { 63 #themeToggle {
64 display: flex;
64 flex-direction: column; 65 flex-direction: column;
65 min-width: 4.5rem; 66 padding: 0;
66 padding: 0.35rem; 67 border: 0;
67 border-radius: 1.5rem; 68 background: transparent;
68 }
69
70 #themeName {
71 font-family: "More", sans-serif;
72 font-size: 0.65rem;
73 line-height: 1;
74 } 69 }
75 70
76 /* Professional header */ 71 /* Professional header */
77 header { 72 header {
78 margin: auto; 73 margin: auto;
79 padding: 1.5em 1em; 74 padding: 1.5em 1em;
80 font-family: "More", sans-serif; 75 font-family: "More", sans-serif;
81 box-shadow: var(--zen-shadow-sm);
82 width: 720px; 76 width: 720px;
83 max-width: calc(100% - 2em); 77 max-width: calc(100% - 2em);
84 text-align: center; 78 text-align: center;
85 } 79 }
86 80
178 filter: var(--epi-grayscale); 172 filter: var(--epi-grayscale);
179 transition: filter 0.3s ease; 173 transition: filter 0.3s ease;
180 } 174 }
181 </style> 175 </style>
182 176
183 <zen-button id="themeControl" variant="quiet"> 177 <zen-button id="themeControl" appearance="plain" size="xl">
184 <button 178 <button
185 id="themeToggle" 179 id="themeToggle"
186 type="button" 180 type="button"
187 aria-label="Change site theme" 181 aria-label="Change site theme"
188 > 182 >
192 alt="" 186 alt=""
193 src="/public/epi_all_colors.svg" 187 src="/public/epi_all_colors.svg"
194 height="50" 188 height="50"
195 width="50" 189 width="50"
196 > 190 >
197 <span id="themeName" aria-live="polite">Auto</span> 191 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
198 </button> 192 </button>
199 </zen-button> 193 </zen-button>
200 194
201 <header> 195 <header>
202 <h1><a href="/">MrJuneJune</a></h1> 196 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
203 </header> 197 </header>
204 <script src="/index.js"></script> 198 <script src="/index.js"></script>
205 199
206 <main> 200 <main>
207 <h1>Talk with strangers xDDD</h1> 201 <h1>Talk with strangers xDDD</h1>
208 202
209 <div id="messages"></div> 203 <div id="messages"></div>
210 204
211 <div id="chat"> 205 <div id="chat">
212 <input type="text" id="messageInput" placeholder="Type a message..."> 206 <zen-input appearance="plain" size="md">
213 <button id="sendBtn">Send</button> 207 <input type="text" id="messageInput" placeholder="Type a message...">
208 </zen-input>
209 <zen-button appearance="plain" size="md">
210 <button id="sendBtn">Send</button>
211 </zen-button>
214 </div> 212 </div>
215 </main> 213 </main>
216 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 214 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
217 <small>&copy; 2026 June Park</small> 215 <small>&copy; 2026 June Park</small>
218 </div> 216 </div>