n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A bunch of stuff

Browse Source
This commit is contained in:
Nathan Upchurch
2025-11-09 20:57:49 -06:00
parent 9327ca3a43
commit 0263c1de66
18 changed files with 347 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
_includes/footer.njk
View File

@@ -1,8 +1,4 @@
<footer>
<a href="https://notbyai.fyi/">
<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
</a>
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
{% if metadata.webrings %}<br>
@@ -15,6 +11,11 @@
{% endfor %}
{% endif %}
<a href="/sitemap/">Sitemap</a>
<a href="/special/flying-toasters" style="color: var(--background-color); text-decoration: none;">Fly</a>
</p>
<div id="buttonsAndStuffContainer">
<a href="https://notbyai.fyi/">
<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
</a>
{% include "siteSettings.njk" %}
</div>
</footer>

2
_includes/header.njk
View File

@@ -5,7 +5,7 @@
class="home-link">
<img
class="logo"
src="{{ metadata.logo }}"
src="{% if metadata.holidayLogo %}{{ metadata.holidayLogo }}{% else %}{{ metadata.logo }}{% endif %}"
alt="{{ metadata.title }}">
</a>
{% if not hideNav %}{% include "nav.njk" %}{% endif %}

1
_includes/layouts/base.njk
View File

@@ -16,5 +16,6 @@
</section>
</main>
{% include "footer.njk" %}
{% include "weather.njk" %}
</body>
</html>

20
_includes/siteSettings.njk Normal file
View File

@@ -0,0 +1,20 @@
<style>
#siteSettingsContainer {
& button:not(#settingsDone) {
margin-top: 0;
}
}
</style>
<script>
const settingsModal = document.getElementById("siteSettings");
</script>
<div id="siteSettingsContainer">
<button onclick="siteSettings.showModal();">Site Settings</button>
<dialog id="siteSettings">
<h2>Site Settings</h2>
{% include "weatherController.njk" %}
<button id="settingsDone" onclick="siteSettings.close();">Done</button>
</dialog>
</div>

172
_includes/weather.njk Normal file
View File

@@ -0,0 +1,172 @@
<!-- weather -->
<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
<style>
.fallingObject {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
@keyframes fallingObjects-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes fallingObjects-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.fallingObject {
position: fixed;
top: -10%;
z-index: 9999;
user-select: none;
cursor: default;
animation-name: fallingObjects-fall, fallingObjects-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.fallingObject:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
& > div {
transform: rotate(45deg);
}
}
.fallingObject:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
& > div {
transform: rotate(10deg);
}
}
.fallingObject:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 0.5s;
& > div {
transform: rotate(60deg);
}
}
.fallingObject:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
& > div {
transform: rotate(84deg);
}
}
.fallingObject:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
& > div {
transform: rotate(267deg);
}
}
.fallingObject:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
& > div {
transform: rotate(200deg);
}
}
.fallingObject:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
& > div {
transform: rotate(20deg);
}
}
.fallingObject:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
& > div {
transform: rotate(78deg);
}
}
.fallingObject:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
& > div {
transform: rotate(3120deg);
}
}
.fallingObject:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
& > div {
transform: rotate(123deg);
}
}
</style>
<div class="fallingObjects" id="weather" aria-hidden="true">
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
</div>
<script>
const weather = document.getElementById("weather");
const weatherToggle = document.getElementById("weatherToggle");
const weatherPreference = localStorage.getItem("weather");
// Initial weather preference check on page load
if (weatherPreference == 0) {
weather.classList.add("hidden");
weatherToggle.checked = false;
} else {
weather.classList.remove("hidden");
weatherToggle.checked = true;
};
// Handle weather setting toggle
weatherToggle.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem("weather", 1);
weather.classList.remove("hidden");
} else {
localStorage.setItem("weather", 0);
weather.classList.add("hidden");
};
});
</script>
<!-- /weather -->

30
_includes/weatherController.njk Normal file
View File

@@ -0,0 +1,30 @@
<style>
#weatherController {
color: var(--text-color);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
font-family: var(--font-family-ui);
& label {
display: inline;
}
& input {
accent-color: var(--contrast-color);
background-color: var(--background-color);
border: var(--border-details);
border-color: var(--contrast-color);
border-radius: var(--border-radius);
color: var(--text-color);
&:focus {
box-shadow: 0 0 0 2px var(--contrast-color);
outline: none;
}
}
}
</style>
<form id="weatherController">
<input type="checkbox" id="weatherToggle" checked />
<label for="weatherToggle">Show weather?</label>
</form>