Mercurial

comparison mrjunejune/src/base.css @ 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
97 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%); 97 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
98 } 98 }
99 } 99 }
100 100
101 :root { 101 :root {
102 --zen-font-editorial: "More Thin", "Roboto", sans-serif; 102 --zenbu-font-editorial: "More Thin", "Roboto", sans-serif;
103 --zen-font-playful: "More", "More Thin", sans-serif; 103 --zenbu-font-playful: "More", "More Thin", sans-serif;
104 --zen-font-sans: var(--zen-font-editorial); 104 --zenbu-sys-font-family-ui: var(--zenbu-font-editorial);
105 --zenbu-sys-font-family-content: var(--zenbu-font-editorial);
105 } 106 }
106 107
107 :root:not([data-zen-theme]), 108 :root:not([data-zen-theme]),
108 :root[data-zen-theme] { 109 :root[data-zen-theme] {
109 --white: var(--zen-color-surface); 110 --white: var(--zenbu-sys-color-surface-default);
110 --black: var(--zen-color-text); 111 --black: var(--zenbu-sys-color-text-primary);
111 --darkgray: var(--zen-color-border-strong); 112 --darkgray: var(--zenbu-sys-color-border-strong);
112 --lightgray: var(--zen-color-border-muted); 113 --lightgray: var(--zenbu-sys-color-border-subtle);
113 --gray-light: var(--zen-color-border-muted); 114 --gray-light: var(--zenbu-sys-color-border-subtle);
114 --green: var(--zen-color-success); 115 --green: var(--zenbu-sys-color-success-foreground);
115 --orange: var(--zen-color-warning); 116 --orange: var(--zenbu-sys-color-action-primary-background-hover);
116 --purple: var(--zen-color-violet-400); 117 --purple: var(--zenbu-sys-color-action-primary-background);
117 --red: var(--zen-color-danger); 118 --red: var(--zenbu-sys-color-danger-foreground);
118 --blue: var(--zen-color-info); 119 --blue: var(--zenbu-sys-color-info-foreground);
119 --darktext: var(--zen-color-text-muted); 120 --darktext: var(--zenbu-sys-color-text-secondary);
120 --text: var(--zen-color-text); 121 --text: var(--zenbu-sys-color-text-primary);
121 --graytext: var(--zen-color-text-muted); 122 --graytext: var(--zenbu-sys-color-text-secondary);
122 --lighttext: var(--zen-color-text-subtle); 123 --lighttext: var(--zenbu-sys-color-text-tertiary);
123 --awesome: var(--zen-color-persimmon); 124 --awesome: var(--zenbu-sys-color-action-danger-background);
124 --accent: var(--zen-color-info); 125 --accent: var(--zenbu-sys-color-text-link);
125 --accent-dark: var(--zen-color-indigo); 126 --accent-dark: var(--zenbu-sys-color-action-primary-background-pressed);
126 --gray-dark: var(--zen-color-text); 127 --gray-dark: var(--zenbu-sys-color-text-primary);
127 --gray-gradient: linear-gradient( 128 --gray-gradient: linear-gradient(
128 var(--zen-color-canvas), 129 var(--zenbu-sys-color-surface-page),
129 var(--zen-color-surface) 130 var(--zenbu-sys-color-surface-default)
130 ); 131 );
131 --box-shadow: var(--zen-shadow-md); 132 --box-shadow: var(--zenbu-sys-shadow-raised);
132 } 133 }
133 134
134 /* --- fonts --- */ 135 /* --- fonts --- */
135 /* 136 /*
136 @font-face { 137 @font-face {
163 src: url("/public/fonts/more-sugar.regular.otf"); 164 src: url("/public/fonts/more-sugar.regular.otf");
164 } 165 }
165 166
166 /* -- HTML Tags only --*/ 167 /* -- HTML Tags only --*/
167 html { 168 html {
169 min-height: 100%;
168 background: var(--white); 170 background: var(--white);
169 } 171 }
170 172
171 a { 173 a {
172 color: inherit; /* blue colors for links too */ 174 color: inherit; /* blue colors for links too */
173 text-decoration: inherit; /* no underline */ 175 text-decoration: inherit; /* no underline */
174 } 176 }
175 177
176 body { 178 body {
177 font-family: var(--zen-font-sans, "More Thin", sans-serif); 179 min-height: 100vh;
180 font-family: var(--zenbu-sys-font-family-content);
178 margin: 0; 181 margin: 0;
179 padding: 0; 182 padding: 0;
180 text-align: left; 183 text-align: left;
181 background: var(--gray-gradient); 184 background: var(--gray-gradient);
182 background-size: 100% 600px; 185 background-attachment: fixed;
186 background-repeat: no-repeat;
187 background-size: cover;
183 word-wrap: break-word; 188 word-wrap: break-word;
184 overflow-wrap: break-word; 189 overflow-wrap: break-word;
185 color: var(--gray-dark); 190 color: var(--gray-dark);
186 font-size: 20px; 191 font-size: var(--zenbu-sys-font-size-xl);
187 line-height: 1.7; 192 line-height: var(--zenbu-sys-line-height-lg);
188 -webkit-font-smoothing: antialiased; 193 -webkit-font-smoothing: antialiased;
189 -moz-osx-font-smoothing: grayscale; 194 -moz-osx-font-smoothing: grayscale;
190 } 195 }
191 196
192 main { 197 main {
193 background: var(--white); 198 background: transparent;
194 width: var(--main-width); 199 width: var(--main-width);
195 max-width: calc(100% - 2em); 200 max-width: calc(100% - 2em);
196 margin: auto; 201 margin: auto;
197 } 202 }
198 203
206 color: var(--black); 211 color: var(--black);
207 line-height: 1.2; 212 line-height: 1.2;
208 } 213 }
209 214
210 h1 { 215 h1 {
211 font-size: 2.5em; 216 font-size: var(--zenbu-sys-font-size-3xl);
212 } 217 }
213 218
214 h2 { 219 h2 {
215 font-size: 2em; 220 font-size: var(--zenbu-sys-font-size-2xl);
216 } 221 }
217 222
218 h3 { 223 h3 {
219 font-size: 1.75em; 224 font-size: var(--zenbu-sys-font-size-xl);
220 } 225 }
221 226
222 h4 { 227 h4 {
223 font-size: 1.5em; 228 font-size: var(--zenbu-sys-font-size-lg);
224 } 229 }
225 230
226 h5 { 231 h5 {
227 font-size: 1.25em; 232 font-size: var(--zenbu-sys-font-size-md);
228 } 233 }
229 234
230 strong, 235 strong,
231 b { 236 b {
232 font-weight: 700; 237 font-weight: 700;
241 } 246 }
242 247
243 textarea { 248 textarea {
244 width: 100%; 249 width: 100%;
245 font-size: 16px; 250 font-size: 16px;
251 }
252
253 zen-button[appearance="plain"][size] > :where(button, a) {
254 display: inline-flex;
255 min-height: var(--zenbu-control-height);
256 align-items: center;
257 justify-content: center;
258 gap: var(--zenbu-control-gap);
259 padding:
260 var(--zenbu-control-padding-block)
261 var(--zenbu-control-padding-inline);
262 font-size: var(--zenbu-control-font-size);
263 line-height: var(--zenbu-control-line-height);
246 } 264 }
247 265
248 input { 266 input {
249 font-size: 16px; 267 font-size: 16px;
250 } 268 }
272 290
273 blockquote { 291 blockquote {
274 border-left: 4px solid var(--accent); 292 border-left: 4px solid var(--accent);
275 padding: 0 0 0 20px; 293 padding: 0 0 0 20px;
276 margin-bottom: 1.25em; 294 margin-bottom: 1.25em;
277 font-size: 1.333em; 295 font-size: var(--zenbu-sys-font-size-lg);
296 line-height: var(--zenbu-sys-line-height-lg);
278 } 297 }
279 298
280 ul { 299 ul {
281 margin-bottom: 1.25em; 300 margin-bottom: 1.25em;
282 } 301 }
293 312
294 a { 313 a {
295 text-decoration: underline; 314 text-decoration: underline;
296 } 315 }
297 316
298 a::before {
299 content: "";
300 display: inline-block;
301 width: 1em;
302 height: 1em;
303 margin-right: 8px;
304 vertical-align: middle;
305 background-color: #FF69B4;
306 -webkit-mask: url('/public/paw.svg') no-repeat center;
307 mask: url('/public/paw.svg') no-repeat center;
308 animation: pawStep 0.6s ease-out forwards;
309 }
310
311 @keyframes pawStep {
312 0% { transform: scale(0); opacity: 0; }
313 100% { transform: scale(1); opacity: 1; }
314 }
315
316 a:hover::before {
317 animation: wiggle 0.4s ease-in-out infinite;
318 }
319
320 @keyframes wiggle {
321 0%, 100% { transform: rotate(-15deg); }
322 50% { transform: rotate(15deg); }
323 }
324
325
326 /* -- mobile -- */ 317 /* -- mobile -- */
327 @media (max-width: 720px) { 318 @media (max-width: 720px) {
328 body { 319 body {
329 font-size: 18px; 320 font-size: var(--zenbu-sys-font-size-lg);
330 line-height: 1.8; 321 line-height: var(--zenbu-sys-line-height-md);
331 } 322 }
332 323
333 main { 324 main {
334 padding: 1.5em 1em; 325 padding: var(--zenbu-sys-padding-lg) var(--zenbu-sys-padding-md);
335 } 326 }
336 327
337 h1 { 328 h1 {
338 font-size: 2em; 329 font-size: var(--zenbu-sys-font-size-2xl);
339 } 330 }
340 331
341 h2 { 332 h2 {
342 font-size: 1.75em; 333 font-size: var(--zenbu-sys-font-size-xl);
343 } 334 }
344 335
345 h3 { 336 h3 {
346 font-size: 1.5em; 337 font-size: var(--zenbu-sys-font-size-lg);
347 } 338 }
348 339
349 h4 { 340 h4 {
350 font-size: 1.25em; 341 font-size: var(--zenbu-sys-font-size-md);
351 } 342 }
352 343
353 h5 { 344 h5 {
354 font-size: 1.1em; 345 font-size: var(--zenbu-sys-font-size-sm);
355 } 346 }
356 347
357 p { 348 p {
358 margin-bottom: 1.25em; 349 margin-bottom: 1.25em;
359 } 350 }
362 a { 353 a {
363 padding: 0.25em 0; 354 padding: 0.25em 0;
364 display: inline-block; 355 display: inline-block;
365 } 356 }
366 357
367 button, input[type="submit"], input[type="button"] {
368 min-height: 44px;
369 padding: 0.75em 1.5em;
370 font-size: 1em;
371 }
372
373 input, textarea, select { 358 input, textarea, select {
374 font-size: 16px; /* Prevents zoom on iOS */ 359 font-size: 16px; /* Prevents zoom on iOS */
375 } 360 }
376 361
377 /* Improve blockquote readability */ 362 /* Improve blockquote readability */
378 blockquote { 363 blockquote {
379 font-size: 1.1em; 364 font-size: var(--zenbu-sys-font-size-md);
380 padding: 0.5em 0 0.5em 1em; 365 padding: 0.5em 0 0.5em 1em;
381 } 366 }
382 367
383 /* Better code block sizing */ 368 /* Better code block sizing */
384 code { 369 code {
385 font-size: 0.9em; 370 font-size: var(--zenbu-sys-font-size-sm);
386 } 371 }
387 372
388 pre { 373 pre {
389 padding: 1em; 374 padding: 1em;
390 overflow-x: auto; 375 overflow-x: auto;
395 /* pwa icon */ 380 /* pwa icon */
396 #pwa-install-btn { 381 #pwa-install-btn {
397 position: fixed; 382 position: fixed;
398 bottom: 20px; 383 bottom: 20px;
399 right: 20px; 384 right: 20px;
400 padding: 12px 24px 12px 36px; 385 min-height: var(--zenbu-control-height);
386 gap: var(--zenbu-control-gap);
387 padding:
388 var(--zenbu-control-padding-block)
389 var(--zenbu-control-padding-inline);
401 background: #000000; 390 background: #000000;
402 color: #eeffee; 391 color: #eeffee;
403 border: none; 392 border: none;
404 border-radius: 8px; 393 border-radius: 8px;
405 cursor: pointer; 394 cursor: pointer;
406 font-size: 14px; 395 font-size: var(--zenbu-control-font-size);
407 font-weight: bold; 396 font-weight: bold;
408 box-shadow: 0 4px 12px rgba(0,0,0,0.2); 397 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
409 z-index: 1000; 398 z-index: 1000;
410 font-family: inherit; 399 font-family: inherit;
411 } 400 }
412 401
413 #pwa-install-btn.with-icon::before { 402 #pwa-install-btn zen-icon {
414 content: ""; 403 width: var(--zenbu-control-icon-size);
415 position: absolute; 404 height: var(--zenbu-control-icon-size);
416 left: 14px; 405 }
417 top: 50%;
418 transform: translateY(-50%);
419 width: 18px;
420 height: 18px;
421
422 /* Masked icon */
423 -webkit-mask: url('/public/paw.svg') no-repeat center;
424 mask: url('/public/paw.svg') no-repeat center;
425 mask-size: contain;
426 mask-repeat: no-repeat;
427
428 /* Icon color = button text color */
429 background-color: currentColor;
430 }