Mercurial

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