Fix the footer so its like not part of the thing app and can work on its own, STRONG FOOTER FOREVER

index.html

@@ -35,8 +35,8 @@
         <a href="/" data-link>Home</a>
         <span>-</span>
         <a href="/about" data-link>About</a>
-        <!-- <span>-</span>
+        <span>-</span>
-        <a href="">Test</a> -->
+        <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>
+    <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 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');
+                document.body.classList.add('fading');
-                currentApp.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");

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>
+<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>

pages/error.html

@@ -1,2 +1 @@
-<h2>Something went wrong</h2>
+<h1><span id="error-code">---</span></h1>
-<p>Error code: <span id="error-code">---</span></p>

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>

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 */