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

36
templates/base.html
View File

@ -9,14 +9,46 @@
</head> </head>
<body> <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 %} {% block content %}{% endblock content %}
</div>
<div style="min-width: 30%;">
<h1>Projects</h1>
<div id="git-feed"></div>
</div>
</main> </main>
<footer> <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> <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> </footer>
</body> </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> </html>

104
templates/index.html
View File

@ -78,11 +78,6 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </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> </div>
<style> <style>
@ -121,70 +116,45 @@
</style> </style>
<script type="module"> <script type="module">
const slideshowIntervalSeconds = 5; const slideshowIntervalSeconds = 5;
window.addEventListener("load", async () => { window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow"); let slideshows = document.getElementsByClassName("slideshow");
for (let slideshow of slideshows) { for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) { if (!slideshow.hasChildNodes()) {
continue; 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> </script>
{% endblock content %} {% endblock content %}

4
templates/page.html
View File

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