Mercurial

comparison mrjunejune/test/snapshots/tools_markdown_to_html.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
55 #themeControl:hover { 55 #themeControl:hover {
56 transform: scale(1.05); 56 transform: scale(1.05);
57 } 57 }
58 58
59 #themeToggle { 59 #themeToggle {
60 display: flex;
60 flex-direction: column; 61 flex-direction: column;
61 min-width: 4.5rem; 62 padding: 0;
62 padding: 0.35rem; 63 border: 0;
63 border-radius: 1.5rem; 64 background: transparent;
64 }
65
66 #themeName {
67 font-family: "More", sans-serif;
68 font-size: 0.65rem;
69 line-height: 1;
70 } 65 }
71 66
72 /* Professional header */ 67 /* Professional header */
73 header { 68 header {
74 margin: auto; 69 margin: auto;
75 padding: 1.5em 1em; 70 padding: 1.5em 1em;
76 font-family: "More", sans-serif; 71 font-family: "More", sans-serif;
77 box-shadow: var(--zen-shadow-sm);
78 width: 720px; 72 width: 720px;
79 max-width: calc(100% - 2em); 73 max-width: calc(100% - 2em);
80 text-align: center; 74 text-align: center;
81 } 75 }
82 76
174 filter: var(--epi-grayscale); 168 filter: var(--epi-grayscale);
175 transition: filter 0.3s ease; 169 transition: filter 0.3s ease;
176 } 170 }
177 </style> 171 </style>
178 172
179 <zen-button id="themeControl" variant="quiet"> 173 <zen-button id="themeControl" appearance="plain" size="xl">
180 <button 174 <button
181 id="themeToggle" 175 id="themeToggle"
182 type="button" 176 type="button"
183 aria-label="Change site theme" 177 aria-label="Change site theme"
184 > 178 >
188 alt="" 182 alt=""
189 src="/public/epi_all_colors.svg" 183 src="/public/epi_all_colors.svg"
190 height="50" 184 height="50"
191 width="50" 185 width="50"
192 > 186 >
193 <span id="themeName" aria-live="polite">Auto</span> 187 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
194 </button> 188 </button>
195 </zen-button> 189 </zen-button>
196 190
197 <header> 191 <header>
198 <h1><a href="/">MrJuneJune</a></h1> 192 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
199 </header> 193 </header>
200 <script src="/index.js"></script> 194 <script src="/index.js"></script>
201 195
202 <div class="header"> 196 <div class="header">
203 <h1>Markdown to HTML Converter</h1> 197 <h1>Markdown to HTML Converter</h1>
204 </div> 198 </div>
205 199
206 <div class="container"> 200 <div class="container">
207 <div class="panel"> 201 <div class="panel">
208 <div class="label">Markdown Input</div> 202 <zen-field appearance="plain" size="md">
203 <label class="label" for="input">Markdown Input</label>
209 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter 204 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
210 205
211 ## Features 206 ## Features
212 207
213 This converter supports: 208 This converter supports:
245 ### Images 240 ### Images
246 241
247 ![Alt text](https://mrjunejune.com/public/epi_favicon.svg) 242 ![Alt text](https://mrjunejune.com/public/epi_favicon.svg)
248 243
249 **Try editing this text!**</textarea> 244 **Try editing this text!**</textarea>
245 </zen-field>
250 </div> 246 </div>
251 247
252 <div class="panel"> 248 <div class="panel">
253 <div class="title"> 249 <div class="title">
254 <div class="label">HTML Output</div> 250 <div class="label">HTML Output</div>
255 <button id="copy"> Copy </button> 251 <zen-button appearance="plain" size="sm">
252 <button id="copy"> Copy </button>
253 </zen-button>
256 </div> 254 </div>
257 <div id="output"></div> 255 <div id="output"></div>
258 </div> 256 </div>
259 </div> 257 </div>
260 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 258 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">