nnwhen/nnwhen.com
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

header heavy refactor

Browse source
This commit is contained in:
NNWHEN 2025-01-21 22:22:17 +02:00
parent 7e6c0d4b1d
commit a2fc452d20
31 changed files with 749 additions and 725 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
archive.html
View file

@ -91,15 +91,15 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="index.html">home</a> <a aria-label="Go Back to Homepage" href="index.html">home</a>
</li> </li>
<li> <li>
<a aria-label="Listen to my music" href="sound-design.html" <a aria-label="Listen to my music" href="sound-design.html">music</a>
>music</a
>
</li> </li>
<div aria-hidden="true" id="whitespace"></div> <div aria-hidden="true" id="whitespace"></div>
<li aria-hidden="true" id="here"> <li aria-hidden="true" id="here">
@ -110,7 +110,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

9
artwork.html
View file

@ -88,15 +88,15 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="index.html">home</a> <a aria-label="Go Back to Homepage" href="index.html">home</a>
</li> </li>
<li> <li>
<a aria-label="Listen to my music" href="sound-design.html" <a aria-label="Listen to my music" href="sound-design.html">music</a>
>music</a
>
</li> </li>
<div aria-hidden="true" id="whitespace"></div> <div aria-hidden="true" id="whitespace"></div>
<li id="parent"> <li id="parent">
@ -111,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/2024-08-18-review-redemption-tour-klein.html
View file

@ -98,7 +98,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -121,7 +123,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/2024-09-28-about-me.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/2025-01-12-2024-music-retrospective.html
View file

@ -96,7 +96,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -119,7 +121,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/2025-01-19-new-poetry.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/blog-post-template.html
View file

@ -89,7 +89,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -112,7 +114,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/index.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/music-recommendations.html
View file

@ -90,7 +90,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -113,7 +115,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/music-review-template.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
blog/pieces-of-me-in-magnetic-form.html
View file

@ -95,7 +95,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -118,7 +120,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

10
index.html
View file

@ -104,15 +104,15 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li aria-hidden="true" id="here"> <li aria-hidden="true" id="here">
<a tabindex="-1" aria-hidden="true" href="#">home</a> <a tabindex="-1" aria-hidden="true" href="#">home</a>
</li> </li>
<li id="music"> <li id="music">
<a aria-label="Listen to my music" href="sound-design.html" <a aria-label="Listen to my music" href="sound-design.html">music</a>
>music</a
>
<picture aria-hidden="true" id="arrow"> <picture aria-hidden="true" id="arrow">
<source srcset="res/img-home-dothis.avif" type="image/avif" /> <source srcset="res/img-home-dothis.avif" type="image/avif" />
<source srcset="res/img-home-dothis.webp" type="image/webp" /> <source srcset="res/img-home-dothis.webp" type="image/webp" />
@ -132,7 +132,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<main id="hero"> <main id="hero">
<section id="hero-headshot"> <section id="hero-headshot">
<picture> <picture>

5
poetry/an-obsidian.html
View file

@ -83,7 +83,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -106,7 +108,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/blackened-dust.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/brazen-word-token-i.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/cave-in.html
View file

@ -83,7 +83,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -106,7 +108,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/crackle.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/destroy-the-map.html
View file

@ -92,7 +92,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -115,7 +117,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/i-am-art.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/index.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/inspiring.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/into-the-dunes.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/oneironaut.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/our-lovely-sun.html
View file

@ -100,7 +100,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -123,7 +125,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/red-and-purple-and-amber-and-black.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/stars.html
View file

@ -95,7 +95,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -118,7 +120,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/theres-love-to-be-found-there.html
View file

@ -89,7 +89,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -112,7 +114,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/this-will-destroy-you.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
poetry/you-remind-me-of-it.html
View file

@ -86,7 +86,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="../index.html">home</a> <a aria-label="Go Back to Homepage" href="../index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

5
sound-design.html
View file

@ -88,7 +88,9 @@
</picture> </picture>
</a> </a>
</div> </div>
<nav> </header>
<nav id="navigation">
<ul> <ul>
<li> <li>
<a aria-label="Go Back to Homepage" href="index.html">home</a> <a aria-label="Go Back to Homepage" href="index.html">home</a>
@ -109,7 +111,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<aside id="socials"> <aside id="socials">
<a <a

71
style.css
View file

@ -127,7 +127,7 @@ a:hover {
/* Banner */ /* Banner */
header { header {
position: relative; position: relative;
margin: 18px 0 40px 0; margin-top: 24px;
} }
#header-img-group-banner img { #header-img-group-banner img {
width: 100%; width: 100%;
@ -144,22 +144,23 @@ header {
right: 0; right: 0;
margin: auto; margin: auto;
height: 160px; height: 140px;
width: 180px; width: 160px;
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
background-color: var(--background); background-color: var(--background);
z-index: 0;
} }
/* NavList */ /* NavList */
header nav { #navigation {
position: absolute;
width: 100%; width: 100%;
bottom: -5px; margin: -25px auto 25px auto;
} }
header nav ul { #navigation ul {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -174,44 +175,42 @@ header nav ul {
font-size: 22px; font-size: 22px;
} }
header nav ul li { #navigation ul li {
position: relative; position: relative;
padding: 2px 0; padding: 2px 0;
-webkit-box-flex: 1; flex-wrap: wrap;
-ms-flex-positive: 1; width: calc(100% / 5);
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
list-style: none; list-style: none;
} }
header nav #whitespace { #navigation #whitespace {
-webkit-box-flex: 1; width: calc(100% / 5);
-ms-flex-positive: 1;
flex-grow: 1;
} }
header nav li#here a { #navigation li#here a {
cursor: not-allowed; cursor: not-allowed;
background-color: var(--accent-2); background-color: var(--accent-2);
color: var(--background); color: var(--background);
text-decoration: line-through; text-decoration: line-through;
} }
header nav li#parent a { #navigation li#parent a {
background-color: var(--accent-2); background-color: var(--accent-2);
color: var(--background); color: var(--background);
} }
header nav li#parent a::after { #navigation li#parent a::after {
content: "*"; content: "*";
} }
header nav li#parent a:hover { #navigation li#parent a:hover {
background-color: var(--max-1) !important; background-color: var(--max-1) !important;
} }
header nav li a { #navigation li a {
padding: 2px 10px; padding: 2px 10px;
color: var(--accent-2); color: var(--accent-2);
background-color: var(--max-0); background-color: var(--max-0);
} }
header nav li:not(#here) a:hover { #navigation li:not(#here) a:hover {
color: var(--background); color: var(--background);
background-color: var(--accent-2); background-color: var(--accent-2);
} }
@ -227,6 +226,8 @@ header nav li:not(#here) a:hover {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: row; -ms-flex-direction: row;
@ -234,10 +235,10 @@ header nav li:not(#here) a:hover {
-webkit-box-pack: space-evenly; -webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly; -ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
margin: 25px 0;
} }
#socials img { #socials img {
width: 40px; width: 40px;
margin: auto 20px;
} }
#socials a { #socials a {
-webkit-transition: ease-in-out 100ms; -webkit-transition: ease-in-out 100ms;
@ -265,26 +266,27 @@ header nav li:not(#here) a:hover {
@media only screen and (max-width: 790px) { @media only screen and (max-width: 790px) {
header { header {
margin: 18px 0 80px 0; margin-top: 18px;
} }
header nav { #navigation {
position: absolute; margin: 5px auto;
bottom: -50px;
} }
header nav ul li a img { #navigation ul li {
display: block; min-width: 91px;
margin: 10px auto;
flex-grow: 1;
flex-wrap: wrap;
} }
#header-img-group-banner img { #header-img-group-banner img {
height: 50px; height: 50px;
} }
#header-img-group-logo img { #header-img-group-logo img {
height: 100px; height: 80px;
width: 120px; width: 100px;
} }
#whitespace, #whitespace,
#arrow, #arrow {
#here {
display: none; display: none;
} }
li#music:not(#here) a { li#music:not(#here) a {
@ -442,7 +444,7 @@ footer#free {
/* asset layouts */ /* asset layouts */
.ly-sect { .ly-sect {
margin: 40px 0; margin: 20px auto;
} }
.ly-sect > h1 { .ly-sect > h1 {
position: relative; position: relative;
@ -457,7 +459,7 @@ footer#free {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
width: min(95%, 2000px); width: min(95%, 2000px);
margin: 10px auto; margin: auto;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
@ -497,9 +499,6 @@ footer#free {
-o-transition: ease-in-out 100ms; -o-transition: ease-in-out 100ms;
transition: ease-in-out 100ms; transition: ease-in-out 100ms;
} }
.ly-sect.ly-square {
margin: 40px 0;
}
.ly-sect.ly-square > h1 { .ly-sect.ly-square > h1 {
display: inline-block; display: inline-block;
margin: 20px 20% 0 20%; margin: 20px 20% 0 20%;