Mercurial

comparison mrjunejune/src/parts/header.html @ 84:bcc76a156aea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to be called src instead of pages.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 13:01:10 -0800
parents mrjunejune/pages/parts/header.html@1ded13720541
children 0618addd5438
comparison
equal deleted inserted replaced
83:49b611c808e7 84:bcc76a156aea
1 <style>
2 :root {
3 --header-background: var(--white);
4 --header-color: rgb(var(--black));
5 --link-hover-accent: var(--awesome);
6 }
7
8 /* Fixed icon in top left corner */
9 #themeToggle {
10 position: fixed;
11 top: 20px;
12 left: 20px;
13 background: var(--header-background);
14 display: flex;
15 align-items: center;
16 border-radius: 50%;
17 cursor: pointer;
18 z-index: 1000;
19 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
20 transition: transform 0.2s ease;
21 }
22
23 #themeToggle:hover {
24 transform: scale(1.05);
25 }
26
27 /* Professional header */
28 header {
29 margin: auto;
30 padding: 1.5em 1em;
31 background: var(--header-background);
32 color: var(--header-color);
33 font-family: "Atkinson", sans-serif;
34 box-shadow: 0 2px 8px rgba(var(--black), 5%);
35 width: 720px;
36 max-width: calc(100% - 2em);
37 text-align: center;
38 }
39
40 header h1 {
41 margin: 0;
42 font-size: 1.8em;
43 font-weight: 700;
44 letter-spacing: -0.5px;
45 }
46
47 header h1 a {
48 text-decoration: none;
49 color: var(--header-color);
50 }
51
52 header h1 a::before {
53 display: none;
54 }
55
56 /* Mobile responsiveness */
57 @media (max-width: 720px) {
58 #themeToggle {
59 top: 15px;
60 left: 15px;
61 }
62
63 header {
64 padding: 1em;
65 }
66
67 header h1 {
68 font-size: 1.5em;
69 }
70 }
71
72 @media (max-width: 480px) {
73 #themeToggle {
74 top: 10px;
75 left: 10px;
76 }
77
78 #themeToggle img {
79 height: 40px;
80 width: 40px;
81 }
82
83 header h1 {
84 font-size: 1.3em;
85 }
86 }
87
88 #logo {
89 width: 300px;
90 }
91
92 /* 1. DEFINE THE DEFAULTS (Light Mode) */
93 :root {
94 --logo-invert: invert(0);
95 --epi-grayscale: grayscale(0) brightness(1);
96 }
97
98 /* 2. MANUAL DARK OVERRIDE */
99 html.dark {
100 --logo-invert: invert(1);
101 --epi-grayscale: grayscale(1);
102 }
103
104 /* 3. MANUAL LIGHT OVERRIDE */
105 html.light-mode {
106 --logo-invert: invert(0);
107 --epi-grayscale: brightness(2.9) grayscale(1);
108 }
109
110 /* 4. SYSTEM PREFERENCE */
111 @media (prefers-color-scheme: dark) {
112 :root:not(.light-mode) {
113 --logo-invert: invert(1);
114 }
115 }
116
117 /* 5. APPLY TO ELEMENTS */
118 #logo {
119 -webkit-filter: var(--logo-invert);
120 filter: var(--logo-invert);
121 transition: filter 0.3s ease;
122 }
123
124 .epi-logo {
125 -webkit-filter: var(--epi-grayscale);
126 filter: var(--epi-grayscale);
127 transition: filter 0.3s ease;
128 }
129 </style>
130
131 <div id="themeToggle">
132 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
133 </div>
134
135 <header>
136 <h1>
137 <a href="/"><img id="logo" src="/public/logo_white.png"> </a>
138 </h1>
139 </header>
140 <script src="index.js"></script>
141