kat/dork.dev
1
0
Fork 0
mirror of https://github.com/kittywitch/dork.dev.git synced 2026-02-09 23:29:17 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: cleanup

Browse source
This commit is contained in:
Kat Inskip 2025-10-08 12:37:06 -07:00
parent 57361be9e3
commit 3b1c786fd6
Signed by: kat
GPG key ID: 465E64DECEA8CF0F
11 changed files with 173 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

26
sass/stylesheet.scss
View file

@ -1,3 +1,7 @@
/*
Made with love by @kittywitch ^_^
*/
$light-bg: #fcfcfc; $light-bg: #fcfcfc;
$light-fg: #333; $light-fg: #333;
$light-heading: #111; $light-heading: #111;
@ -13,7 +17,11 @@ $link-visited: #3784e8;
} }
html { html {
font-family: "Monaspace Krypton", monospace; color: $dark-fg;
background: $dark-bg;
h1, h2, h3 {
color: $dark-heading;
}
} }
body { body {
@ -27,6 +35,11 @@ body {
padding: 1em; padding: 1em;
} }
/* A kindness to those of you who don't use Javascript */
.nonoscript {
display: none;
}
#gallery { #gallery {
ul { ul {
list-style-type: none; list-style-type: none;
@ -98,14 +111,11 @@ footer nav ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 1fr 1fr;
column-count: 2;
gap: 0.5em 0.25em;
li { li {
padding: 0; padding: 0;
margin: 0; margin: 0;
flex-grow: 1;
&:nth-child(2n) { &:nth-child(2n) {
text-align: right; text-align: right;
} }
@ -116,20 +126,20 @@ footer nav ul {
html { html {
color: $dark-fg; color: $dark-fg;
background: $dark-bg; background: $dark-bg;
}
h1, h2, h3 { h1, h2, h3 {
color: $dark-heading; color: $dark-heading;
} }
}
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
color: $light-fg; color: $light-fg;
background: $light-bg; background: $light-bg;
}
h1, h2, h3 { h1, h2, h3 {
color: $light-heading; color: $light-heading;
} }
}
} }
html:has(#color-scheme-dark:checked) { html:has(#color-scheme-dark:checked) {

24
templates/base-page-title.html
View file

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page.title }} - {{ config.extra.site_title }}</title>
{% include "head.html" %}
</head>
<body>
<div>
<header>
{% include "header.html" %}
</header>
<main>
{% block content %} {% endblock content %}
</main>
<footer>
{% include "footer.html" %}
</footer>
</div>
</body>
</html>

24
templates/base-section-title.html
View file

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ section.title }} - {{ config.extra.site_title }}</title>
{% include "head.html" %}
</head>
<body>
<div>
<header>
{% include "header.html" %}
</header>
<main>
{% block content %} {% endblock content %}
</main>
<footer>
{% include "footer.html" %}
</footer>
</div>
</body>
</html>

21
templates/base.html
View file

@ -1,13 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
{% include "love.html" %}
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>{{ config.extra.site_title }}</title> <title>
{% if section is defined and section.title is defined and section.title is string %}
{{ section.title }} -
{% elif page is defined and page.title is defined and page.title is string %}
{{ page.title }} -
{% endif %}
{{ config.extra.site_title }}
</title>
{% include "head.html" %} {% include "head.html" %}
</head> </head>
<body> <body>
<div> <div>
<header> <header>
{% include "header.html" %} {% include "header.html" %}
@ -19,6 +29,7 @@
{% include "footer.html" %} {% include "footer.html" %}
</footer> </footer>
</div> </div>
</body> {% include "nonoscript.html" %}
</body>
</html> </html>

2
templates/blog.html
View file

@ -1,4 +1,4 @@
{% extends "base-section-title.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<section id="blogposts"> <section id="blogposts">

74
templates/colorscheme.html Normal file
View file

@ -0,0 +1,74 @@
<!-- Component for persistent user color scheme selection -->
<!--
Motivation:
* Allow for auto-detection via prefers-color-scheme
* Allow for providing a color scheme by user preference anyway
* Fail (relatively) quietly without Javascript
Other parts of the implementation:
```scss
/* Ideally, you use CSS/SCSS variables for colouring here */
html {
/* Choose one to default to; light or dark and implement it here */
}
@media (prefers-color-scheme: dark) {
html {
/* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
}
}
@media (prefers-color-scheme: light) {
html {
/* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
}
}
html:has(#color-scheme-dark:checked) {
/* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
}
html:has(#color-scheme-light:checked) {
/* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
}
```
-->
<fieldset class="nonoscript">
<legend>Site color scheme</legend>
<input name="color-scheme" type="radio" id="color-scheme-dark" value="dark">
<label for="color-scheme-dark">Dark</label>
<input name="color-scheme" type="radio" id="color-scheme-light" value="light">
<label for="color-scheme-light">Light</label>
<button
id="clear-color-scheme"
type="button"
title="Will also revert the page back to the color scheme preference as provided by the system and browser."
>
Clear preference
</button>
</fieldset>
<noscript>Persistence of user-selected color scheme is not possible without Javascript, however automatic detection from CSS will still work.</noscript>
<script>
var radios = document.getElementsByName("color-scheme");
var prev = localStorage.getItem("color-scheme");
for (var i = 0; i < radios.length; i++) {
var _this = radios[i];
_this.checked = _this.value == prev;
radios[i].addEventListener("change", function() {
if (this.value !== prev) {
prev = this.value;
localStorage.setItem("color-scheme", this.value);
}
});
}
var button = document.getElementById("clear-color-scheme");
button.addEventListener("click", function() {
for (var i = 0; i < radios.length; i++) {
var _this = radios[i];
_this.checked = false;
localStorage.removeItem("color-scheme");
}
});
</script>
<!-- End of component for color scheme selection -->

5
templates/header.html
View file

@ -1,7 +1,4 @@
<input name="color-scheme" type="radio" id="color-scheme-dark" value="dark"> {% include "colorscheme.html" %}
<label for="color-scheme-dark">Dark</label>
<input name="color-scheme" type="radio" id="color-scheme-light" value="light">
<label for="color-scheme-light">Light</label>
<h1><a href="/">{{ config.extra.site_title }}</h1> <h1><a href="/">{{ config.extra.site_title }}</h1>
<nav> <nav>

30
templates/index.html
View file

@ -1,16 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<section id="todo">
<h2>Remaining website to-dos</h2>
<ul>
<li>Add theme persistency javascript with unset button</li>
<li>Hide theme buttons if javascript is disabled; rely solely on preferred color scheme</li>
<li>Make light and dark color schemes better and more interesting</li>
</ul>
</section>
<section id="about"> <section id="about">
<h2>About</h2> <h2>About</h2>
@ -21,23 +11,29 @@
<h2>Interests</h2> <h2>Interests</h2>
<ul> <ul>
<li>Software Development</li>
<li>Video game modding</li>
<li>System Administration</li>
<li>Development Operations</li>
<li>Digital Infrastructure</li>
<li>Hobbyist Electronics</li> <li>Hobbyist Electronics</li>
<li>Smart Home Projects</li>
<li>Software-defined Radio</li> <li>Software-defined Radio</li>
<li>Amateur Radio (not yet licensed!)</li> <li>Amateur Radio (not yet licensed!)</li>
<li>Firearms</li> <li>Firearms</li>
<li>Anime and Manga</li> <li>Anime and Manga</li>
<li>Cyber Security</li>
<li>3D Printing</li> <li>3D Printing</li>
<li>Mechanical Keyboards</li> <li>Mechanical Keyboards</li>
</ul> </ul>
</section> </section>
<section id="tech-interests">
<h2>Tech Interests</h2>
<ul>
<li>Software Development</li>
<li>Video Game Modding</li>
<li>System Administration</li>
<li>DevSecOps + GitOps</li>
<li>Smart Home</li>
<li>Cyber Security</li>
</ul>
</section>
<section id="projects"> <section id="projects">
<h2>Projects</h2> <h2>Projects</h2>

3
templates/love.html Normal file
View file

@ -0,0 +1,3 @@
<!--
Made with love by @kittywitch ^_^
-->

30
templates/nonoscript.html Normal file
View file

@ -0,0 +1,30 @@
<!-- Component for no-noscript; Showing an item only if you have Javascript -->
<!--
Motivation:
* Provide things with script tag related behaviour only if the user has Javascript
* If the user does not have Javascript, just don't display those elements to them
Other parts of the implementation:
* Components with scripted behaviour should be given the "nonoscript" class.
```scss
/* A kindness to those of you who don't use Javascript */
.nonoscript {
display: none;
}
```
-->
<script>
function nonoscriptImplementer() {
var nonoscript = document.getElementsByClassName("nonoscript");
console.log(nonoscript);
for (let item of nonoscript) {
console.log("meep!");
item.classList.remove("nonoscript");
}
}
window.onload = nonoscriptImplementer();
</script>
<!-- End of component for no-noscript -->

2
templates/page.html
View file

@ -1,4 +1,4 @@
{% extends "base-page-title.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<h1 class="title"> <h1 class="title">