From b253c7ca47420926820bdd59b1a2580ab9fe16cd Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 08:05:20 -0800 Subject: [PATCH 1/8] feat: categories for external --- content/external/external.toml | 21 +++++++++++++++------ templates/external.html | 27 ++++++++++++++++++--------- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/content/external/external.toml b/content/external/external.toml index cf28ab7..2f55e5a 100644 --- a/content/external/external.toml +++ b/content/external/external.toml @@ -1,34 +1,43 @@ -[0-smart-questions] +[categories.written] +title = "Written" + +[categories.video] +title = "Video" +note = "If any of these videos disappear, reach out to me and I can provide you with a copy of them." + +[posts] + +[[posts.written]] title = "How To Ask Questions The Smart Way" author = "Eric S. Raymond, Rick Moen" permalink = "http://catb.org/~esr/faqs/smart-questions.html" archive = "https://archive.ph/4Nsm2" -[1-humanitys-endgame] +[[posts.written]] title = "Humanity's Endgame" author = "Henry Wismayer" permalink = "https://www.noemamag.com/humanitys-endgame/" archive = "https://archive.ph/wvnUr" -[2-if-all-the-world-were-a-monorepo] +[[posts.written]] title = "If all the world were a monorepo" author = "Julie Tibshirani" permalink = "https://jtibs.substack.com/p/if-all-the-world-were-a-monorepo" archive = "https://archive.ph/5ZOw2" -[3-microsoft-broke-my-voice] +[[posts.video]] title = "Microsoft broke my voice" author = "a_lilian" permalink = "https://www.youtube.com/watch?v=LKcT-aQuIFs" suffix = "YouTube" -[4-burn-after-watching] +[[posts.video]] title = "Burn After Watching" author = "a_lilian" permalink = "https://www.youtube.com/watch?v=-IargH0hL-s" suffix = "YouTube" -[5-lost-ephemera] +[[posts.video]] title = "Lost Ephemera - The traces we left behind" author = "a_lilian" permalink = "https://www.youtube.com/watch?v=xbg-Jjfw2Dg" diff --git a/templates/external.html b/templates/external.html index 0650686..71ecb5d 100644 --- a/templates/external.html +++ b/templates/external.html @@ -3,17 +3,26 @@ {% block content %}

Things I find value in sharing

-
{% endblock content %} From 65191fd93ce99cb1c83b20dc77a7faacae059d20 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 08:12:16 -0800 Subject: [PATCH 2/8] feat: move to using a tree --- content/external/external.toml | 74 +++++++++++++++++----------------- templates/external.html | 15 ++++--- 2 files changed, 43 insertions(+), 46 deletions(-) diff --git a/content/external/external.toml b/content/external/external.toml index 2f55e5a..52e75b3 100644 --- a/content/external/external.toml +++ b/content/external/external.toml @@ -1,44 +1,42 @@ -[categories.written] +[[categories]] +lookup = "written" title = "Written" + [[categories.posts]] + title = "How To Ask Questions The Smart Way" + author = "Eric S. Raymond, Rick Moen" + permalink = "http://catb.org/~esr/faqs/smart-questions.html" + archive = "https://archive.ph/4Nsm2" -[categories.video] + [[categories.posts]] + title = "Humanity's Endgame" + author = "Henry Wismayer" + permalink = "https://www.noemamag.com/humanitys-endgame/" + archive = "https://archive.ph/wvnUr" + + [[categories.posts]] + title = "If all the world were a monorepo" + author = "Julie Tibshirani" + permalink = "https://jtibs.substack.com/p/if-all-the-world-were-a-monorepo" + archive = "https://archive.ph/5ZOw2" + +[[categories]] +lookup = "video" title = "Video" note = "If any of these videos disappear, reach out to me and I can provide you with a copy of them." + [[categories.posts]] + title = "Microsoft broke my voice" + author = "a_lilian" + permalink = "https://www.youtube.com/watch?v=LKcT-aQuIFs" + suffix = "YouTube" -[posts] + [[categories.posts]] + title = "Burn After Watching" + author = "a_lilian" + permalink = "https://www.youtube.com/watch?v=-IargH0hL-s" + suffix = "YouTube" -[[posts.written]] -title = "How To Ask Questions The Smart Way" -author = "Eric S. Raymond, Rick Moen" -permalink = "http://catb.org/~esr/faqs/smart-questions.html" -archive = "https://archive.ph/4Nsm2" - -[[posts.written]] -title = "Humanity's Endgame" -author = "Henry Wismayer" -permalink = "https://www.noemamag.com/humanitys-endgame/" -archive = "https://archive.ph/wvnUr" - -[[posts.written]] -title = "If all the world were a monorepo" -author = "Julie Tibshirani" -permalink = "https://jtibs.substack.com/p/if-all-the-world-were-a-monorepo" -archive = "https://archive.ph/5ZOw2" - -[[posts.video]] -title = "Microsoft broke my voice" -author = "a_lilian" -permalink = "https://www.youtube.com/watch?v=LKcT-aQuIFs" -suffix = "YouTube" - -[[posts.video]] -title = "Burn After Watching" -author = "a_lilian" -permalink = "https://www.youtube.com/watch?v=-IargH0hL-s" -suffix = "YouTube" - -[[posts.video]] -title = "Lost Ephemera - The traces we left behind" -author = "a_lilian" -permalink = "https://www.youtube.com/watch?v=xbg-Jjfw2Dg" -suffix = "YouTube" + [[categories.posts]] + title = "Lost Ephemera - The traces we left behind" + author = "a_lilian" + permalink = "https://www.youtube.com/watch?v=xbg-Jjfw2Dg" + suffix = "YouTube" diff --git a/templates/external.html b/templates/external.html index 71ecb5d..d05013d 100644 --- a/templates/external.html +++ b/templates/external.html @@ -4,19 +4,18 @@

Things I find value in sharing

{% set data = load_data(path="content/external/external.toml") %} - {% for k, v in data.posts %} + {% for category in data.categories %}
- {% set cat = data.categories[k] %} -

{{ cat.title }}

- {% if cat.note is defined %} -

{{ cat.note }}

+

{{ category.title }}

+ {% if category.note is defined %} +

{{ category.note }}

{% endif %}
    - {% for kx in v %} + {% for post in category.posts %}
  • - {{ kx.title }} - {% if kx.author is defined %} by {{ kx.author }}{% endif %}{% if kx.archive is defined %} - Archive {% endif %}{% if kx.suffix is defined %} ({{ kx.suffix }}){% endif %} + {{ post.title }} + {% if post.author is defined %} by {{ post.author }}{% endif %}{% if post.archive is defined %} - Archive {% endif %}{% if post.suffix is defined %} ({{ post.suffix }}){% endif %}
    • {% endfor %} From 35f5f48cc9b4193527d7adea10c5699687785b86 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 13:42:37 -0800 Subject: [PATCH 3/8] feat: a terrifying quantity of rework --- .../framework-desktop.png | Bin .../framework-laptop.jpg | Bin .../framework-lutris.png | Bin .../framework-steam.png | Bin .../index.md} | 0 .../index.md} | 0 .../printer.jpg | Bin .../handwire-keyboard-matrix.jpg | Bin .../handwire-keyboard-mcu.jpg | Bin .../handwire-keyboard.jpg | Bin .../index.md} | 0 .../sofle-rgb-finished.jpg | Bin .../index.md} | 0 .../taimihud-billboard.png | Bin .../taimihud-cats.png | Bin .../taimihud-markers-ui.png | Bin .../taimihud-pathing.png | Bin .../taimihud-timers-ui.png | Bin .../taimihud-timers.png | Bin .../{ => 2025-06-20-taimihud}/taimihud.png | Bin content/external/_index.md | 2 +- content/external/external.toml | 28 ++-- content/writings/_index.md | 7 + content/writings/on-youtube.md | 15 ++ sass/coloring.scss | 77 ++++++++++ sass/headings.scss | 5 + sass/stylesheet.scss | 126 +++++++--------- static/nonoscript.js | 1 - templates/base.html | 2 +- templates/external.html | 2 +- templates/header.html | 3 +- templates/index.html | 141 +++++++++--------- templates/page.html | 2 +- 33 files changed, 250 insertions(+), 161 deletions(-) rename content/blog/{ => 2024-04-07-the-first-month-of-life-with-the-framework-13}/framework-desktop.png (100%) rename content/blog/{ => 2024-04-07-the-first-month-of-life-with-the-framework-13}/framework-laptop.jpg (100%) rename content/blog/{ => 2024-04-07-the-first-month-of-life-with-the-framework-13}/framework-lutris.png (100%) rename content/blog/{ => 2024-04-07-the-first-month-of-life-with-the-framework-13}/framework-steam.png (100%) rename content/blog/{2024-04-07-the-first-month-of-life-with-the-framework-13.md => 2024-04-07-the-first-month-of-life-with-the-framework-13/index.md} (100%) rename content/blog/{2024-09-14-2-months-into-my-first-3d-printer.md => 2024-09-14-2-months-into-my-first-3d-printer/index.md} (100%) rename content/blog/{ => 2024-09-14-2-months-into-my-first-3d-printer}/printer.jpg (100%) rename content/blog/{ => 2025-06-20-keyboards}/handwire-keyboard-matrix.jpg (100%) rename content/blog/{ => 2025-06-20-keyboards}/handwire-keyboard-mcu.jpg (100%) rename content/blog/{ => 2025-06-20-keyboards}/handwire-keyboard.jpg (100%) rename content/blog/{2025-06-20-keyboards.md => 2025-06-20-keyboards/index.md} (100%) rename content/blog/{ => 2025-06-20-keyboards}/sofle-rgb-finished.jpg (100%) rename content/blog/{2025-06-20-taimihud.md => 2025-06-20-taimihud/index.md} (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-billboard.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-cats.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-markers-ui.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-pathing.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-timers-ui.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud-timers.png (100%) rename content/blog/{ => 2025-06-20-taimihud}/taimihud.png (100%) create mode 100644 content/writings/_index.md create mode 100644 content/writings/on-youtube.md create mode 100644 sass/coloring.scss create mode 100644 sass/headings.scss diff --git a/content/blog/framework-desktop.png b/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-desktop.png similarity index 100% rename from content/blog/framework-desktop.png rename to content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-desktop.png diff --git a/content/blog/framework-laptop.jpg b/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-laptop.jpg similarity index 100% rename from content/blog/framework-laptop.jpg rename to content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-laptop.jpg diff --git a/content/blog/framework-lutris.png b/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-lutris.png similarity index 100% rename from content/blog/framework-lutris.png rename to content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-lutris.png diff --git a/content/blog/framework-steam.png b/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-steam.png similarity index 100% rename from content/blog/framework-steam.png rename to content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/framework-steam.png diff --git a/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13.md b/content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/index.md similarity index 100% rename from content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13.md rename to content/blog/2024-04-07-the-first-month-of-life-with-the-framework-13/index.md diff --git a/content/blog/2024-09-14-2-months-into-my-first-3d-printer.md b/content/blog/2024-09-14-2-months-into-my-first-3d-printer/index.md similarity index 100% rename from content/blog/2024-09-14-2-months-into-my-first-3d-printer.md rename to content/blog/2024-09-14-2-months-into-my-first-3d-printer/index.md diff --git a/content/blog/printer.jpg b/content/blog/2024-09-14-2-months-into-my-first-3d-printer/printer.jpg similarity index 100% rename from content/blog/printer.jpg rename to content/blog/2024-09-14-2-months-into-my-first-3d-printer/printer.jpg diff --git a/content/blog/handwire-keyboard-matrix.jpg b/content/blog/2025-06-20-keyboards/handwire-keyboard-matrix.jpg similarity index 100% rename from content/blog/handwire-keyboard-matrix.jpg rename to content/blog/2025-06-20-keyboards/handwire-keyboard-matrix.jpg diff --git a/content/blog/handwire-keyboard-mcu.jpg b/content/blog/2025-06-20-keyboards/handwire-keyboard-mcu.jpg similarity index 100% rename from content/blog/handwire-keyboard-mcu.jpg rename to content/blog/2025-06-20-keyboards/handwire-keyboard-mcu.jpg diff --git a/content/blog/handwire-keyboard.jpg b/content/blog/2025-06-20-keyboards/handwire-keyboard.jpg similarity index 100% rename from content/blog/handwire-keyboard.jpg rename to content/blog/2025-06-20-keyboards/handwire-keyboard.jpg diff --git a/content/blog/2025-06-20-keyboards.md b/content/blog/2025-06-20-keyboards/index.md similarity index 100% rename from content/blog/2025-06-20-keyboards.md rename to content/blog/2025-06-20-keyboards/index.md diff --git a/content/blog/sofle-rgb-finished.jpg b/content/blog/2025-06-20-keyboards/sofle-rgb-finished.jpg similarity index 100% rename from content/blog/sofle-rgb-finished.jpg rename to content/blog/2025-06-20-keyboards/sofle-rgb-finished.jpg diff --git a/content/blog/2025-06-20-taimihud.md b/content/blog/2025-06-20-taimihud/index.md similarity index 100% rename from content/blog/2025-06-20-taimihud.md rename to content/blog/2025-06-20-taimihud/index.md diff --git a/content/blog/taimihud-billboard.png b/content/blog/2025-06-20-taimihud/taimihud-billboard.png similarity index 100% rename from content/blog/taimihud-billboard.png rename to content/blog/2025-06-20-taimihud/taimihud-billboard.png diff --git a/content/blog/taimihud-cats.png b/content/blog/2025-06-20-taimihud/taimihud-cats.png similarity index 100% rename from content/blog/taimihud-cats.png rename to content/blog/2025-06-20-taimihud/taimihud-cats.png diff --git a/content/blog/taimihud-markers-ui.png b/content/blog/2025-06-20-taimihud/taimihud-markers-ui.png similarity index 100% rename from content/blog/taimihud-markers-ui.png rename to content/blog/2025-06-20-taimihud/taimihud-markers-ui.png diff --git a/content/blog/taimihud-pathing.png b/content/blog/2025-06-20-taimihud/taimihud-pathing.png similarity index 100% rename from content/blog/taimihud-pathing.png rename to content/blog/2025-06-20-taimihud/taimihud-pathing.png diff --git a/content/blog/taimihud-timers-ui.png b/content/blog/2025-06-20-taimihud/taimihud-timers-ui.png similarity index 100% rename from content/blog/taimihud-timers-ui.png rename to content/blog/2025-06-20-taimihud/taimihud-timers-ui.png diff --git a/content/blog/taimihud-timers.png b/content/blog/2025-06-20-taimihud/taimihud-timers.png similarity index 100% rename from content/blog/taimihud-timers.png rename to content/blog/2025-06-20-taimihud/taimihud-timers.png diff --git a/content/blog/taimihud.png b/content/blog/2025-06-20-taimihud/taimihud.png similarity index 100% rename from content/blog/taimihud.png rename to content/blog/2025-06-20-taimihud/taimihud.png diff --git a/content/external/_index.md b/content/external/_index.md index d706c94..55ac878 100644 --- a/content/external/_index.md +++ b/content/external/_index.md @@ -1,5 +1,5 @@ +++ -title = "Blog" +title = "Things I find value in sharing" sort_by = "date" template = "external.html" page_template = "page.html" diff --git a/content/external/external.toml b/content/external/external.toml index 52e75b3..ee20b22 100644 --- a/content/external/external.toml +++ b/content/external/external.toml @@ -1,12 +1,5 @@ [[categories]] -lookup = "written" -title = "Written" - [[categories.posts]] - title = "How To Ask Questions The Smart Way" - author = "Eric S. Raymond, Rick Moen" - permalink = "http://catb.org/~esr/faqs/smart-questions.html" - archive = "https://archive.ph/4Nsm2" - +title = "Posts" [[categories.posts]] title = "Humanity's Endgame" author = "Henry Wismayer" @@ -20,9 +13,24 @@ title = "Written" archive = "https://archive.ph/5ZOw2" [[categories]] -lookup = "video" +title = "Long-form writing" + [[categories.posts]] + title = "How To Ask Questions The Smart Way" + author = "Eric S. Raymond, Rick Moen" + permalink = "http://catb.org/~esr/faqs/smart-questions.html" + archive = "https://archive.ph/4Nsm2" + +[[categories]] +title = "Series of posts" + [[categories.posts]] + title = "The computer of the next 200 years" + author = "jyn, jade, ..." + permalink = "https://jyn.dev/computer-of-the-future" + archive = "https://archive.ph/yHkmU" + +[[categories]] title = "Video" -note = "If any of these videos disappear, reach out to me and I can provide you with a copy of them." +note = 'If any of these videos are inaccessible to you, reach out to me and I can provide you with a copy of them. See [my views on YouTube](/writings/on-youtube).' [[categories.posts]] title = "Microsoft broke my voice" author = "a_lilian" diff --git a/content/writings/_index.md b/content/writings/_index.md new file mode 100644 index 0000000..2a27145 --- /dev/null +++ b/content/writings/_index.md @@ -0,0 +1,7 @@ ++++ +title = "My writings" +sort_by = "date" +template = "blog.html" +page_template = "page.html" +draft = false ++++ diff --git a/content/writings/on-youtube.md b/content/writings/on-youtube.md new file mode 100644 index 0000000..c4bcb30 --- /dev/null +++ b/content/writings/on-youtube.md @@ -0,0 +1,15 @@ ++++ +title = "On the current state of YouTube" +date = 2025-11-09 ++++ +Over time, but especially as of recent, YouTube has become extremely hostile to users, particularly those who make use of an ad blocker. An arms race has broken out about it, even, to the extent where [yt-dlp](https://github.com/yt-dlp/yt-dlp/) has started having to include Deno, a Javascript engine to be able to succeed at performing the challenges sent. + +I spend a surprising quantity of time now following what is going on with YouTube's anti-ad-blocking changes, since it now regularly tells me about how I am violating their terms of service. + +This is happening simultaneously with the AI enshittification of the YouTube experience; AI summaries, comment reply suggestions, chatbot to talk about the current video with, automatic dubbing in languages that do not match that of the content and more. + +AI content in the form of videos and shorts is being pushed into feeds by algorithms which do not in any way prioritize or share the concerns of the end-user / consumer of that content. + +Google's most anti-user and anti-consumer behaviour is the total crippling of Chrome's extension system via [Manifest v3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) to restrict the capacity to which ad-blockers can function on their platforms. + +All I can think on this is, if Google and YouTube had not existed in the first place and the web had been more decentralized with regards to where we archive and share our multimedia content, we would be in a better position because of a lack of that centralization. YouTube stands as a monopoly over amateur to professional internet shared video where it does not concern traditional publishing and we are all the worse for it, regardless of how Google and YouTube want you to believe that "ads help YouTube be available to billions". diff --git a/sass/coloring.scss b/sass/coloring.scss new file mode 100644 index 0000000..ba8fcf4 --- /dev/null +++ b/sass/coloring.scss @@ -0,0 +1,77 @@ +@use "sass:map"; +@use "headings"; + +// Let's not destroy people's eyes unless they want that +$theme: dark !default; + +$themes: ( + light: ( + bg: #fcfcfc, + fg: #333, + border: #333, + code: #eee, + heading: #111, + a-link: #16b1bd, + a-hover: #37DCE8, + a-visited: #3784e8, + ), + dark: ( + bg: #141414, + fg: #ddd, + border: #ddd, + code: #282828, + heading: #eee, + a-link: #16b1bd, + a-hover: #37DCE8, + a-visited: #3784e8, + ) +); + +@function color($name, $theme: $theme) { + @return map-get( + map-get($themes, $theme), + $name + ); +} + +@mixin link_state($name, $theme: $theme) { + $color: color("a-#{$name}", $theme); + @if $name == "link" { + a, a:#{$name} { + color: $color; + } + } else { + a:#{$name} { + color: $color; + } + } + a:#{$name} { + @include headings.headings { + color: $color; + @if $name == "hover" { + border-bottom-color: $color; + } + } + } +} + +@mixin set-colors($theme: $theme) { + color: color(fg, $theme); + background: color(bg, $theme); + @include headings.headings { + color: color(heading, $theme); + } + code { + background: color(code, $theme); + border-color: color(border, $theme); + } + $link_states: "link", "visited", "hover"; + @each $name in $link_states { + @include link_state($name, $theme); + } + + a:hover:has(img) img { + border-color: color(a-hover, $theme); + } +} + diff --git a/sass/headings.scss b/sass/headings.scss new file mode 100644 index 0000000..cb77973 --- /dev/null +++ b/sass/headings.scss @@ -0,0 +1,5 @@ +@mixin headings { + h1, h2, h3, h4, h5, h6 { + @content; + } +} diff --git a/sass/stylesheet.scss b/sass/stylesheet.scss index 9b6a671..00a382b 100644 --- a/sass/stylesheet.scss +++ b/sass/stylesheet.scss @@ -2,41 +2,58 @@ Made with love by @kittywitch ^_^ */ -$light-bg: #fcfcfc; -$light-fg: #333; -$light-code: #eee; -$light-heading: #111; -$dark-bg: #141414; -$dark-fg: #ddd; -$dark-code: #282828; -$dark-heading: #eee; -$link-base: #16b1bd; -$link-hover: #37DCE8; -$link-visited: #3784e8; +@use "headings"; +@use "coloring"; +@use "sass:map"; * { box-sizing: border-box; } html { - color: $dark-fg; - background: $dark-bg; - h1, h2, h3 { - color: $dark-heading; - } summary > h3 { display: inline-block; } code { - background: $dark-code; padding: .5pt 5pt; - border: $dark-fg 2px solid; + border: coloring.color(border) 2px solid; } code:has(pre) { display: block; width: fit-content; margin: 1em 0; } + a { + @include headings.headings { + width: fit-content; + } + } + @include coloring.set-colors; +} + +html, body { + height: 100vh; +} + +html, body, .wrapper { + min-height: 100%; +} + +.wrapper { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "header" "main" "footer"; + grid-template-rows: auto 1fr auto; + header { + grid-area: header; + } + main { + grid-area: main; + display: block; + } + footer { + grid-area: footer; + } } body { @@ -62,8 +79,6 @@ body { padding: 0; column-count: 2; li { - img { - } } } } @@ -95,14 +110,21 @@ ul.two { column-count: 2; } -a, a:link { +// Set the border to exist before colouration on hover so that it doesn't resize the element +a, a:link, a:visited { text-decoration: none; - color: $link-base; + border-bottom: 0.01em transparent solid; + @include headings.headings { + border-bottom: 0.01em transparent solid; + } } -a:visited { - text-decoration: none; - color: $link-visited; +a:has(img) { + border-bottom: none !important; + padding: 0.02rem; + img { + border: 0.01em transparent solid; + } } .netscape-container img { @@ -122,20 +144,6 @@ a:visited { } } -a:hover { - text-decoration: none; - color: $link-hover; - border-bottom: 0.01rem $link-hover solid; -} - -a:hover:has(img) { - border: none; - padding: 0.02rem; - img { - border: 0.01rem $link-hover solid; - } -} - /* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */ footer nav ul { @@ -155,52 +163,20 @@ footer nav ul { @media (prefers-color-scheme: dark) { html { - color: $dark-fg; - background: $dark-bg; - h1, h2, h3 { - color: $dark-heading; - } - code { - background: $dark-code; - border: $dark-fg 2px solid; - } + @include coloring.set-colors(dark); } } @media (prefers-color-scheme: light) { html { - color: $light-fg; - background: $light-bg; - h1, h2, h3 { - color: $light-heading; - } - code { - background: $light-code; - border: $light-fg 2px solid; - } + @include coloring.set-colors(light); } } html:has(#color-scheme-dark:checked) { - color: $dark-fg; - background: $dark-bg; - h1, h2, h3 { - color: $dark-heading; - } - code { - background: $dark-code; - border: $dark-fg 2px solid; - } + @include coloring.set-colors(dark); } html:has(#color-scheme-light:checked) { - color: $light-fg; - background: $light-bg; - h1, h2, h3 { - color: $light-heading; - } - code { - background: $light-code; - border: $light-fg 2px solid; - } + @include coloring.set-colors(light); } diff --git a/static/nonoscript.js b/static/nonoscript.js index cbe8bec..10e919a 100644 --- a/static/nonoscript.js +++ b/static/nonoscript.js @@ -2,7 +2,6 @@ function nonoscriptImplementer() { var nonoscript = document.getElementsByClassName("nonoscript"); console.log(nonoscript); for (let item of nonoscript) { - console.log("meep!"); item.classList.remove("nonoscript"); } } diff --git a/templates/base.html b/templates/base.html index 521c47d..8866dbd 100644 --- a/templates/base.html +++ b/templates/base.html @@ -18,7 +18,7 @@ -
    +
    {% include "header.html" %}
    diff --git a/templates/external.html b/templates/external.html index d05013d..29e47e0 100644 --- a/templates/external.html +++ b/templates/external.html @@ -8,7 +8,7 @@

    {{ category.title }}

    {% if category.note is defined %} -

    {{ category.note }}

    +

    {{ category.note | markdown(inline = true) | safe }}

    {% endif %}
      {% for post in category.posts %} diff --git a/templates/header.html b/templates/header.html index e4246b7..3682dd7 100644 --- a/templates/header.html +++ b/templates/header.html @@ -5,7 +5,8 @@
      diff --git a/templates/index.html b/templates/index.html index a820d53..6a0a064 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,6 +5,77 @@

      About

      Hi! I'm Kat. I have an eclectic range of interests; as described on this page. +
    + +
    +

    Projects

    + + Please see my Forgejo and my GitHub. + +

    Notable items showcase

    + + +
    + +
    +

    Interests

    + +
      +
    • Japanese (pre-JLPT)
      • +
    • Video Games
      • +
    • Hobbyist Electronics
      • +
    • Software-defined Radio
      • +
    • Amateur Radio (not yet licensed!)
      • +
    • Firearms (not yet licensed!)
      • +
    • Anime and Manga
      • +
    • 3D Printing
      • +
    • Mechanical Keyboards
      • +
    • Political science and theory
      • +
    +
    + +
    +

    Tech Interests

    + +
      +
    • Software Development
      • +
    • Video Game Modding
      • +
    • System Administration
      • +
    • DevSecOps + GitOps
      • +
    • Smart Home
      • +
    • Cyber Security
      • +
    +
    + +
    +

    Subcultures

    @@ -104,76 +175,6 @@ b D+ G e++ h--- r+++ x+ qalle capstasher hellnet.work -
    -
    - -
    -

    Projects

    - - Please see my Forgejo and my GitHub. - -

    Notable items showcase

    - - -
    - -
    - -
    -

    Interests

    - -
      -
    • Japanese (pre-JLPT)
      • -
    • Video Games
      • -
    • Hobbyist Electronics
      • -
    • Software-defined Radio
      • -
    • Amateur Radio (not yet licensed!)
      • -
    • Firearms (not yet licensed!)
      • -
    • Anime and Manga
      • -
    • 3D Printing
      • -
    • Mechanical Keyboards
      • -
    • Political science and theory
      • -
    -
    - -
    -

    Tech Interests

    - -
      -
    • Software Development
      • -
    • Video Game Modding
      • -
    • System Administration
      • -
    • DevSecOps + GitOps
      • -
    • Smart Home
      • -
    • Cyber Security
      • -
    {% endblock content %} diff --git a/templates/page.html b/templates/page.html index c127084..d64bd1c 100644 --- a/templates/page.html +++ b/templates/page.html @@ -4,6 +4,6 @@

    {{ page.title }}

    -

    +

    {{ page.content | safe }} {% endblock content %} From 8ef43c8de19d01122c8f7b2b77ba530c7625a843 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 13:54:39 -0800 Subject: [PATCH 4/8] feat: finish breaking up the stylesheets --- sass/88x31.scss | 17 +++++ sass/code.scss | 10 +++ sass/coloring.scss | 23 ++++++ sass/footer.scss | 18 +++++ sass/header.scss | 15 ++++ sass/helper.scss | 4 ++ sass/images.scss | 23 ++++++ sass/nonoscript.scss | 4 ++ sass/sticky.scss | 28 ++++++++ sass/stylesheet.scss | 164 +++++-------------------------------------- 10 files changed, 158 insertions(+), 148 deletions(-) create mode 100644 sass/88x31.scss create mode 100644 sass/code.scss create mode 100644 sass/footer.scss create mode 100644 sass/header.scss create mode 100644 sass/helper.scss create mode 100644 sass/images.scss create mode 100644 sass/nonoscript.scss create mode 100644 sass/sticky.scss diff --git a/sass/88x31.scss b/sass/88x31.scss new file mode 100644 index 0000000..298b41c --- /dev/null +++ b/sass/88x31.scss @@ -0,0 +1,17 @@ + +.netscape-container img { + width: 88px; + height: 31px; +} + +.button-container { + width: fit-content; + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: .5em; + img { + align-self: center; + } +} diff --git a/sass/code.scss b/sass/code.scss new file mode 100644 index 0000000..9a6b6d1 --- /dev/null +++ b/sass/code.scss @@ -0,0 +1,10 @@ +code { + padding: .5pt 5pt; + border: 2px transparent solid; +} + +code:has(pre) { + display: block; + width: fit-content; + margin: 1em 0; +} diff --git a/sass/coloring.scss b/sass/coloring.scss index ba8fcf4..244eeab 100644 --- a/sass/coloring.scss +++ b/sass/coloring.scss @@ -75,3 +75,26 @@ $themes: ( } } +html { + @include set-colors; +} + +@media (prefers-color-scheme: dark) { + html { + @include set-colors(dark); + } +} + +@media (prefers-color-scheme: light) { + html { + @include set-colors(light); + } +} + +html:has(#color-scheme-dark:checked) { + @include set-colors(dark); +} + +html:has(#color-scheme-light:checked) { + @include set-colors(light); +} diff --git a/sass/footer.scss b/sass/footer.scss new file mode 100644 index 0000000..037a18e --- /dev/null +++ b/sass/footer.scss @@ -0,0 +1,18 @@ +@use "sticky"; + +/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */ + +footer nav ul { + list-style-type: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; + li { + padding: 0; + margin: 0; + &:nth-child(2n) { + text-align: right; + } + } +} diff --git a/sass/header.scss b/sass/header.scss new file mode 100644 index 0000000..17711ff --- /dev/null +++ b/sass/header.scss @@ -0,0 +1,15 @@ +header nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 0.5em; + li { + display: inline-block; + padding: 0; + margin: 0; + flex-grow: 1; + text-align: center; + } +} diff --git a/sass/helper.scss b/sass/helper.scss new file mode 100644 index 0000000..0664396 --- /dev/null +++ b/sass/helper.scss @@ -0,0 +1,4 @@ +ul.two { + column-count: 2; +} + diff --git a/sass/images.scss b/sass/images.scss new file mode 100644 index 0000000..9ea7f03 --- /dev/null +++ b/sass/images.scss @@ -0,0 +1,23 @@ +img { + /* Make sure that the images do not overflow the body */ + max-width: 100%; + /* Make sure that the images are not too tall as to be annoying */ + max-height: 50ch; +} + +#gallery { + ul { + list-style-type: none; + margin: 0; + padding: 0; + column-count: 2; + } +} + +a:has(img) { + border-bottom: none !important; + padding: 0.02rem; + img { + border: 0.01em transparent solid; + } +} diff --git a/sass/nonoscript.scss b/sass/nonoscript.scss new file mode 100644 index 0000000..120b91e --- /dev/null +++ b/sass/nonoscript.scss @@ -0,0 +1,4 @@ +/* A kindness to those of you who don't use Javascript */ +.nonoscript { + display: none; +} diff --git a/sass/sticky.scss b/sass/sticky.scss new file mode 100644 index 0000000..09e3e06 --- /dev/null +++ b/sass/sticky.scss @@ -0,0 +1,28 @@ +/* + https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers +*/ + +html, body { + height: 100vh; +} + +html, body, .wrapper { + min-height: 100%; +} + +.wrapper { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "header" "main" "footer"; + grid-template-rows: auto 1fr auto; + header { + grid-area: header; + } + main { + grid-area: main; + display: block; + } + footer { + grid-area: footer; + } +} diff --git a/sass/stylesheet.scss b/sass/stylesheet.scss index 00a382b..4e9714b 100644 --- a/sass/stylesheet.scss +++ b/sass/stylesheet.scss @@ -4,55 +4,28 @@ @use "headings"; @use "coloring"; -@use "sass:map"; +@use "code"; +@use "footer"; +@use "header"; +@use "images"; +@use "nonoscript"; +@use "helper"; +@use "88x31" as netscape; * { box-sizing: border-box; } -html { - summary > h3 { - display: inline-block; - } - code { - padding: .5pt 5pt; - border: coloring.color(border) 2px solid; - } - code:has(pre) { - display: block; +/* For the subculture "code" dropdowns */ +summary > h3 { + display: inline-block; +} + +/* Otherwise the border overflows the content */ + +a { + @include headings.headings { width: fit-content; - margin: 1em 0; - } - a { - @include headings.headings { - width: fit-content; - } - } - @include coloring.set-colors; -} - -html, body { - height: 100vh; -} - -html, body, .wrapper { - min-height: 100%; -} - -.wrapper { - display: grid; - grid-template-columns: 1fr; - grid-template-areas: "header" "main" "footer"; - grid-template-rows: auto 1fr auto; - header { - grid-area: header; - } - main { - grid-area: main; - display: block; - } - footer { - grid-area: footer; } } @@ -67,49 +40,6 @@ body { padding: 1em; } -/* A kindness to those of you who don't use Javascript */ -.nonoscript { - display: none; -} - -#gallery { - ul { - list-style-type: none; - margin: 0; - padding: 0; - column-count: 2; - li { - } - } -} - -img { - /* Make sure that the images do not overflow the body */ - max-width: 100%; - /* Make sure that the images are not too tall as to be annoying */ - max-height: 50ch; -} - -header nav ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - gap: 0.5em; - li { - display: inline-block; - padding: 0; - margin: 0; - flex-grow: 1; - text-align: center; - } -} - -ul.two { - column-count: 2; -} - // Set the border to exist before colouration on hover so that it doesn't resize the element a, a:link, a:visited { text-decoration: none; @@ -118,65 +48,3 @@ a, a:link, a:visited { border-bottom: 0.01em transparent solid; } } - -a:has(img) { - border-bottom: none !important; - padding: 0.02rem; - img { - border: 0.01em transparent solid; - } -} - -.netscape-container img { - width: 88px; - height: 31px; -} - -.button-container { - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - flex-flow: row wrap; - gap: .5em; - img { - align-self: center; - } -} - -/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */ - -footer nav ul { - list-style-type: none; - padding: 0; - margin: 0; - display: grid; - grid-template-columns: 1fr 1fr; - li { - padding: 0; - margin: 0; - &:nth-child(2n) { - text-align: right; - } - } -} - -@media (prefers-color-scheme: dark) { - html { - @include coloring.set-colors(dark); - } -} - -@media (prefers-color-scheme: light) { - html { - @include coloring.set-colors(light); - } -} - -html:has(#color-scheme-dark:checked) { - @include coloring.set-colors(dark); -} - -html:has(#color-scheme-light:checked) { - @include coloring.set-colors(light); -} From e07f15d555efbc7782398e7ca8a52f59cb3b9c33 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 13:57:22 -0800 Subject: [PATCH 5/8] feat: fix sections --- content/writings/_index.md | 4 ++-- templates/external.html | 2 +- templates/writings.html | 18 ++++++++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 templates/writings.html diff --git a/content/writings/_index.md b/content/writings/_index.md index 2a27145..7ab5f00 100644 --- a/content/writings/_index.md +++ b/content/writings/_index.md @@ -1,7 +1,7 @@ +++ -title = "My writings" +title = "Writings" sort_by = "date" -template = "blog.html" +template = "writings.html" page_template = "page.html" draft = false +++ diff --git a/templates/external.html b/templates/external.html index 29e47e0..4b9b615 100644 --- a/templates/external.html +++ b/templates/external.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% block content %} -
    +

    Things I find value in sharing

    {% set data = load_data(path="content/external/external.toml") %} {% for category in data.categories %} diff --git a/templates/writings.html b/templates/writings.html new file mode 100644 index 0000000..758f737 --- /dev/null +++ b/templates/writings.html @@ -0,0 +1,18 @@ +{% extends "base.html" %} + +{% block content %} +
    +

    Writings

    +
      + {% for post in section.pages %} +
    • + +
      • + {% endfor %} +
    +
    +{% endblock content %} + From e5d187ded5be5c16586b391a2bd9a0acb5eb9ba7 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 15:35:40 -0800 Subject: [PATCH 6/8] feat: more extern, add notes about font to index --- content/external/external.toml | 12 ++++++++++++ templates/index.html | 4 +++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/content/external/external.toml b/content/external/external.toml index ee20b22..3eafc51 100644 --- a/content/external/external.toml +++ b/content/external/external.toml @@ -12,6 +12,18 @@ title = "Posts" permalink = "https://jtibs.substack.com/p/if-all-the-world-were-a-monorepo" archive = "https://archive.ph/5ZOw2" + [[categories.posts]] + title = "Education in Brazil" + author = "Richard Feynman" + permalink = "https://v.cx/2010/04/feynman-brazil-education" + archive = "https://archive.ph/BPB7Z" + + [[categories.posts]] + title = "Why I am not a professor" + author = "Mark Tarver" + permalink = "https://marktarver.com/professor.html" + archive = "https://archive.ph/g42Dn" + [[categories]] title = "Long-form writing" [[categories.posts]] diff --git a/templates/index.html b/templates/index.html index 6a0a064..026ce6d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,7 +4,9 @@

    About

    - Hi! I'm Kat. I have an eclectic range of interests; as described on this page. +

    Hi! I'm Kat. I have an eclectic range of interests; as described on this page.

    + +

    If you find this website's font ugly, it's because you haven't set your default fonts up properly! Fonts here are left as an exercise up to the reader, I don't assume I will know what is best for your eyes better than you do, nor do I want to ship a webfont to you. I personally am currently using Atkinson Hyperlegible Next, a recommendation from a friend.

    From b348bddfe561dc17b9ac936a68471532da32505f Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 15:48:37 -0800 Subject: [PATCH 7/8] feat: oops --- sass/coloring.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/sass/coloring.scss b/sass/coloring.scss index 244eeab..419d8cd 100644 --- a/sass/coloring.scss +++ b/sass/coloring.scss @@ -43,6 +43,9 @@ $themes: ( } else { a:#{$name} { color: $color; + @if $name == "hover" { + border-bottom-color: $color; + } } } a:#{$name} { From a65449b7ea1e03e1a7925cd3d5846449d1f28a35 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 9 Nov 2025 15:49:59 -0800 Subject: [PATCH 8/8] fix: else --- sass/coloring.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sass/coloring.scss b/sass/coloring.scss index 419d8cd..a56b360 100644 --- a/sass/coloring.scss +++ b/sass/coloring.scss @@ -40,7 +40,8 @@ $themes: ( a, a:#{$name} { color: $color; } - } else { + } + @else { a:#{$name} { color: $color; @if $name == "hover" {