Mercurial

comparison mrjunejune/pages/parts/header.html @ 82:1ded13720541

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added new logos.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 12:45:22 -0800
parents d55157451947
children
comparison
equal deleted inserted replaced
81:37fc1ec888b6 82:1ded13720541
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: rgb(var(--black));
5 --link-hover-accent: var(--awesome); 5 --link-hover-accent: var(--awesome);
6 --social-link-hover: rgb(var(--gray-dark));
7 } 6 }
8 .internal-links { 7
9 width: 33%; 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;
15 align-items: center;
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;
10 } 21 }
11 .header-logo { 22
12 display: grid; 23 #themeToggle:hover {
13 grid-template-columns: 1fr 1fr ; 24 transform: scale(1.05);
14 align-items: center;
15 } 25 }
26
27 /* Professional header */
16 header { 28 header {
17 margin: auto; 29 margin: auto;
18 padding: 1em 1em; 30 padding: 1.5em 1em;
19 background: var(--header-background); 31 background: var(--header-background);
20 color: rgb(var(--header-color)); 32 color: var(--header-color);
21 font-family: "Atkinson", sans-serif; 33 font-family: "Atkinson", sans-serif;
22 box-shadow: 0 2px 8px rgba(var(--black), 5%); 34 box-shadow: 0 2px 8px rgba(var(--black), 5%);
23 width: 720px; 35 width: 720px;
24 max-width: calc(100% - 2em); 36 max-width: calc(100% - 2em);
37 text-align: center;
25 } 38 }
26 h2 { 39
27 margin: 0; 40 header h1 {
28 font-size: 1em; 41 margin: 0;
42 font-size: 1.8em;
43 font-weight: 700;
44 letter-spacing: -0.5px;
29 } 45 }
30 h2 a, 46
31 h2 a.active { 47 header h1 a {
32 text-decoration: none; 48 text-decoration: none;
49 color: var(--header-color);
33 } 50 }
34 .social-links, 51
35 .social-links a { 52 header h1 a::before {
36 display: flex; 53 display: none;
37 } 54 }
38 .social-links a { 55
39 text-decoration: none; 56 /* Mobile responsiveness */
40 }
41 .social-links a:hover {
42 color: rgb(var(--social-link-hover));
43 }
44 @media (max-width: 720px) { 57 @media (max-width: 720px) {
45 .social-links { 58 #themeToggle {
46 display: none; 59 top: 15px;
47 } 60 left: 15px;
48 .internal-links { 61 }
49 width: 45%; 62
63 header {
64 padding: 1em;
65 }
66
67 header h1 {
68 font-size: 1.5em;
50 } 69 }
51 } 70 }
52 #themeToggle { 71
53 background: var(--header-background); 72 @media (max-width: 480px) {
54 display: flex; 73 #themeToggle {
55 align-items: center; 74 top: 10px;
56 border-radius: 25px; 75 left: 10px;
57 cursor: pointer; 76 }
77
78 #themeToggle img {
79 height: 40px;
80 width: 40px;
81 }
82
83 header h1 {
84 font-size: 1.3em;
85 }
58 } 86 }
59 87
60 /* Dark Mode toggles */ 88 #logo {
61 :is(html.dark, @media (prefers-color-scheme: dark) { html }) img { 89 width: 300px;
62 -webkit-filter: grayscale(1);
63 filter: grayscale(1);
64 } 90 }
65 :is(html.light-mode, @media (prefers-color-scheme: dark) { html }) img { 91
66 -webkit-filter: brightness(2.9) grayscale(1); 92 /* 1. DEFINE THE DEFAULTS (Light Mode) */
67 filter: brightness(2.9) grayscale(1); 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);
108 }
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;
68 } 128 }
69 </style> 129 </style>
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
70 <header> 135 <header>
71 <h2 class="header-logo"> 136 <h1>
72 <div id="themeToggle"> 137 <a href="/"><img id="logo" src="/public/logo_white.png"> </a>
73 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 138 </h1>
74 </div>
75 <a href="/">MrJuneJune</a>
76 </h2>
77 </header> 139 </header>
78 <script src="index.js"></script> 140 <script src="index.js"></script>
79 141