feat: :3

sass/stylesheet.scss

@@ -4,9 +4,11 @@
 
 $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;
@@ -22,6 +24,16 @@ html {
   h1, h2, h3 {
     color: $dark-heading;
   }
+  code {
+    background: $dark-code;
+    padding: .5pt 5pt;
+    border: $dark-fg 2px solid;
+  }
+  code:has(pre) {
+    display: block;
+    width: fit-content;
+    margin: 1em 0;
+  }
 }
 
 body {
@@ -76,9 +88,10 @@ header nav ul {
   }
 }
 
-#interests ul {
+ul.two {
   column-count: 2;
 }
+
 a, a:link {
   text-decoration: none;
   color: $link-base;
@@ -89,6 +102,10 @@ a:visited {
   color: $link-visited;
 }
 
+.netscape-container img {
+  width: 88px;
+  height: 31px;
+}
 
 a:hover {
   text-decoration: none;
@@ -129,6 +146,10 @@ footer nav ul {
     h1, h2, h3 {
       color: $dark-heading;
     }
+    code {
+      background: $dark-code;
+      border: $dark-fg 2px solid;
+    }
   }
 }
 
@@ -139,6 +160,10 @@ footer nav ul {
     h1, h2, h3 {
       color: $light-heading;
     }
+    code {
+      background: $light-code;
+      border: $light-fg 2px solid;
+    }
   }
 }
 
@@ -148,6 +173,10 @@ html:has(#color-scheme-dark:checked) {
   h1, h2, h3 {
     color: $dark-heading;
   }
+  code {
+    background: $dark-code;
+    border: $dark-fg 2px solid;
+  }
 }
 
 html:has(#color-scheme-light:checked) {
@@ -156,4 +185,8 @@ html:has(#color-scheme-light:checked) {
   h1, h2, h3 {
     color: $light-heading;
   }
+  code {
+    background: $light-code;
+    border: $light-fg 2px solid;
+  }
 }

templates/index.html

@@ -4,17 +4,102 @@
 <section id="about">
   <h2>About</h2>
 
-  Hi! I'm Kat. I have an eclectic range of interests.
+  Hi! I'm Kat. I have an eclectic range of interests. To be cringe is to be free!
+
+  <section id="furrycode">
+    <h3>Furry Code</h3>
+
+    <code><pre>FG[Snow leopard and arctic fox hybrid]4a A- C- D H+ M P++ R T+++ W- Z- Sf+ RLRLAT a cl+++ e++ f++++ h+++ i+++ j+++ p- sf+</pre></code>
+
+    <a href="https://mj.ucw.cz/furry/?code=FG%5bSnow+leopard+and+arctic+fox+hybrid%5d4a+A-+C-+D+H%2b+M+P%2b%2b+R+T%2b%2b%2b+W-+Z-+Sf%2b+RLRLAT+a+cl%2b%2b%2b+e%2b%2b+f%2b%2b%2b%2b+h%2b%2b%2b+i%2b%2b%2b+j%2b%2b%2b+p-+sf%2b">Decode</a>
+  </section>
+
+  <section id="geekcode">
+    <h3>Geek Code</h3>
+
+    <code><pre>-----BEGIN GEEK CODE BLOCK-----
+Version: 3.12
+GCS/IT d-- s: C++ UL L+++ W++ 
+PS+++ PE-- Y++ PGP++ t+ 5+ X+ tv- 
+b D+ G e++ h--- r+++ x+
+------END GEEK CODE BLOCK------</pre></code>
+
+    <a href="https://mj.ucw.cz/geek/?code=GCS%2fIT+d--+s%3a+C%2b%2b+UL+L%2b%2b%2b+W%2b%2b+PS%2b%2b%2b+PE--+Y%2b%2b+PGP%2b%2b+t%2b+5%2b+X%2b+tv-+b+D%2b+G+e%2b%2b+h---+r%2b%2b%2b+x%2b">Decode</a>
+  </section>
+</section>
+
+
+<section class="netscape-container" id="badges">
+  <hr>
+  <img src="trans.png" alt="I'm a transgender woman."/>
+  <img src="nb.png" alt="I also identify as non-binary."/>
+  <img src="lesbian.png" alt="I'm a lesbian."/>
+  <img src="pluralproud.png" alt="Plural and proud!"/>
+  <img src="ourpaws.png" alt="Furry!"/>
+  <a href="https://nixos.org">
+    <img src="nixos.png" alt="Powered by NixOS; the website isn't currently but hopefully will be in the future! I run it on everything else though."/>
+  </a>
+  <a href="https://neovim.io">
+    <img src="neovim.gif" alt="Made with Neovim"/>
+  </a>
+  <a href="https://firefox.com">
+    <img src="fftake.gif" alt="Firefox; take back the web!"/>
+  </a>
+  <a href="https://ublockorigin.com/">
+    <img src="button-ublock.gif" alt="uBlock Origin, now! Death to the corporate web!"/>
+  </a>
+  <img src="abc.gif" alt="Anything but Chrome!"/>
+  <a href="https://canada.ca">
+    <img src="canada.gif" alt="Canadian flag with Eh?"/>
+  </a>
+  <a href="https://gov.uk">
+    <img src="briish.gif" alt="Union Jack; flag of the United Kingdom"/>
+  </a>
+  <img src="anarchynow.gif" alt="Anarchy, now!"/>
+  <img src="piracy.png" alt="Piracy, now!"/>
+  <img src="pgp-now.gif" alt="PGP, now!"/>
+  <img src="roly-saynotoweb3.gif" alt="Fuck Web3!"/>
+  <img src="fucknfts.png" alt="Fuck NFTs!"/>
+  <img src="trn.png" alt="Trans rights, now!"/>
+  <img src="xenia.png" alt="Xenia my beloved"/>
+  <img src="linuxfriendly.gif" alt="Linux friendly"/>
+  <img src="openeyes.jpg" alt="Open your eyes!"/>
+  <img src="acidnow.jpg" alt="Acid now! :p"/>
+  <img src="keysmash.gif" alt="Keysmash equality"/>
+  <img src="button-2hu.gif" alt="2hu!!!"/>
+  <img src="badapple.webp" alt="bad apple!!!"/>
+  <img src="cuteanimegirls.gif" alt="Cute anime girls, now! :3"/>
+  <img src="lain.gif" alt="Serial Experiments Lain"/>
+  <img src="ccs.gif" alt="Cardcaptor Sakura :3"/>
+  <a href="https://pokemon.com">
+    <img src="pokemon.jpg" alt="Pokemon forever!"/>
+  </a>
+  <img src="medjed.jpg" alt="Medjed; <3 Futaba Sakura, <3 Persona 5"/>
+  <img src="hl.gif" alt="Half Life"/>
+  <img src="minecraft.gif" alt="Minecraft"/>
+  <img src="button-html.gif" alt="&lt;HTML&gt Learn it today">
+  <img src="button-css.gif" alt="CSS is difficult">
+  <img src="button-grid.gif" alt="Made with CSS Grid">
+  <br>
+  <small>
+    Sources, where known:
+    <a href="https://rainy.gay">rainy.gay</a>,
+    <a href="https://hellnet.world">hellnet.world</a>,
+    <a href="https://github.com/moosyu/buttons">moosyu/buttons</a>.
+  </small>
+  <hr>
 </section>
 
 <section id="interests">
   <h2>Interests</h2>
 
-  <ul>
+  <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</li>
+    <li>Firearms (not yet licensed!)</li>
     <li>Anime and Manga</li>
     <li>3D Printing</li>
     <li>Mechanical Keyboards</li>
@@ -24,7 +109,7 @@
 <section id="tech-interests">
   <h2>Tech Interests</h2>
 
-  <ul>
+  <ul class="two">
     <li>Software Development</li>
     <li>Video Game Modding</li>
     <li>System Administration</li>