Mercurial
annotate mrjunejune/src/parts/header.html @ 84:bcc76a156aea
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 |
| 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 background: var(--header-background); |
| 82 | 32 color: var(--header-color); |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
33 font-family: "Atkinson", sans-serif; |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
34 box-shadow: 0 2px 8px rgba(var(--black), 5%); |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
35 width: 720px; |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
36 max-width: calc(100% - 2em); |
| 82 | 37 text-align: center; |
| 78 | 38 } |
| 82 | 39 |
| 40 header h1 { | |
| 41 margin: 0; | |
| 42 font-size: 1.8em; | |
| 43 font-weight: 700; | |
| 44 letter-spacing: -0.5px; | |
| 78 | 45 } |
| 82 | 46 |
| 47 header h1 a { | |
| 48 text-decoration: none; | |
| 49 color: var(--header-color); | |
| 78 | 50 } |
| 82 | 51 |
| 52 header h1 a::before { | |
| 53 display: none; | |
| 78 | 54 } |
| 82 | 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 } | |
| 78 | 70 } |
| 82 | 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; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
85 } |
| 78 | 86 } |
| 82 | 87 |
| 88 #logo { | |
| 89 width: 300px; | |
| 78 | 90 } |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
91 |
| 82 | 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); | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
108 } |
| 82 | 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; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
128 } |
| 78 | 129 </style> |
| 82 | 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 | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
135 <header> |
| 82 | 136 <h1> |
| 137 <a href="/"><img id="logo" src="/public/logo_white.png"> </a> | |
| 138 </h1> | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
139 </header> |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
140 <script src="index.js"></script> |
|
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
141 |