mirror of
https://github.com/kittywitch/dork.dev.git
synced 2026-02-09 23:29:17 -08:00
deploy: 3b1c786fd6
This commit is contained in:
kittywitch
parent
98c6d1e2ba
commit
50d2f16b35
11 changed files with 169 additions and 99 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,24 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
{% include "love.html" %}
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ config.extra.site_title }}</title>
|
||||
{% include "head.html" %}
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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" %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
{% include "header.html" %}
|
||||
</header>
|
||||
<main>
|
||||
{% block content %} {% endblock content %}
|
||||
</main>
|
||||
<footer>
|
||||
{% include "footer.html" %}
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<header>
|
||||
{% include "header.html" %}
|
||||
</header>
|
||||
<main>
|
||||
{% block content %} {% endblock content %}
|
||||
</main>
|
||||
<footer>
|
||||
{% include "footer.html" %}
|
||||
</footer>
|
||||
</div>
|
||||
{% include "nonoscript.html" %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base-section-title.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<section id="blogposts">
|
||||
|
|
|
|||
74
templates/colorscheme.html
Normal file
74
templates/colorscheme.html
Normal 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 -->
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
<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>
|
||||
{% include "colorscheme.html" %}
|
||||
|
||||
<h1><a href="/">{{ config.extra.site_title }}</h1>
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% 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">
|
||||
<h2>About</h2>
|
||||
|
||||
|
|
@ -21,23 +11,29 @@
|
|||
<h2>Interests</h2>
|
||||
|
||||
<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>Smart Home Projects</li>
|
||||
<li>Software-defined Radio</li>
|
||||
<li>Amateur Radio (not yet licensed!)</li>
|
||||
<li>Firearms</li>
|
||||
<li>Anime and Manga</li>
|
||||
<li>Cyber Security</li>
|
||||
<li>3D Printing</li>
|
||||
<li>Mechanical Keyboards</li>
|
||||
</ul>
|
||||
</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">
|
||||
<h2>Projects</h2>
|
||||
|
||||
|
|
|
|||
3
templates/love.html
Normal file
3
templates/love.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<!--
|
||||
Made with love by @kittywitch ^_^
|
||||
-->
|
||||
30
templates/nonoscript.html
Normal file
30
templates/nonoscript.html
Normal 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 -->
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base-page-title.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue