deploy: 8f95dbed32

sass/stylesheet.css

@@ -9,6 +9,14 @@ html {
   background: #141414; }
   html h1, html h2, html h3 {
     color: #eee; }
+  html code {
+    background: #282828;
+    padding: .5pt 5pt;
+    border: #ddd 2px solid; }
+  html code:has(pre) {
+    display: block;
+    width: fit-content;
+    margin: 1em 0; }
 
 body {
   /* Make the body a 80 character wide container */
@@ -50,7 +58,7 @@ header nav ul {
     flex-grow: 1;
     text-align: center; }
 
-#interests ul {
+ul.two {
   column-count: 2; }
 
 a, a:link {
@@ -61,6 +69,10 @@ a:visited {
   text-decoration: none;
   color: #3784e8; }
 
+.netscape-container img {
+  width: 88px;
+  height: 31px; }
+
 a:hover {
   text-decoration: none;
   color: #37DCE8;
@@ -90,23 +102,35 @@ footer nav ul {
     color: #ddd;
     background: #141414; }
     html h1, html h2, html h3 {
-      color: #eee; } }
+      color: #eee; }
+    html code {
+      background: #282828;
+      border: #ddd 2px solid; } }
 
 @media (prefers-color-scheme: light) {
   html {
     color: #333;
     background: #fcfcfc; }
     html h1, html h2, html h3 {
-      color: #111; } }
+      color: #111; }
+    html code {
+      background: #eee;
+      border: #333 2px solid; } }
 
 html:has(#color-scheme-dark:checked) {
   color: #ddd;
   background: #141414; }
   html:has(#color-scheme-dark:checked) h1, html:has(#color-scheme-dark:checked) h2, html:has(#color-scheme-dark:checked) h3 {
     color: #eee; }
+  html:has(#color-scheme-dark:checked) code {
+    background: #282828;
+    border: #ddd 2px solid; }
 
 html:has(#color-scheme-light:checked) {
   color: #333;
   background: #fcfcfc; }
   html:has(#color-scheme-light:checked) h1, html:has(#color-scheme-light:checked) h2, html:has(#color-scheme-light:checked) h3 {
     color: #111; }
+  html:has(#color-scheme-light:checked) code {
+    background: #eee;
+    border: #333 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>