Mercurial

comparison mrjunejune/test/snapshots/blog.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 1c0878eb17de
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="#f7f3e8">
6 <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">
9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
7 10
8 <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>
9 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin> 12 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
10 13
11 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> --> 14 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
14 <!-- <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> -->
15 <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>
16 <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>
17 <link rel="preload" href="/public/epi_all_colors.svg" as="image"> 20 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
18 21
22 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
23 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
19 <link rel="preload" href="/base.css" as="style" /> 24 <link rel="preload" href="/base.css" as="style" />
20 <link rel="stylesheet" href="/base.css" /> 25 <link rel="stylesheet" href="/base.css" />
21 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>
31
32 <script src="/public/pwa-register.js" defer></script>
22 33
23 </head> 34 </head>
24 <body> 35 <body>
25 <style> 36 <style>
26 :root { 37 :root {
27 --header-background: var(--white); 38 --header-background: var(--white);
28 --header-color: rgb(var(--black)); 39 --header-color: var(--black);
29 --link-hover-accent: var(--awesome); 40 --link-hover-accent: var(--awesome);
30 } 41 }
31 42
32 /* Fixed icon in top left corner */ 43 #themeControl {
33 #themeToggle {
34 position: fixed; 44 position: fixed;
35 top: 20px; 45 top: 20px;
36 left: 20px; 46 left: 20px;
37 background: var(--header-background);
38 display: flex;
39 align-items: center;
40 border-radius: 50%;
41 cursor: pointer;
42 z-index: 1000; 47 z-index: 1000;
43 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
44 transition: transform 0.2s ease; 48 transition: transform 0.2s ease;
45 } 49 }
46 50
47 #themeToggle:hover { 51 #themeControl:hover {
48 transform: scale(1.05); 52 transform: scale(1.05);
53 }
54
55 #themeToggle {
56 flex-direction: column;
57 min-width: 4.5rem;
58 padding: 0.35rem;
59 border-radius: 1.5rem;
60 }
61
62 #themeName {
63 font-family: "More", sans-serif;
64 font-size: 0.65rem;
65 line-height: 1;
49 } 66 }
50 67
51 /* Professional header */ 68 /* Professional header */
52 header { 69 header {
53 margin: auto; 70 margin: auto;
54 padding: 1.5em 1em; 71 padding: 1.5em 1em;
55 font-family: "More", sans-serif; 72 font-family: "More", sans-serif;
56 box-shadow: 0 2px 8px rgba(var(--black), 5%); 73 box-shadow: var(--zen-shadow-sm);
57 width: 720px; 74 width: 720px;
58 max-width: calc(100% - 2em); 75 max-width: calc(100% - 2em);
59 text-align: center; 76 text-align: center;
60 } 77 }
61 78
75 display: none; 92 display: none;
76 } 93 }
77 94
78 /* Mobile responsiveness */ 95 /* Mobile responsiveness */
79 @media (max-width: 720px) { 96 @media (max-width: 720px) {
80 #themeToggle { 97 #themeControl {
81 top: 15px; 98 top: 15px;
82 left: 15px; 99 left: 15px;
83 } 100 }
84 101
85 header { 102 header {
90 font-size: 1.5em; 107 font-size: 1.5em;
91 } 108 }
92 } 109 }
93 110
94 @media (max-width: 480px) { 111 @media (max-width: 480px) {
95 #themeToggle { 112 #themeControl {
96 top: 10px; 113 top: 10px;
97 left: 10px; 114 left: 10px;
98 } 115 }
99 116
100 #themeToggle img { 117 #themeToggle img {
116 --logo-invert: invert(0); 133 --logo-invert: invert(0);
117 --epi-grayscale: grayscale(0) brightness(1); 134 --epi-grayscale: grayscale(0) brightness(1);
118 } 135 }
119 136
120 /* 2. MANUAL DARK OVERRIDE */ 137 /* 2. MANUAL DARK OVERRIDE */
121 html.dark { 138 html[data-zen-theme="ink"] {
122 --logo-invert: invert(1); 139 --logo-invert: invert(1);
123 --epi-grayscale: grayscale(1); 140 --epi-grayscale: grayscale(1);
124 } 141 }
125 142
126 /* 3. MANUAL LIGHT OVERRIDE */ 143 /* 3. MANUAL LIGHT OVERRIDE */
127 html.light-mode { 144 html[data-zen-theme="paper"] {
128 --logo-invert: invert(0); 145 --logo-invert: invert(0);
129 --epi-grayscale: brightness(2.9) grayscale(1); 146 --epi-grayscale: brightness(2.9) grayscale(1);
130 } 147 }
148
149 html[data-zen-theme="playful"] {
150 --logo-invert: invert(0);
151 --epi-grayscale: saturate(1.25);
152 }
131 153
132 /* 4. SYSTEM PREFERENCE */ 154 /* 4. SYSTEM PREFERENCE */
133 @media (prefers-color-scheme: dark) { 155 @media (prefers-color-scheme: dark) {
134 :root:not(.light-mode) { 156 :root:not([data-zen-theme]) {
135 --logo-invert: invert(1); 157 --logo-invert: invert(1);
136 } 158 }
137 } 159 }
138 160
139 /* 5. APPLY TO ELEMENTS */ 161 /* 5. APPLY TO ELEMENTS */
148 filter: var(--epi-grayscale); 170 filter: var(--epi-grayscale);
149 transition: filter 0.3s ease; 171 transition: filter 0.3s ease;
150 } 172 }
151 </style> 173 </style>
152 174
153 <div id="themeToggle"> 175 <zen-button id="themeControl" variant="quiet">
154 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 176 <button
155 </div> 177 id="themeToggle"
178 type="button"
179 aria-label="Change site theme"
180 >
181 <img
182 id="epiChan"
183 class="epi-logo"
184 alt=""
185 src="/public/epi_all_colors.svg"
186 height="50"
187 width="50"
188 >
189 <span id="themeName" aria-live="polite">Auto</span>
190 </button>
191 </zen-button>
156 192
157 <header> 193 <header>
158 <h1><a href="/">MrJuneJune</a></h1> 194 <h1><a href="/">MrJuneJune</a></h1>
159 </header> 195 </header>
160 <script src="/index.js"></script> 196 <script src="/index.js"></script>
161
162 197
163 <main> 198 <main>
164 <h1 class="title" style="margin-bottom: 20px;"> Blogs </h1> 199 <h1 class="title" style="margin-bottom: 20px;"> Blogs </h1>
165 <ul style="list-style: none;"> 200 <ul style="list-style: none;">
166 <li style="margin-bottom: 20px;"> 201 <li style="margin-bottom: 20px;">