From 28ca13fdeac11fc36f94032d996020ca3e02ef83 Mon Sep 17 00:00:00 2001
From: Nikology <contact@nikology.dev>
Date: Mon, 20 Apr 2026 23:16:54 +0200
Subject: [PATCH] Fix the footer so its like not part of the thing app and can
 work on its own, STRONG FOOTER FOREVER

---
 index.html       | 27 +++++++++++++++++----------
 pages/about.html | 10 +---------
 pages/error.html |  3 +--
 pages/home.html  |  9 ---------
 styles.css       | 19 +++++++++++++++++--
 5 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index e232337..ec0ebf7 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,8 @@
         <a href="/" data-link>Home</a>
         <span>-</span>
         <a href="/about" data-link>About</a>
-        <!-- <span>-</span>
-        <a href="">Test</a> -->
+        <span>-</span>
+        <a href="/photography" data-link>Photography</a>
     </nav>
 
     <div id="app"></div>
@@ -49,15 +49,15 @@
         <li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
     </ul> -->
 
-    <!-- <footer>
-        <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
+    <footer>
+        <p class="birdSoundCredit">Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
         <p>
             <a href="https://gitlab.com/Nikology/nikology.dev">
                 Page Source
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
             </a>
         </p>
-    </footer> -->
+    </footer>
 
     <!-- Scripts -->
     <script>
@@ -85,17 +85,23 @@
             document.body.classList.toggle('home', path === '/');
             const file = `/pages${path === '/' ? '/home' : path}.html`;
 
+            document.querySelectorAll('nav a').forEach(a => {
+                a.classList.toggle('active', a.pathname === location.pathname);
+            })
+
             return await loadApp(file);
         }
 
         async function commit(appFile) {
-            if (appFile.content) {
+            if (appFile.content !== null) {
                 document.getElementById('app').innerHTML = appFile.content;
             } else {
                 const errorResult = await loadApp('/pages/error.html');
                 document.getElementById('app').innerHTML = errorResult.content;
                 document.getElementById('error-code').textContent = appFile.status;
             }
+
+            document.body.classList.toggle('homeCommitted' , location.pathname === '/')
         }
 
         async function navigate() {
@@ -110,23 +116,24 @@
                 if (link.pathname === location.pathname) return;
                 history.pushState(null, '', link.href);
                 
-                const currentApp = document.getElementById('app');
-                currentApp.classList.add('fading');
+                document.body.classList.add('fading');
 
                 const fetchedApp = fetchApp();
 
                 await new Promise(r => setTimeout(r, 300));
                 await commit(await fetchedApp);
-                currentApp.classList.remove('fading')
+                document.body.classList.remove('fading')
             }
         });
 
-        
         window.addEventListener('popstate', navigate);
         navigate().then(() => {
              requestAnimationFrame(() => document.body.classList.add('ready'))
         });
+
+
        
+        // Bird Button
         const DISTANCE = 40
         const birdIcon = document.getElementById("birdButton");
         const birdSound = new Audio("SnowBuntingSound.ogg");
diff --git a/pages/about.html b/pages/about.html
index 916b96d..d0dddaf 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,10 +1,2 @@
 <h1>About</h1>
-<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
-<footer>
-    <p>
-        <a href="https://gitlab.com/Nikology/nikology.dev">
-            Page Source
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
-        </a>
-    </p>
-</footer>
\ No newline at end of file
+<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
\ No newline at end of file
diff --git a/pages/error.html b/pages/error.html
index a5b48f6..9665f28 100644
--- a/pages/error.html
+++ b/pages/error.html
@@ -1,2 +1 @@
-<h2>Something went wrong</h2>
-<p>Error code: <span id="error-code">---</span></p>
\ No newline at end of file
+<h1><span id="error-code">---</span></h1>
\ No newline at end of file
diff --git a/pages/home.html b/pages/home.html
index 656e5b3..e69de29 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -1,9 +0,0 @@
-<footer>
-    <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
-    <p>
-        <a href="https://gitlab.com/Nikology/nikology.dev" target="_blank" rel="noopener">
-            Page Source
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
-        </a>
-    </p>
-</footer>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 760abe5..da81fdb 100644
--- a/styles.css
+++ b/styles.css
@@ -58,7 +58,8 @@ body:not(.home) #hero {
     transition: opacity 0.3s;
 }
 
-#app.fading {
+body.fading #app,
+body.fading footer {
     opacity: 0;
 }
 
@@ -72,13 +73,19 @@ nav {
 nav a {
     color: #3d2f1f99;
     text-decoration: none;
-    transition: color 0.5s;
+    transition: color 0.5s, -webkit-text-stroke-width 0.5s;
 }
 
 nav a:hover {
     color: #3d2f1f;
 }
 
+nav a.active {
+    -webkit-text-stroke-width: 1px;
+}
+
+/* Other */
+
 h1 {
     margin-bottom: 1rem;
 }
@@ -118,6 +125,7 @@ footer {
     left: 1rem;
     font-size: 0.8rem;
     gap: 1rem;
+    transition: opacity 0.3s;
 }
 
 footer p {
@@ -141,6 +149,10 @@ footer svg {
     fill: currentColor;
 }
 
+body:not(.homeCommitted) .birdSoundCredit {
+    display: none;
+}
+
 /* Corner Ribbon */
 
 .ribbon {
@@ -154,6 +166,9 @@ footer svg {
     top: 2rem;
     left: -3rem;
     width: 12rem;
+
+    outline: 2px dashed #faf4e8;
+    outline-offset: -4px;
 }
 
 /* Birdy */