Mercurial

comparison mrjunejune/test/snapshots/tools.snapshot @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents b8aa08503378
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="theme-color" content="#544e43"> 6 <meta name="theme-color" content="#f7f3e8">
7 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 7 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
8 <link rel="manifest" href="/public/manifest.json"> 8 <link rel="manifest" href="/public/manifest.json">
9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg"> 9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
10 10
11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> 11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> --> 17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
20 <link rel="preload" href="/public/epi_all_colors.svg" as="image"> 20 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
21 21
22 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
23 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
22 <link rel="preload" href="/base.css" as="style" /> 24 <link rel="preload" href="/base.css" as="style" />
23 <link rel="stylesheet" href="/base.css" /> 25 <link rel="stylesheet" href="/base.css" />
26 <link rel="stylesheet" href="/public/design-system/styles/components.css" />
27 <script
28 type="module"
29 src="/public/design-system/components/index.js"
30 ></script>
24 31
25 <script src="/public/pwa-register.js" defer></script> 32 <script src="/public/pwa-register.js" defer></script>
26
27 33
28 <link rel="stylesheet" href="/tools/index.css" /> 34 <link rel="stylesheet" href="/tools/index.css" />
29 </head> 35 </head>
30 <body> 36 <body>
31 <style> 37 <style>
32 :root { 38 :root {
33 --header-background: var(--white); 39 --header-background: var(--white);
34 --header-color: rgb(var(--black)); 40 --header-color: var(--black);
35 --link-hover-accent: var(--awesome); 41 --link-hover-accent: var(--awesome);
36 } 42 }
37 43
38 /* Fixed icon in top left corner */ 44 #themeControl {
39 #themeToggle {
40 position: fixed; 45 position: fixed;
41 top: 20px; 46 top: 20px;
42 left: 20px; 47 left: 20px;
43 background: var(--header-background);
44 display: flex;
45 align-items: center;
46 border-radius: 50%;
47 cursor: pointer;
48 z-index: 1000; 48 z-index: 1000;
49 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
50 transition: transform 0.2s ease; 49 transition: transform 0.2s ease;
51 } 50 }
52 51
53 #themeToggle:hover { 52 #themeControl:hover {
54 transform: scale(1.05); 53 transform: scale(1.05);
54 }
55
56 #themeToggle {
57 flex-direction: column;
58 min-width: 4.5rem;
59 padding: 0.35rem;
60 border-radius: 1.5rem;
61 }
62
63 #themeName {
64 font-family: "More", sans-serif;
65 font-size: 0.65rem;
66 line-height: 1;
55 } 67 }
56 68
57 /* Professional header */ 69 /* Professional header */
58 header { 70 header {
59 margin: auto; 71 margin: auto;
60 padding: 1.5em 1em; 72 padding: 1.5em 1em;
61 font-family: "More", sans-serif; 73 font-family: "More", sans-serif;
62 box-shadow: 0 2px 8px rgba(var(--black), 5%); 74 box-shadow: var(--zen-shadow-sm);
63 width: 720px; 75 width: 720px;
64 max-width: calc(100% - 2em); 76 max-width: calc(100% - 2em);
65 text-align: center; 77 text-align: center;
66 } 78 }
67 79
81 display: none; 93 display: none;
82 } 94 }
83 95
84 /* Mobile responsiveness */ 96 /* Mobile responsiveness */
85 @media (max-width: 720px) { 97 @media (max-width: 720px) {
86 #themeToggle { 98 #themeControl {
87 top: 15px; 99 top: 15px;
88 left: 15px; 100 left: 15px;
89 } 101 }
90 102
91 header { 103 header {
96 font-size: 1.5em; 108 font-size: 1.5em;
97 } 109 }
98 } 110 }
99 111
100 @media (max-width: 480px) { 112 @media (max-width: 480px) {
101 #themeToggle { 113 #themeControl {
102 top: 10px; 114 top: 10px;
103 left: 10px; 115 left: 10px;
104 } 116 }
105 117
106 #themeToggle img { 118 #themeToggle img {
122 --logo-invert: invert(0); 134 --logo-invert: invert(0);
123 --epi-grayscale: grayscale(0) brightness(1); 135 --epi-grayscale: grayscale(0) brightness(1);
124 } 136 }
125 137
126 /* 2. MANUAL DARK OVERRIDE */ 138 /* 2. MANUAL DARK OVERRIDE */
127 html.dark { 139 html[data-zen-theme="ink"] {
128 --logo-invert: invert(1); 140 --logo-invert: invert(1);
129 --epi-grayscale: grayscale(1); 141 --epi-grayscale: grayscale(1);
130 } 142 }
131 143
132 /* 3. MANUAL LIGHT OVERRIDE */ 144 /* 3. MANUAL LIGHT OVERRIDE */
133 html.light-mode { 145 html[data-zen-theme="paper"] {
134 --logo-invert: invert(0); 146 --logo-invert: invert(0);
135 --epi-grayscale: brightness(2.9) grayscale(1); 147 --epi-grayscale: brightness(2.9) grayscale(1);
136 } 148 }
149
150 html[data-zen-theme="playful"] {
151 --logo-invert: invert(0);
152 --epi-grayscale: saturate(1.25);
153 }
137 154
138 /* 4. SYSTEM PREFERENCE */ 155 /* 4. SYSTEM PREFERENCE */
139 @media (prefers-color-scheme: dark) { 156 @media (prefers-color-scheme: dark) {
140 :root:not(.light-mode) { 157 :root:not([data-zen-theme]) {
141 --logo-invert: invert(1); 158 --logo-invert: invert(1);
142 } 159 }
143 } 160 }
144 161
145 /* 5. APPLY TO ELEMENTS */ 162 /* 5. APPLY TO ELEMENTS */
154 filter: var(--epi-grayscale); 171 filter: var(--epi-grayscale);
155 transition: filter 0.3s ease; 172 transition: filter 0.3s ease;
156 } 173 }
157 </style> 174 </style>
158 175
159 <div id="themeToggle"> 176 <zen-button id="themeControl" variant="quiet">
160 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 177 <button
161 </div> 178 id="themeToggle"
179 type="button"
180 aria-label="Change site theme"
181 >
182 <img
183 id="epiChan"
184 class="epi-logo"
185 alt=""
186 src="/public/epi_all_colors.svg"
187 height="50"
188 width="50"
189 >
190 <span id="themeName" aria-live="polite">Auto</span>
191 </button>
192 </zen-button>
162 193
163 <header> 194 <header>
164 <h1><a href="/">MrJuneJune</a></h1> 195 <h1><a href="/">MrJuneJune</a></h1>
165 </header> 196 </header>
166 <script src="/index.js"></script> 197 <script src="/index.js"></script>
167
168 198
169 <main> 199 <main>
170 <h1 class="title"> Tools </h1> 200 <h1 class="title"> Tools </h1>
171 <ul class="nav-list"> 201 <ul class="nav-list">
172 <li><a href="/tools/markdown_to_html">MarkDown to HTML</a></li> 202 <li><a href="/tools/markdown_to_html">MarkDown to HTML</a></li>