Nikology/nikology.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikology
2026-04-20 23:16:54 +02:00
parent 1d8c130019
commit 28ca13fdea
5 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+17 -10
View File
@@ -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");
pages/about.html
+1 -9
View File
@@ -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>
<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>
pages/error.html
+1 -2
View File
@@ -1,2 +1 @@
<h2>Something went wrong</h2>
<p>Error code: <span id="error-code">---</span></p>
<h1><span id="error-code">---</span></h1>
pages/home.html
-9
View File
@@ -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
+17 -2
View File
@@ -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 */