Mercurial
annotate mrjunejune/src/parts/header.html @ 216:e82b80b24012 default tip
[MrJuneJune] Make webp translate background job.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Sat, 28 Feb 2026 21:04:43 -0800 |
| parents | 655ea0b661fd |
| children |
| 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; | |
|
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
|
31 font-family: "More", sans-serif; |
|
80
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 { | |
| 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) { | |
| 56 #themeToggle { | |
| 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) { | |
| 71 #themeToggle { | |
| 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 */ | |
| 97 html.dark { | |
| 98 --logo-invert: invert(1); | |
| 99 --epi-grayscale: grayscale(1); | |
| 100 } | |
| 101 | |
| 102 /* 3. MANUAL LIGHT OVERRIDE */ | |
| 103 html.light-mode { | |
| 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 } |
| 82 | 107 |
| 108 /* 4. SYSTEM PREFERENCE */ | |
| 109 @media (prefers-color-scheme: dark) { | |
| 110 :root:not(.light-mode) { | |
| 111 --logo-invert: invert(1); | |
| 112 } | |
| 113 } | |
| 114 | |
| 115 /* 5. APPLY TO ELEMENTS */ | |
| 116 #logo { | |
| 117 -webkit-filter: var(--logo-invert); | |
| 118 filter: var(--logo-invert); | |
| 119 transition: filter 0.3s ease; | |
| 120 } | |
| 121 | |
| 122 .epi-logo { | |
| 123 -webkit-filter: var(--epi-grayscale); | |
| 124 filter: var(--epi-grayscale); | |
| 125 transition: filter 0.3s ease; | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
126 } |
| 78 | 127 </style> |
| 82 | 128 |
| 129 <div id="themeToggle"> | |
| 130 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> | |
| 131 </div> | |
| 132 | |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
133 <header> |
| 91 | 134 <h1><a href="/">MrJuneJune</a></h1> |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
135 </header> |
|
85
0618addd5438
Updated so CSS and JS works for non root path.
June Park <parkjune1995@gmail.com>
parents:
84
diff
changeset
|
136 <script src="/index.js"></script> |
|
80
d55157451947
[MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents:
78
diff
changeset
|
137 |