Mercurial

comparison mrjunejune/test/snapshots/tools_latex_editor.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
54 #themeControl:hover { 54 #themeControl:hover {
55 transform: scale(1.05); 55 transform: scale(1.05);
56 } 56 }
57 57
58 #themeToggle { 58 #themeToggle {
59 display: flex;
59 flex-direction: column; 60 flex-direction: column;
60 min-width: 4.5rem; 61 padding: 0;
61 padding: 0.35rem; 62 border: 0;
62 border-radius: 1.5rem; 63 background: transparent;
63 }
64
65 #themeName {
66 font-family: "More", sans-serif;
67 font-size: 0.65rem;
68 line-height: 1;
69 } 64 }
70 65
71 /* Professional header */ 66 /* Professional header */
72 header { 67 header {
73 margin: auto; 68 margin: auto;
74 padding: 1.5em 1em; 69 padding: 1.5em 1em;
75 font-family: "More", sans-serif; 70 font-family: "More", sans-serif;
76 box-shadow: var(--zen-shadow-sm);
77 width: 720px; 71 width: 720px;
78 max-width: calc(100% - 2em); 72 max-width: calc(100% - 2em);
79 text-align: center; 73 text-align: center;
80 } 74 }
81 75
173 filter: var(--epi-grayscale); 167 filter: var(--epi-grayscale);
174 transition: filter 0.3s ease; 168 transition: filter 0.3s ease;
175 } 169 }
176 </style> 170 </style>
177 171
178 <zen-button id="themeControl" variant="quiet"> 172 <zen-button id="themeControl" appearance="plain" size="xl">
179 <button 173 <button
180 id="themeToggle" 174 id="themeToggle"
181 type="button" 175 type="button"
182 aria-label="Change site theme" 176 aria-label="Change site theme"
183 > 177 >
187 alt="" 181 alt=""
188 src="/public/epi_all_colors.svg" 182 src="/public/epi_all_colors.svg"
189 height="50" 183 height="50"
190 width="50" 184 width="50"
191 > 185 >
192 <span id="themeName" aria-live="polite">Auto</span> 186 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
193 </button> 187 </button>
194 </zen-button> 188 </zen-button>
195 189
196 <header> 190 <header>
197 <h1><a href="/">MrJuneJune</a></h1> 191 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
198 </header> 192 </header>
199 <script src="/index.js"></script> 193 <script src="/index.js"></script>
200 194
201 <main class="latex-page"> 195 <main class="latex-page">
202 <div class="latex-heading"> 196 <div class="latex-heading">
203 <div> 197 <div>
204 <h1>Online LaTeX Editor</h1> 198 <h1>Online LaTeX Editor</h1>
205 <p>Write LaTeX here. My server compiles it inside a locked-down sandbox and sends the PDF back to this preview.</p> 199 <p>Write LaTeX here. My server compiles it inside a locked-down sandbox and sends the PDF back to this preview.</p>
206 </div> 200 </div>
207 <div class="latex-actions"> 201 <div class="latex-actions">
208 <label class="auto-compile"> 202 <zen-checkbox appearance="plain" size="sm">
209 <input id="autoCompile" type="checkbox" checked /> 203 <label class="auto-compile">
210 Auto compile 204 <input id="autoCompile" type="checkbox" checked />
211 </label> 205 Auto compile
212 <button id="resetButton" type="button" class="secondary">Reset</button> 206 </label>
213 <button id="compileButton" type="button">Compile PDF</button> 207 </zen-checkbox>
214 <a id="downloadButton" class="button-link disabled" aria-disabled="true">Download</a> 208 <zen-button appearance="plain" size="md">
209 <button id="resetButton" type="button" class="secondary">Reset</button>
210 </zen-button>
211 <zen-button appearance="plain" size="md">
212 <button id="compileButton" type="button">Compile PDF</button>
213 </zen-button>
214 <zen-button appearance="plain" size="md">
215 <a id="downloadButton" class="button-link disabled" aria-disabled="true">Download</a>
216 </zen-button>
215 </div> 217 </div>
216 </div> 218 </div>
217 219
218 <p id="latexStatus" class="latex-status" role="status" aria-live="polite"> 220 <p id="latexStatus" class="latex-status" role="status" aria-live="polite">
219 Preparing your first PDF... 221 Preparing your first PDF...
223 <section class="latex-panel editor-panel" aria-labelledby="sourceHeading"> 225 <section class="latex-panel editor-panel" aria-labelledby="sourceHeading">
224 <div class="panel-heading"> 226 <div class="panel-heading">
225 <h2 id="sourceHeading">document.tex</h2> 227 <h2 id="sourceHeading">document.tex</h2>
226 <span id="sourceSize">0 / 65,536 bytes</span> 228 <span id="sourceSize">0 / 65,536 bytes</span>
227 </div> 229 </div>
228 <textarea id="latexSource" spellcheck="false" autocomplete="off" aria-label="LaTeX source" placeholder="Type your LaTeX document here...">\documentclass[11pt]{article} 230 <zen-textarea appearance="plain" size="md">
231 <textarea id="latexSource" spellcheck="false" autocomplete="off" aria-label="LaTeX source" placeholder="Type your LaTeX document here...">\documentclass[11pt]{article}
229 \usepackage[margin=1in]{geometry} 232 \usepackage[margin=1in]{geometry}
230 \usepackage{amsmath} 233 \usepackage{amsmath}
231 \usepackage{xcolor} 234 \usepackage{xcolor}
232 235
233 \title{Hello from my server} 236 \title{Hello from my server}
245 248
246 \textcolor{blue}{Edit this document and watch the preview update.} 249 \textcolor{blue}{Edit this document and watch the preview update.}
247 250
248 \end{document} 251 \end{document}
249 </textarea> 252 </textarea>
253 </zen-textarea>
250 </section> 254 </section>
251 255
252 <section class="latex-panel preview-panel" aria-labelledby="previewHeading"> 256 <section class="latex-panel preview-panel" aria-labelledby="previewHeading">
253 <div class="panel-heading"> 257 <div class="panel-heading">
254 <h2 id="previewHeading">PDF preview</h2> 258 <h2 id="previewHeading">PDF preview</h2>