Mercurial

comparison mrjunejune/pages/base.css @ 76:35b1abc37969

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updating my website to use seobeo library.
author June Park <parkjune1995@gmail.com>
date Wed, 31 Dec 2025 14:11:21 -0800
parents ede391ac83c8
children d55157451947
comparison
equal deleted inserted replaced
75:ae6a88e6e484 76:35b1abc37969
206 206
207 .center { 207 .center {
208 display: flex; 208 display: flex;
209 justify-content: center; 209 justify-content: center;
210 } 210 }
211
212 /* Auto dark mode based on system preference */
213 @media (prefers-color-scheme: dark) {
214 :root:not(.light-mode) {
215 --white: hsl(224, 10%, 10%);
216 --black: hsl(0, 0%, 90%);
217 --darkgray: #cccccc;
218 --lightgray: #666666;
219 --green: #3d1ea0;
220 --orange: #025ccc;
221 --purple: #2b5b06;
222 --red: #04bb7a;
223 --blue: #932f0e;
224 --darktext: #bebebe;
225 --awesome: #23cade;
226 --accent: #ffcc00;
227 --accent-dark: #ffb275;
228 --gray: 159, 140, 96;
229 --gray-light: 26, 22, 15;
230 --gray-dark: 221, 214, 198;
231 --gray-gradient: rgba(26, 22, 15, 50%), #000;
232 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
233 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
234 }
235 }
236
237 /* Dark mode toggle button */
238 .dark-mode-toggle {
239 position: fixed;
240 top: 20px;
241 left: 20px;
242 width: 40px;
243 height: 40px;
244 border-radius: 50%;
245 background: var(--white);
246 cursor: pointer;
247 display: flex;
248 align-items: center;
249 justify-content: center;
250 font-size: 20px;
251 transition: all 0.3s ease;
252 z-index: 1000;
253 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
254 }
255
256 .dark-mode-toggle:hover {
257 transform: scale(1.1);
258 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
259 }