Mercurial

annotate mrjunejune/pages/parts/header.html @ 80:d55157451947

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updating my homepage.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 08:23:46 -0800
parents e7bf9e002850
children 1ded13720541
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
78
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 <style>
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 :root {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 --header-background: var(--white);
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 --header-color: rgb(var(--black));
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 --link-hover-accent: var(--awesome);
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 --social-link-hover: rgb(var(--gray-dark));
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8 .internal-links {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 width: 33%;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 .header-logo {
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
12 display: grid;
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
13 grid-template-columns: 1fr 1fr ;
78
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 align-items: center;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 header {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17 margin: auto;
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
18 padding: 1em 1em;
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
19 background: var(--header-background);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
20 color: rgb(var(--header-color));
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
21 font-family: "Atkinson", sans-serif;
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
22 box-shadow: 0 2px 8px rgba(var(--black), 5%);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
23 width: 720px;
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
24 max-width: calc(100% - 2em);
78
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 h2 {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 margin: 0;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 font-size: 1em;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 h2 a,
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 h2 a.active {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 text-decoration: none;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 .social-links,
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 .social-links a {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 display: flex;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38 .social-links a {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 text-decoration: none;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 .social-links a:hover {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 color: rgb(var(--social-link-hover));
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 @media (max-width: 720px) {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 .social-links {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 display: none;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 }
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
48 .internal-links {
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
49 width: 45%;
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
50 }
78
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 }
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 #themeToggle {
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53 background: var(--header-background);
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 display: flex;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 align-items: center;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 border-radius: 25px;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57 cursor: pointer;
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58 }
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
59
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
60 /* Dark Mode toggles */
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
61 :is(html.dark, @media (prefers-color-scheme: dark) { html }) img {
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
62 -webkit-filter: grayscale(1);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
63 filter: grayscale(1);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
64 }
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
65 :is(html.light-mode, @media (prefers-color-scheme: dark) { html }) img {
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
66 -webkit-filter: brightness(2.9) grayscale(1);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
67 filter: brightness(2.9) grayscale(1);
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
68 }
78
June Park <parkjune1995@gmail.com>
parents:
diff changeset
69 </style>
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
70 <header>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
71 <h2 class="header-logo">
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
72 <div id="themeToggle">
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
73 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
74 </div>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
75 <a href="/">MrJuneJune</a>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
76 </h2>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
77 </header>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
78 <script src="index.js"></script>
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 78
diff changeset
79