kayomn
/
kayomn.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve site layout and formatting

This commit is contained in:
kayomn 2024-06-24 12:09:14 +01:00
parent 9e1678b810
commit 65a04270e9
4 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/base.css
View File

@ -33,7 +33,7 @@ body {
overflow-y: scroll;
}
body header {
body nav {
display: flex;
background: #EEE;
padding: 5px 30px;
@ -88,13 +88,13 @@ body .columns > *:not(:last-child) {
background: #111;
}
body header {
body nav {
background: #0C0C0C;
}
}
@media (orientation: portrait), (max-width: 900px) {
body header {
body nav {
justify-content: center;
}
}

36
templates/base.html
View File

@ -9,14 +9,46 @@
</head>
<body>
<header><a href="/"><img src="/logo.png" /></a></header>
<nav><a href="/"><img src="/logo.png" /></a></nav>
<main style="min-height: 700px;">
<main style="min-height: 700px;" class="columns">
<div style="min-width: 70%;">
{% block content %}{% endblock content %}
</div>
<div style="min-width: 30%;">
<h1>Projects</h1>
<div id="git-feed"></div>
</div>
</main>
<footer>
<span>Website written by <a href="https://sauce.pizzawednes.day/kayomn/kayomn.net">Me</a> and powered by the <a href="https://www.getzola.org/">Zola</a> site generation tool.</span>
</footer>
</body>
<script type="module">
import {fetchRepos} from "/scripts/gitea.js"
window.addEventListener("load", async () => {
const feed = document.getElementById("git-feed")
fetchRepos("kayomn").catch(reason => {
console.warn(reason)
feed.innerHTML = `<div style="font-style: italic;">Feed unavailable at this time.</div>`
}).then(repos => {
const htmlBlocks = []
for (const repo of repos.sort((a, b) => (b.stars_count - a.stars_count))) {
if (!repo.fork) htmlBlocks.push(`<div style="animation: slide-up 0.4s ease; margin: 15px 0;">
<a class="subtitle" href="${repo.html_url}">${repo.name}</a>
<div>${repo.description || `<span style="font-style: italic;">No description.</span>`}</div>
</div>`)
}
feed.innerHTML = htmlBlocks.join("\n")
})
})
</script>
</html>

104
templates/index.html
View File

@ -78,11 +78,6 @@
</div>
{% endfor %}
</div>
<div style="min-width: 30%;">
<div>Here's what I'm working on over at my <a href="https://sauce.pizzawednes.day/kayomn">Gitea instance</a>.</div>
<div id="git-feed"></div>
</div>
</div>
<style>
@ -121,70 +116,45 @@
</style>
<script type="module">
const slideshowIntervalSeconds = 5;
const slideshowIntervalSeconds = 5;
window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow");
window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow");
for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) {
continue;
for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) {
continue;
}
let slideIndex = 0;
let intervalId;
const startSlideshow = () => {
intervalId = setInterval(() => {
let children = slideshow.children;
slideIndex = (slideIndex + 1) % children.length;
for (let index = 0; index < children.length; index += 1) {
children[index].style.display = (index === slideIndex) ? "block" : "none";
}
}, slideshowIntervalSeconds * 1000);
};
slideshow.addEventListener("mouseenter", () => {
clearInterval(intervalId);
});
slideshow.addEventListener("mouseleave", startSlideshow);
let children = slideshow.children;
children[0].style.display = "block";
for (let index = 1; index < children.length; index += 1) {
children[index].style.display = "none";
}
startSlideshow();
}
let slideIndex = 0;
let intervalId;
const startSlideshow = () => {
intervalId = setInterval(() => {
let children = slideshow.children;
slideIndex = (slideIndex + 1) % children.length;
for (let index = 0; index < children.length; index += 1) {
children[index].style.display = (index === slideIndex) ? "block" : "none";
}
}, slideshowIntervalSeconds * 1000);
};
slideshow.addEventListener("mouseenter", () => {
clearInterval(intervalId);
});
slideshow.addEventListener("mouseleave", startSlideshow);
let children = slideshow.children;
children[0].style.display = "block";
for (let index = 1; index < children.length; index += 1) {
children[index].style.display = "none";
}
startSlideshow();
}
});
</script>
<script type="module">
import {fetchRepos} from "/scripts/gitea.js"
window.addEventListener("load", async () => {
const feed = document.getElementById("git-feed")
fetchRepos("kayomn").catch(reason => {
console.warn(reason)
feed.innerHTML = `<div style="font-style: italic;">Feed unavailable at this time.</div>`
}).then(repos => {
const htmlBlocks = []
for (const repo of repos.sort((a, b) => (b.stars_count - a.stars_count))) {
if (!repo.fork) htmlBlocks.push(`<div style="animation: slide-up 0.4s ease; margin: 15px 0;">
<a class="subtitle" href="${repo.html_url}">${repo.name}</a>
<div>${repo.description || `<span style="font-style: italic;">No description.</span>`}</div>
</div>`)
}
feed.innerHTML = htmlBlocks.join("\n")
})
})
});
</script>
{% endblock content %}

4
templates/page.html
View File

@ -1,10 +1,10 @@
{% extends "base.html" %}
{% block content %}
<div class="banner">
<header class="banner">
<div>{{ page.title }}</div>
<div>{{ page.description }}</div>
</div>
</header>
<article>{{ page.content | safe }}</article>
{% endblock content %}