yay

2 files changed, 107 insertions, 203 deletions

diff --git a/html/assets/emacs.png b/html/assets/emacs.png
new file mode 100644
index 0000000..dc8f8f5
--- /dev/null
+++ b/html/assets/emacs.png
diff --git a/html/index.html b/html/index.html
index b76eb0b..8eee773 100644
--- a/html/index.html
+++ b/html/index.html
@@ -6,225 +6,129 @@
 <link rel="icon" href="https://adelie.liz.coffee/img/favicon.ico" />
 <title>liz.coffee</title>
 <style>
-  @font-face {
-    font-family: 'Latin Modern';
-    font-style: normal; font-weight: normal; font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/vincentdoerig/latex-css@1.10.0/fonts/LM-regular.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: 'Latin Modern';
-    font-style: italic; font-weight: normal; font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/vincentdoerig/latex-css@1.10.0/fonts/LM-italic.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: 'Latin Modern';
-    font-style: normal; font-weight: bold; font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/vincentdoerig/latex-css@1.10.0/fonts/LM-bold.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: 'Latin Modern';
-    font-style: italic; font-weight: bold; font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/vincentdoerig/latex-css@1.10.0/fonts/LM-bold-italic.woff2') format('woff2');
-  }
+    :root {
+        --bg: black;
+        --fg: white;
+        --a:  #c4d0c8;
+        --h:  #7d978c;
+    }
 
-  :root {
-    --ink: #1a1a1a;
-    --link: #003399;
-    --stain: 150, 62, 22;
-  }
+    body {
+        max-width:        800px;
+        background-color: var(--bg);
+        color:            var(--fg);
+    }
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-
-  html { background: #54575c; }
-
-  body {
-    font-family: 'Latin Modern', 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
-    color: var(--ink);
-    font-size: 15.5px;
-    line-height: 1.45;
-    padding: 2.5rem 0.75rem 4rem;
-  }
-
-  .page {
-    position: relative;
-    max-width: 51rem;
-    margin: 0 auto;
-    background: #fffdf7;
-    box-shadow: 0 0 4px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35);
-    padding: 4.5rem 5.5rem 3.5rem;
-    overflow: hidden;
-  }
-  @media (max-width: 700px) {
-    .page { padding: 3rem 1.4rem 2.5rem; }
-    .arxiv { display: none; }
-  }
-
-  .arxiv {
-    position: absolute;
-    left: 1.1rem; top: 24rem;
-    transform: rotate(180deg);
-    writing-mode: vertical-rl;
-    font-family: 'Latin Modern', Georgia, serif;
-    font-size: .95rem;
-    letter-spacing: .02em;
-    color: #333;
-  }
-
-  .stain { position: absolute; border-radius: 50%; pointer-events: none; }
-  .stain.ring {
-    border: 9px solid rgba(var(--stain), .13);
-    box-shadow:
-      inset 0 0 6px 2px rgba(var(--stain), .10),
-      0 0 5px 1px rgba(var(--stain), .07),
-      inset 8px 4px 12px rgba(var(--stain), .08);
-    filter: blur(.4px);
-  }
-  .stain.blotch {
-    background: radial-gradient(ellipse at 40% 40%,
-      rgba(var(--stain), .16) 0%,
-      rgba(var(--stain), .08) 45%,
-      rgba(var(--stain), .13) 62%,
-      rgba(var(--stain), 0) 72%);
-    filter: blur(.6px);
-  }
-  .stain.drop { background: rgba(var(--stain), .11); filter: blur(.5px); }
-
-  #stain1 { width: 190px; height: 178px; top: -48px; right: -55px; transform: rotate(12deg); }
-  #stain1b { width: 145px; height: 140px; top: -22px; right: -30px; }
-  #stain2 { width: 120px; height: 112px; top: 44rem; left: -58px; transform: rotate(-9deg); border-width: 12px; }
-  #stain3 { width: 16px; height: 13px; top: 46.5rem; left: 70px; }
-  #stain3b { width: 8px; height: 8px; top: 45.5rem; left: 92px; }
-  #stain4 { width: 230px; height: 215px; bottom: 6rem; right: -80px; transform: rotate(31deg); }
-  #stain5 { width: 11px; height: 10px; bottom: 16rem; right: 130px; }
-
-  .center { text-align: center; }
-  h1 {
-    font-size: 1.55rem; font-weight: normal;
-    text-align: center;
-    margin: 1.2rem auto 1.6rem;
-    max-width: 36rem;
-    line-height: 1.3;
-  }
-  .authorblock { text-align: center; margin-bottom: .4rem; }
-  .authorblock .author { font-size: 1.1rem; }
-  .authorblock .affil { font-style: italic; font-size: .95rem; margin-top: .15rem; }
-  .date { text-align: center; font-size: .95rem; margin: .8rem 0 1.6rem; }
-  tt, .tt { font-family: 'CMU Typewriter Text', ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: .88em; }
-
-  .navline { text-align: center; margin-bottom: 2.2rem; }
-  .navline a { margin: 0 .35rem; }
-
-  a { color: var(--link); text-decoration: none; }
-  a:hover { text-decoration: underline; }
-
-  .abstract { max-width: 38rem; margin: 0 auto 2rem; }
-  .abstract .head { text-align: center; font-weight: bold; font-size: .95rem; margin-bottom: .5rem; }
-  .abstract p { font-size: .92rem; text-align: justify; hyphens: auto; }
-
-  .epigraph {
-    max-width: 22rem; margin: 0 0 2rem auto;
-    font-style: italic; font-size: .92rem; text-align: right;
-  }
-  .epigraph .src { font-style: normal; font-size: .88rem; }
-
-  h2 {
-    font-size: 1.15rem; font-weight: bold;
-    margin: 1.9rem 0 .8rem;
-  }
-  h2 .no { margin-right: 1em; }
-
-  p { text-align: justify; hyphens: auto; margin-bottom: .75rem; }
-  p.indent { text-indent: 1.6em; margin-bottom: 0; }
-
-  .pronoun { cursor: pointer; border-bottom: 1px dotted var(--link); }
-  .pronoun:hover { color: var(--link); }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color:         var(--h);
+        margin-bottom: 20px;
+    }
 
+    a {
+        color:           var(--a);
+        text-decoration: underline;
+    }
+    .pro {
+        text-decoration: none;
+    }
 </style>
 </head>
 <body>
+    <h1><a class="pro">Elizabeth</a> Hunt (<a class="pro">she</a>) (ca 2003)</h1>
+    <div>
+      [me at <a href="https://en.wikipedia.org/wiki/Logarithmic_integral_function" target="_blank">Li(z)</a> dot coffee (<a class="tt" href="mailto:me@liz.coffee">mailto</a>)]·
+      [<a href="https://code.liz.coffee">code</a>] ·
+      [<a href="https://linkedin.com/in/emprespresso">linkedin</a>] ·
+      [<a href="https://instagram.com/emprespresso">instagram</a>] ·
+      [<a href="https://x.com/emprespresso">twitter</a>]
+    </div>
+
+    <marquee>If you <a href="https://web.archive.org/web/20260720071542/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/marquee">don't like the marquee tag</a> then <a class="pro">she</a> will find you and <a class="pro">she</a> will blast you to smithereens.</marquee>
+    <hr />
+
+    <p><a class="pro">She</a> is not particularly exceptional at anything but can functionally do a fair bit of stuff, of which <a class="pro">her</a> extremely variable ability perhaps is the only exceptional thing about <a class="pro">her</a>.</p>
+
+    <p><a class="pro">She</a> is a programmer at a Big Ol' Tech™ company in Seattle (unfortunately, probably the one you're thinking of). And will continue to refer to <a class="pro">her</a>self in the third person for the remainder of this World Wide Web document, which you find yourself laying your eyes on. And in so doing, probably don't yet understand the context of the next words you are about to read. Except, that they are there. They take up space. And reading through them consumes YOUR oh-so-precious time - which is upper-bounded, need <a class="pro">she</a> remind you: <span id="genpenguin">penguin slop that would be populated if you had your EPIC JAVASCRIPT enabled</span></p>
 
-<div class="page">
-  <div class="stain blotch" id="stain1"></div>
-  <div class="stain ring" id="stain1b"></div>
-  <div class="stain ring" id="stain2"></div>
-  <div class="stain drop" id="stain3"></div>
-  <div class="stain drop" id="stain3b"></div>
-  <div class="stain ring" id="stain4"></div>
-  <div class="stain drop" id="stain5"></div>
+    <p><a class="pro">She</a> enjoys recreational programming and searching the space of math and CS outside of work; some of <a class="pro">her</a> current interests are in PLs, type theory, game programming (&lt;3 pico8), and homelab stuff. <a class="pro">She</a> was an advocate of LISPy stuff while president of the <a href="https://linux.usu.edu">USU Free Software and Linux Club</a>, <a class="pro">she</a> still can't shake off Emacs and probably should augment <a class="pro">her</a> <a href="assets/emacs.png">hand accordingly</a>.</p>
 
-  <div class="arxiv">arXiv:2607.0404v3&nbsp;&nbsp;[cs.DOG]&nbsp;&nbsp;<span id="arxiv-date">5 Jul 2026</span></div>
+    <p>When not doing computer stuff, <a class="pro">she</a> runs, bikes, watches anime, rides trains, reads, or bakes bread. <a class="pro">She</a> may be heard practicing violin or speedcubing. Penguins are absolutely fascinating to <a class="pro">her</a>, and <a class="pro">she</a> collects books on said species as well as plenty of stuffed animals, and visits them when possible. Maybe <a class="pro">she</a> will one day <span style="display: none">(soon?) </span>reincarnate to be one.</p>
 
-  <div class="authorblock">
-    <div class="author"><span class="pronoun" data-she="Elizabeth" data-he="Alexander">Elizabeth</span> Hunt (<span class="pronoun" data-she="she/her" data-he="he/him">she/her</span>) (2003)</div>
-    <div class="affil">me at <a href="https://en.wikipedia.org/wiki/Logarithmic_integral_function" target="_blank">li(z)</a> dot coffee (<a class="tt" href="mailto:me@liz.coffee">mailto</a>)</div>
-  </div>
-  <div class="date" id="today">July 4, 2026</div>
+    <p><a class="pro">She</a> has been vegetarian since early 2025. <a class="pro">She</a> is poly, bicycle, and a bit fucked up.</p>
 
-  <div class="navline tt">
-    [<a href="https://code.liz.coffee">code</a>] ·
-    [<a href="https://linkedin.com/in/emprespresso">linkedin</a>] ·
-    [<a href="https://instagram.com/emprespresso">instagram</a>] ·
-    [<a href="https://x.com/emprespresso">twitter</a>]
-  </div>
+    <p>Gus!</p>
+    <p><img src="assets/gus.jpeg" height="400"></p>
+    <div style="display: flex; align-items: center; justify-content: center;"><img width="100" src="assets/penguin.gif"><a href="https://liz.coffee"><img src="https://adelie.liz.coffee/img/blinkies/liz--coffee.gif" width="150" height="20"></a></div>
+    <hr>
 
-  <div class="abstract">
-    <div class="head">Abstract</div>
-    <p>We introduce the author and establish some of <span class="pronoun" data-she="her" data-he="his">her</span> fundamental properties. We then leave the bread dough to "proof" itself.</p>
-    <div class="center"><img src="assets/bread.jpeg" width="400"><br><em>Fig. 1 - QED?</em></div>
-  </div>
+    <br>
+    <div>
+        <p>I jam to this so hard so I'm putting it on my website:</p>
+        <iframe width="280" height="auto" src="https://www.youtube.com/embed/JimUMZTiAjo?si=WTerhBRHan-5IcuG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    </div>
 
-  <h2>1. Introduction</h2>
-  <p>
-  The author is a programmer at a Big Ol' Tech™ company in Seattle (unfortunately probably the one you're thinking of). <span class="pronoun" data-she="She" data-he="He">She</span> was previously at USU studying CS and Math, after (thankfully) escaping from doing the same at <a target="_blank" href="https://www.byui.edu/">BYU-I</a>.
-  </p>
-  <p class="indent"><span class="pronoun" data-she="She" data-he="He">She</span> enjoys recreational programming and studying outside of work; some of <span class="pronoun" data-she="her" data-he="his">her</span> interests are in functional programming, compilers/PLs, game programming, overengineering <span class="pronoun" data-she="her" data-he="his">her</span> homelab. <span class="pronoun" data-she="She" data-he="He">She</span> hacks on some LISP, drives Emacs, and is generally fond of Free software (from 2021 to 2023 <span class="pronoun" data-she="she" data-he="he">she</span> was the president of the <a href="https://linux.usu.edu">Free Software and Linux Club</a>).</p>
-  <p class="indent">
-    When not doing computer stuff, <span class="pronoun" data-she="she" data-he="he">she</span> runs, bikes, watches anime, rides trains, reads, bakes bread, or daydreams about going back to school. On rare occassions when nostalgic, <span class="pronoun" data-she="she" data-he="he">she</span> might be heard practicing violin. Penguins are absolutely fascinating to <span class="pronoun" data-she="her" data-he="him">her</span>, and <span class="pronoun" data-she="she" data-he="he">she</span> collects books on said species as well as plenty of stuffed animals, and visits them when possible. Maybe <span class="pronoun" data-she="she" data-he="he">she</span> will one day (soon?) reincarnate to be one.
-  </p>
-  <p class="indent">
-    The author is also the advisor to PhD (PHuckin-cuteass Dog) candidate Gus, whose current work involves proving something about the dastardliness of squirrels.
-    <br><br>
-    <div class="center"><img src="assets/gus.jpeg" height="400"><br><em>Fig. 2 - PhD Candidate.</em></div>
-  </p>
+    <script>
+        const words = {
+            article:   ["the", "a", "every", "some", "one", "that"],
+            adjective: ["cute", "waterproof", "fluffy", "yellow-eyed", "sleepy", "enormous", "polite",
+                        "damp", "well-loved", "smug", "round", "salty", "windswept", "tiny"],
+            species:   ["fairy", "rockhopper", "adelie", "gentoo", "emperor", "chinstrap", "king",
+                        "macaroni", "little blue"],
+            subject:   ["penguin", "chick", "colony", "creche", "huddle", "raft", "pen-pen",
+                        "koupenchan", "flipper", "beak", "egg", "nest"],
+            adverb:    ["quietly", "eagerly", "rarely", "sideways", "smugly", "almost", "solemnly",
+                        "briskly", "suspiciously", "twice"],
+            verb:      ["waddles", "toboggans", "steals", "polishes", "guards", "misplaces", "noots at",
+                        "preens", "dives for", "cuddles", "counts", "hoards", "trades", "belly-flops onto"],
+            object:    ["a pebble", "the nest", "three krill", "a shiny fish", "its egg", "the whole colony",
+                        "a stray feather", "a spare flipper", "the last herring", "someone's chick",
+                        "a very good rock", "the ice shelf"],
+            ending:    ["before breakfast", "on the ice shelf", "without warning", "in the huddle",
+                        "for no reason", "under a glacier", "at dawn", "beneath the waves",
+                        "at the rookery", "on the sofa", "during the blizzard", "again"],
+            noise:     ["Squawk.", "Noot?", "Gak!"],
+        };
 
-  <!--
-  <h2>2. Webtoys</h2>
-  <p>Some hacky little toys left around.</p>
+        const rand = (list) => list[Math.floor(Math.random() * list.length)];
 
-  <ul style="margin-left: 2rem">
-      <li><a href="/toys/tabloid">Tabloid IDE (now including closures!)</a></li>
-      <li><a href="/toys/turing">Turing Machine</a></li>
-      <li><a href="https://the-abstraction-engine.pages.dev">The Abstraction Engine</a></li>
-      <li><a href="/toys/godel">Godel Number Explorer</a></li>
-      <li><a href="/toys/julia">Julia Set Viewer (gpu.js accelerated)</a></li>
-      <li><a href="/toys/fourier">Discrete Fourier Transform Playground</a></li>
-  </ul>
-  -->
-  <footer style="display: flex; align-items: center; justify-content: center;">
-    <img width="100" src="/assets/penguin.gif">
-    <a href="https://liz.coffee"><img src="https://adelie.liz.coffee/img/blinkies/liz--coffee.gif" width="150" height="20"></a>
-  </footer>
-</div>
+        const patterns = [
+            ["article", "adjective", "species", "subject", "adverb", "verb", "object"],
+            ["article", "species", "subject", "verb", "object", "ending"],
+            ["article", "adjective", "subject", "verb", "object", "ending"],
+            ["article", "subject", "adverb", "verb", "object"],
+            ["article", "adjective", "subject", "adverb", "verb", "object", "ending"],
+        ];
 
-<script>
-  const d = new Date();
-  const long = d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-  document.getElementById('today').textContent = long;
-  document.getElementById('arxiv-date').textContent =
-    d.getDate() + ' ' + d.toLocaleDateString('en-US', { month: 'short' }) + ' ' + d.getFullYear();
+        const gen = () => {
+            const text = rand(patterns).map((cat) => rand(words[cat])).join(" ");
+            const out = text[0].toUpperCase() + text.slice(1) + ".";
+            return Math.random() < 0.25 ? out + " " + rand(words.noise) : out;
+        }
+        const n = 5 + Math.floor(Math.random() * 6);
+        document.getElementById("genpenguin").textContent = "";
+        for (let i = 0; i < n; i++) document.getElementById("genpenguin").textContent += gen() + (i === n - 1 ? "" : " ");
 
-  let pronounMode = 'she';
-  const pronounSpans = document.querySelectorAll('.pronoun');
-  function renderPronouns() {
-    pronounSpans.forEach(span => { span.textContent = span.dataset[pronounMode]; });
-  }
-  pronounSpans.forEach(span => {
-    span.addEventListener('click', () => {
-      pronounMode = pronounMode === 'she' ? 'he' : 'she';
-      renderPronouns();
-    });
-  });
-</script>
+        const copyCase = (fro, to) => {
+            if (fro.toLowerCase() === fro) return to.toLowerCase();
+            const froUpper = fro.toUpperCase();
+            if (froUpper === fro) return to.toUpperCase();
+            if (froUpper[0] !== fro[0]) throw Error('fuck you <3');
+            return to[0].toUpperCase() + to.slice(1);
+        };
 
+        let p = 1;
+        const pros = [['he', 'she'], ['him', 'her'], ['his', 'hers'], ['alexander', 'elizabeth']];
+        const proElements = () => document.querySelectorAll('.pro');
+        proElements().forEach(pro => pro.addEventListener('click', () => {
+            const pSet = [1, 0][p];
+            proElements().forEach(pro => pro.textContent = copyCase(pro.textContent, pros.find(ipro => ipro[p] === pro.textContent.toLowerCase())[pSet]));
+            p = pSet;
+        }));
+    </script>
 </body>
 </html>