Mercurial
annotate mrjunejune/src/parts/header.html @ 273:e02e2036ef84 default tip
add Layer 2 JRPG component system
Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sat, 08 Aug 2026 02:08:08 -0700 |
| parents | 60a876c4587a |
| children |
| rev | line source |
|---|---|
| 78 | 1 <style> |
| 2 :root { | |
| 3 --header-background: var(--white); | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
4 --header-color: var(--black); |
| 78 | 5 --link-hover-accent: var(--awesome); |
| 6 } | |
| 82 | 7 |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
8 #themeControl { |
| 82 | 9 position: fixed; |
| 10 top: 20px; | |
| 11 left: 20px; | |
| 12 z-index: 1000; | |
| 13 transition: transform 0.2s ease; | |
| 78 | 14 } |
| 82 | 15 |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
16 #themeControl:hover { |
| 82 | 17 transform: scale(1.05); |
| 18 } | |
| 19 | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
20 #themeToggle { |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
21 display: flex; |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
22 flex-direction: column; |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
23 padding: 0; |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
24 border: 0; |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
25 background: transparent; |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
26 } |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
27 |
| 82 | 28 /* Professional header */ |
| 78 | 29 header { |
| 82 | 30 margin: auto; |
| 31 padding: 1.5em 1em; | |
|
92
655ea0b661fd
[Seobeo] Added few endpoints for handling files. [Dowa] Added few functions for random number and generating uuids
June Park <parkjune1995@gmail.com>
parents:
91
diff
changeset
|
32 font-family: "More", sans-serif; |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
33 width: 720px; |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
34 max-width: calc(100% - 2em); |
| 82 | 35 text-align: center; |
| 78 | 36 } |
| 82 | 37 |
| 38 header h1 { | |
| 39 margin: 0; | |
| 40 font-size: 1.8em; | |
| 41 font-weight: 700; | |
| 42 letter-spacing: -0.5px; | |
| 78 | 43 } |
| 82 | 44 |
| 45 header h1 a { | |
| 46 text-decoration: none; | |
| 47 color: var(--header-color); | |
| 78 | 48 } |
| 82 | 49 |
| 50 header h1 a::before { | |
| 51 display: none; | |
| 78 | 52 } |
| 82 | 53 |
| 54 /* Mobile responsiveness */ | |
| 55 @media (max-width: 720px) { | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
56 #themeControl { |
| 82 | 57 top: 15px; |
| 58 left: 15px; | |
| 59 } | |
| 60 | |
| 61 header { | |
| 62 padding: 1em; | |
| 63 } | |
| 64 | |
| 65 header h1 { | |
| 66 font-size: 1.5em; | |
| 67 } | |
| 78 | 68 } |
| 82 | 69 |
| 70 @media (max-width: 480px) { | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
71 #themeControl { |
| 82 | 72 top: 10px; |
| 73 left: 10px; | |
| 74 } | |
| 75 | |
| 76 #themeToggle img { | |
| 77 height: 40px; | |
| 78 width: 40px; | |
| 79 } | |
| 80 | |
| 81 header h1 { | |
| 82 font-size: 1.3em; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
83 } |
| 78 | 84 } |
| 82 | 85 |
| 86 #logo { | |
| 87 width: 300px; | |
| 78 | 88 } |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
89 |
| 82 | 90 /* 1. DEFINE THE DEFAULTS (Light Mode) */ |
| 91 :root { | |
| 92 --logo-invert: invert(0); | |
| 93 --epi-grayscale: grayscale(0) brightness(1); | |
| 94 } | |
| 95 | |
| 96 /* 2. MANUAL DARK OVERRIDE */ | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
97 html[data-zen-theme="ink"] { |
| 82 | 98 --logo-invert: invert(1); |
| 99 --epi-grayscale: grayscale(1); | |
| 100 } | |
| 101 | |
| 102 /* 3. MANUAL LIGHT OVERRIDE */ | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
103 html[data-zen-theme="paper"] { |
| 82 | 104 --logo-invert: invert(0); |
| 105 --epi-grayscale: brightness(2.9) grayscale(1); | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
106 } |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
107 |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
108 html[data-zen-theme="playful"] { |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
109 --logo-invert: invert(0); |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
110 --epi-grayscale: saturate(1.25); |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
111 } |
| 82 | 112 |
| 113 /* 4. SYSTEM PREFERENCE */ | |
| 114 @media (prefers-color-scheme: dark) { | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
115 :root:not([data-zen-theme]) { |
| 82 | 116 --logo-invert: invert(1); |
| 117 } | |
| 118 } | |
| 119 | |
| 120 /* 5. APPLY TO ELEMENTS */ | |
| 121 #logo { | |
| 122 -webkit-filter: var(--logo-invert); | |
| 123 filter: var(--logo-invert); | |
| 124 transition: filter 0.3s ease; | |
| 125 } | |
| 126 | |
| 127 .epi-logo { | |
| 128 -webkit-filter: var(--epi-grayscale); | |
| 129 filter: var(--epi-grayscale); | |
| 130 transition: filter 0.3s ease; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
131 } |
| 78 | 132 </style> |
| 82 | 133 |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
134 <zen-button id="themeControl" appearance="plain" size="xl"> |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
135 <button |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
136 id="themeToggle" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
137 type="button" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
138 aria-label="Change site theme" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
139 > |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
140 <img |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
141 id="epiChan" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
142 class="epi-logo" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
143 alt="" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
144 src="/public/epi_all_colors.svg" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
145 height="50" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
146 width="50" |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
147 > |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
148 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span> |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
149 </button> |
|
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
92
diff
changeset
|
150 </zen-button> |
| 82 | 151 |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
152 <header> |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
153 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1> |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
154 </header> |
|
85
0618addd5438
Updated so CSS and JS works for non root path.
June Park <parkjune1995@gmail.com>
parents:
84
diff
changeset
|
155 <script src="/index.js"></script> |