Mercurial

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