Mercurial

comparison mrjunejune/src/parts/header.html @ 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 655ea0b661fd
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
1 <style> 1 <style>
2 :root { 2 :root {
3 --header-background: var(--white); 3 --header-background: var(--white);
4 --header-color: rgb(var(--black)); 4 --header-color: var(--black);
5 --link-hover-accent: var(--awesome); 5 --link-hover-accent: var(--awesome);
6 } 6 }
7 7
8 /* Fixed icon in top left corner */ 8 #themeControl {
9 #themeToggle {
10 position: fixed; 9 position: fixed;
11 top: 20px; 10 top: 20px;
12 left: 20px; 11 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; 12 z-index: 1000;
19 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
20 transition: transform 0.2s ease; 13 transition: transform 0.2s ease;
21 } 14 }
22 15
23 #themeToggle:hover { 16 #themeControl:hover {
24 transform: scale(1.05); 17 transform: scale(1.05);
18 }
19
20 #themeToggle {
21 flex-direction: column;
22 min-width: 4.5rem;
23 padding: 0.35rem;
24 border-radius: 1.5rem;
25 }
26
27 #themeName {
28 font-family: "More", sans-serif;
29 font-size: 0.65rem;
30 line-height: 1;
25 } 31 }
26 32
27 /* Professional header */ 33 /* Professional header */
28 header { 34 header {
29 margin: auto; 35 margin: auto;
30 padding: 1.5em 1em; 36 padding: 1.5em 1em;
31 font-family: "More", sans-serif; 37 font-family: "More", sans-serif;
32 box-shadow: 0 2px 8px rgba(var(--black), 5%); 38 box-shadow: var(--zen-shadow-sm);
33 width: 720px; 39 width: 720px;
34 max-width: calc(100% - 2em); 40 max-width: calc(100% - 2em);
35 text-align: center; 41 text-align: center;
36 } 42 }
37 43
51 display: none; 57 display: none;
52 } 58 }
53 59
54 /* Mobile responsiveness */ 60 /* Mobile responsiveness */
55 @media (max-width: 720px) { 61 @media (max-width: 720px) {
56 #themeToggle { 62 #themeControl {
57 top: 15px; 63 top: 15px;
58 left: 15px; 64 left: 15px;
59 } 65 }
60 66
61 header { 67 header {
66 font-size: 1.5em; 72 font-size: 1.5em;
67 } 73 }
68 } 74 }
69 75
70 @media (max-width: 480px) { 76 @media (max-width: 480px) {
71 #themeToggle { 77 #themeControl {
72 top: 10px; 78 top: 10px;
73 left: 10px; 79 left: 10px;
74 } 80 }
75 81
76 #themeToggle img { 82 #themeToggle img {
92 --logo-invert: invert(0); 98 --logo-invert: invert(0);
93 --epi-grayscale: grayscale(0) brightness(1); 99 --epi-grayscale: grayscale(0) brightness(1);
94 } 100 }
95 101
96 /* 2. MANUAL DARK OVERRIDE */ 102 /* 2. MANUAL DARK OVERRIDE */
97 html.dark { 103 html[data-zen-theme="ink"] {
98 --logo-invert: invert(1); 104 --logo-invert: invert(1);
99 --epi-grayscale: grayscale(1); 105 --epi-grayscale: grayscale(1);
100 } 106 }
101 107
102 /* 3. MANUAL LIGHT OVERRIDE */ 108 /* 3. MANUAL LIGHT OVERRIDE */
103 html.light-mode { 109 html[data-zen-theme="paper"] {
104 --logo-invert: invert(0); 110 --logo-invert: invert(0);
105 --epi-grayscale: brightness(2.9) grayscale(1); 111 --epi-grayscale: brightness(2.9) grayscale(1);
112 }
113
114 html[data-zen-theme="playful"] {
115 --logo-invert: invert(0);
116 --epi-grayscale: saturate(1.25);
106 } 117 }
107 118
108 /* 4. SYSTEM PREFERENCE */ 119 /* 4. SYSTEM PREFERENCE */
109 @media (prefers-color-scheme: dark) { 120 @media (prefers-color-scheme: dark) {
110 :root:not(.light-mode) { 121 :root:not([data-zen-theme]) {
111 --logo-invert: invert(1); 122 --logo-invert: invert(1);
112 } 123 }
113 } 124 }
114 125
115 /* 5. APPLY TO ELEMENTS */ 126 /* 5. APPLY TO ELEMENTS */
124 filter: var(--epi-grayscale); 135 filter: var(--epi-grayscale);
125 transition: filter 0.3s ease; 136 transition: filter 0.3s ease;
126 } 137 }
127 </style> 138 </style>
128 139
129 <div id="themeToggle"> 140 <zen-button id="themeControl" variant="quiet">
130 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 141 <button
131 </div> 142 id="themeToggle"
143 type="button"
144 aria-label="Change site theme"
145 >
146 <img
147 id="epiChan"
148 class="epi-logo"
149 alt=""
150 src="/public/epi_all_colors.svg"
151 height="50"
152 width="50"
153 >
154 <span id="themeName" aria-live="polite">Auto</span>
155 </button>
156 </zen-button>
132 157
133 <header> 158 <header>
134 <h1><a href="/">MrJuneJune</a></h1> 159 <h1><a href="/">MrJuneJune</a></h1>
135 </header> 160 </header>
136 <script src="/index.js"></script> 161 <script src="/index.js"></script>
137