Mercurial
annotate mrjunejune/src/parts/header.html @ 91:19cccf6e866a
Added Epi photo reels.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Thu, 01 Jan 2026 16:34:51 -0800 |
| parents | 0618addd5438 |
| children | 655ea0b661fd |
| rev | line source |
|---|---|
| 78 | 1 <style> |
| 2 :root { | |
| 3 --header-background: var(--white); | |
| 4 --header-color: rgb(var(--black)); | |
| 5 --link-hover-accent: var(--awesome); | |
| 6 } | |
| 82 | 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; | |
| 78 | 15 align-items: center; |
| 82 | 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; | |
| 78 | 21 } |
| 82 | 22 |
| 23 #themeToggle:hover { | |
| 24 transform: scale(1.05); | |
| 25 } | |
| 26 | |
| 27 /* Professional header */ | |
| 78 | 28 header { |
| 82 | 29 margin: auto; |
| 30 padding: 1.5em 1em; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
31 font-family: "Atkinson", sans-serif; |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
32 box-shadow: 0 2px 8px rgba(var(--black), 5%); |
|
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 { | |
| 91 | 39 font-family: "More", sans-serif; |
| 82 | 40 margin: 0; |
| 41 font-size: 1.8em; | |
| 42 font-weight: 700; | |
| 43 letter-spacing: -0.5px; | |
| 78 | 44 } |
| 82 | 45 |
| 46 header h1 a { | |
| 47 text-decoration: none; | |
| 48 color: var(--header-color); | |
| 78 | 49 } |
| 82 | 50 |
| 51 header h1 a::before { | |
| 52 display: none; | |
| 78 | 53 } |
| 82 | 54 |
| 55 /* Mobile responsiveness */ | |
| 56 @media (max-width: 720px) { | |
| 57 #themeToggle { | |
| 58 top: 15px; | |
| 59 left: 15px; | |
| 60 } | |
| 61 | |
| 62 header { | |
| 63 padding: 1em; | |
| 64 } | |
| 65 | |
| 66 header h1 { | |
| 67 font-size: 1.5em; | |
| 68 } | |
| 78 | 69 } |
| 82 | 70 |
| 71 @media (max-width: 480px) { | |
| 72 #themeToggle { | |
| 73 top: 10px; | |
| 74 left: 10px; | |
| 75 } | |
| 76 | |
| 77 #themeToggle img { | |
| 78 height: 40px; | |
| 79 width: 40px; | |
| 80 } | |
| 81 | |
| 82 header h1 { | |
| 83 font-size: 1.3em; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
84 } |
| 78 | 85 } |
| 82 | 86 |
| 87 #logo { | |
| 88 width: 300px; | |
| 78 | 89 } |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
90 |
| 82 | 91 /* 1. DEFINE THE DEFAULTS (Light Mode) */ |
| 92 :root { | |
| 93 --logo-invert: invert(0); | |
| 94 --epi-grayscale: grayscale(0) brightness(1); | |
| 95 } | |
| 96 | |
| 97 /* 2. MANUAL DARK OVERRIDE */ | |
| 98 html.dark { | |
| 99 --logo-invert: invert(1); | |
| 100 --epi-grayscale: grayscale(1); | |
| 101 } | |
| 102 | |
| 103 /* 3. MANUAL LIGHT OVERRIDE */ | |
| 104 html.light-mode { | |
| 105 --logo-invert: invert(0); | |
| 106 --epi-grayscale: brightness(2.9) grayscale(1); | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
107 } |
| 82 | 108 |
| 109 /* 4. SYSTEM PREFERENCE */ | |
| 110 @media (prefers-color-scheme: dark) { | |
| 111 :root:not(.light-mode) { | |
| 112 --logo-invert: invert(1); | |
| 113 } | |
| 114 } | |
| 115 | |
| 116 /* 5. APPLY TO ELEMENTS */ | |
| 117 #logo { | |
| 118 -webkit-filter: var(--logo-invert); | |
| 119 filter: var(--logo-invert); | |
| 120 transition: filter 0.3s ease; | |
| 121 } | |
| 122 | |
| 123 .epi-logo { | |
| 124 -webkit-filter: var(--epi-grayscale); | |
| 125 filter: var(--epi-grayscale); | |
| 126 transition: filter 0.3s ease; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
127 } |
| 78 | 128 </style> |
| 82 | 129 |
| 130 <div id="themeToggle"> | |
| 131 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> | |
| 132 </div> | |
| 133 | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
134 <header> |
| 91 | 135 <h1><a href="/">MrJuneJune</a></h1> |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
136 </header> |
|
85
0618addd5438
Updated so CSS and JS works for non root path.
June Park <parkjune1995@gmail.com>
parents:
84
diff
changeset
|
137 <script src="/index.js"></script> |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
138 |