Improve site layout and formatting
This commit is contained in:
parent
9e1678b810
commit
65a04270e9
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in New Issue