feat: a terrifying quantity of rework

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"

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"

content/writings/_index.md

@@ -0,0 +1,7 @@
++++
+title = "My writings"
+sort_by = "date"
+template = "blog.html"
+page_template = "page.html"
+draft = false
++++

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".

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);
+  }
+}
+

sass/headings.scss

@@ -0,0 +1,5 @@
+@mixin headings {
+  h1, h2, h3, h4, h5, h6 {
+    @content;
+  }
+}

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);
 }

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");
   }
 }

templates/base.html

@@ -18,7 +18,7 @@
   </head>
 
   <body>
-    <div>
+    <div class="wrapper">
       <header>
         {% include "header.html" %}
       </header>

templates/external.html

@@ -8,7 +8,7 @@
   <section>
     <h3>{{ category.title }}</h3>
     {% if category.note is defined %}
-    <p>{{ category.note }}</p>
+    <p>{{ category.note | markdown(inline = true) | safe }}</p>
     {% endif %}
     <ul>
     {% for post in category.posts %}

templates/header.html

@@ -5,7 +5,8 @@
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/blog">Blog</a></li>
-    <li><a href="/external">External</a></li>
+    <li><a href="/writings">Writings</a></li>
+    <li><a href="/external">Things I find value in sharing</a></li>
   </ul>
 </nav>
 <hr>

templates/index.html

@@ -5,6 +5,77 @@
   <h2>About</h2>
 
   Hi! I'm Kat. I have an eclectic range of interests; as described on this page.
+</section>
+
+<section id="projects">
+  <h2>Projects</h2>
+
+  Please see <a href="https://git.kittywit.ch/kat">my Forgejo</a> and <a href="https://github.com/kittywitch">my GitHub</a>.
+
+  <h3>Notable items showcase</h3>
+  <nav>
+      <ul>
+              <li>
+                  <article>
+                      <a href="https://github.com/TaimiHUD/TaimiHUD">
+                          <h3>TaimiHUD/TaimiHUD</h3>
+                      </a>
+                      <p>A Rust Guild Wars 2 addon that provides Encounter Timers, Squad Marker Presets and Pathing for Nexus and ArcDPS.</p>
+                  </article>
+              </li>
+              <li>
+                  <article>
+                      <a href="https://github.com/kittywitch/nixfiles">
+                          <h3>kittywitch/nixfiles</h3>
+                      </a>
+                      <p>Personal NixOS + Terraform infrastructure repository.</p>
+                  </article>
+              </li>
+              <li>
+                  <article>
+                      <a href="https://github.com/gensokyo-zone/infrastructure">
+                          <h3>gensokyo-zone/infrastructure</h3>
+                      </a>
+                      <p>Apartment NixOS + Terraform infrastructure repository, a project with my wife!</p>
+                  </article>
+              </li>
+      </ul>
+  </nav>
+
+</section>
+
+<section id="interests">
+  <h2>Interests</h2>
+
+  <ul class="two">
+    <li>Japanese (pre-JLPT)</li>
+    <li>Video Games</li>
+    <li>Hobbyist Electronics</li>
+    <li>Software-defined Radio</li>
+    <li>Amateur Radio (not yet licensed!)</li>
+    <li>Firearms (not yet licensed!)</li>
+    <li>Anime and Manga</li>
+    <li>3D Printing</li>
+    <li>Mechanical Keyboards</li>
+    <li>Political science and theory</li>
+  </ul>
+</section>
+
+<section id="tech-interests">
+  <h2>Tech Interests</h2>
+
+  <ul class="two">
+    <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="subcultures">
+  <h2>Subcultures</h2>
 
   <section id="furrycode">
     <details>
@@ -104,76 +175,6 @@ b D+ G e++ h--- r+++ x+
   <a href="https://qalle.neocities.org/88x31/"><img src="/88x31/qalle.png" alt="qalle"/></a>
   <a href="https://capstasher.neocities.org/"><img src="/88x31/capstasher.png" alt="capstasher"></a>
   <a href="https://hellnet.work">hellnet.work</a>
-  <hr>
-</section>
-
-<section id="projects">
-  <h2>Projects</h2>
-
-  Please see <a href="https://git.kittywit.ch/kat">my Forgejo</a> and <a href="https://github.com/kittywitch">my GitHub</a>.
-
-  <h3>Notable items showcase</h3>
-  <nav>
-      <ul>
-              <li>
-                  <article>
-                      <a href="https://github.com/TaimiHUD/TaimiHUD">
-                          <h3>TaimiHUD/TaimiHUD</h3>
-                      </a>
-                      <p>A Rust Guild Wars 2 addon that provides Encounter Timers, Squad Marker Presets and Pathing for Nexus and ArcDPS.</p>
-                  </article>
-              </li>
-              <li>
-                  <article>
-                      <a href="https://github.com/kittywitch/nixfiles">
-                          <h3>kittywitch/nixfiles</h3>
-                      </a>
-                      <p>Personal NixOS + Terraform infrastructure repository.</p>
-                  </article>
-              </li>
-              <li>
-                  <article>
-                      <a href="https://github.com/gensokyo-zone/infrastructure">
-                          <h3>gensokyo-zone/infrastructure</h3>
-                      </a>
-                      <p>Apartment NixOS + Terraform infrastructure repository, a project with my wife!</p>
-                  </article>
-              </li>
-      </ul>
-  </nav>
-
-</section>
-
-<hr>
-
-<section id="interests">
-  <h2>Interests</h2>
-
-  <ul class="two">
-    <li>Japanese (pre-JLPT)</li>
-    <li>Video Games</li>
-    <li>Hobbyist Electronics</li>
-    <li>Software-defined Radio</li>
-    <li>Amateur Radio (not yet licensed!)</li>
-    <li>Firearms (not yet licensed!)</li>
-    <li>Anime and Manga</li>
-    <li>3D Printing</li>
-    <li>Mechanical Keyboards</li>
-    <li>Political science and theory</li>
-  </ul>
-</section>
-
-<section id="tech-interests">
-  <h2>Tech Interests</h2>
-
-  <ul class="two">
-    <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>
 
 {% endblock content %}

templates/page.html

@@ -4,6 +4,6 @@
 <h1 class="title">
   {{ page.title }}
 </h1>
-<p class="subtitle"><strong><time>{{ page.date }}</time></strong></p>
+<p class="subtitle"><strong><time>Posted: {{ page.date }}</time></strong></p>
 {{ page.content | safe }}
 {% endblock content %}