commit ccbfbd0d7c495ec9ff570f9ccfe813ba1b04b15a
parent 498c1ec5477a5b860c15f38496ff75d69c2892ee
Author: Willem Van Zwol <willem@vanzwol.com>
Date: Sun, 10 May 2026 18:41:51 -0700
nav bar update
Diffstat:
4 files changed, 53 insertions(+), 24 deletions(-)
diff --git a/.gitignore b/.gitignore
diff --git a/icons/git.svg b/icons/git.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,.37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,.08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
-</svg>
diff --git a/index.html b/index.html
@@ -8,25 +8,41 @@
</head>
<body>
<nav>
- <!-- LEFT HAND SIDE -->
- <a href="./index.html">index</a> ~
- <a href="">blog</a> ~
- <a href="">git</a> ~
- <a href="">contact</a>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="./index.html">index</a> ~
+ <a href="">blog</a> ~
+ <a href="">projects</a> ~
+ <a href="">contact</a>
+ </div>
- <!-- RIGHT HAND SIDE -->
- <a href=""><img src="./icons/git.svg" alt="git" style="width: 1em" /></a>
- <input type="checkbox" id="theme-toggle" class="toggle">
- <label for="theme-toggle" class="btn">
- <!-- sun -->
- <svg class="sun" viewBox="0 0 24 24">
- <path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-16h1v3h-1zm0 17h1v3h-1zM4.22 5.64l.71-.71 2.12 2.12-.7.7zm12.73 12.73.7-.7 2.12 2.12-.7.7zM2 11h3v1H2zm17 0h3v1h-3zM4.22 18.36l2.12-2.12.7.7-2.11 2.12zm12.73-12.73 2.12-2.12.7.7-2.11 2.12z"/>
- </svg>
- <!-- moon -->
- <svg class="moon" viewBox="0 0 24 24">
- <path d="M21 12.79A9 9 0 0 1 11.21 3c0-.34.02-.67.05-1A10 10 0 1 0 22 12c-.33.05-.66.07-1 .07z"/>
- </svg>
- </label>
+ <!-- CENTER -->
+ <div class="nav-center">
+ willem.vanzwol.com
+ </div>
+
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width: 0.85em; position: relative; top: 0.06em; fill: var(--text)">
+ <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,.37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,.08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
+ </svg>
+ </a>
+
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24">
+ <path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-16h1v3h-1zm0 17h1v3h-1zM4.22 5.64l.71-.71 2.12 2.12-.7.7zm12.73 12.73.7-.7 2.12 2.12-.7.7zM2 11h3v1H2zm17 0h3v1h-3zM4.22 18.36l2.12-2.12.7.7-2.11 2.12zm12.73-12.73 2.12-2.12.7.7-2.11 2.12z"/>
+ </svg>
+
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24">
+ <path d="M21 12.79A9 9 0 0 1 11.21 3c0-.34.02-.67.05-1A10 10 0 1 0 22 12c-.33.05-.66.07-1 .07z"/>
+ </svg>
+ </label>
+ </div>
</nav>
<h1>Hello, I am Willem :3</h1>
diff --git a/styles.css b/styles.css
@@ -197,16 +197,33 @@ a {
text-decoration: none;
}
+
nav {
- font-family: "Nimbus Mono L", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- margin: 0;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+}
+.nav-left {
+ justify-self: start;
display: flex;
align-items: center;
gap: 1ch;
flex-wrap: wrap;
}
+.nav-center {
+ justify-self: center;
+}
+
+.nav-right {
+ justify-self: end;
+
+ display: flex;
+ align-items: center;
+ gap: 1ch;
+}
+
/* toggle */
.toggle {
display: none;
@@ -233,7 +250,6 @@ nav {
/* default = system light assumed */
.sun {
- fill: currentColor;
opacity: 1;
}
