From 4badb943862a652b9bb9720e3700e81cc9142ca3 Mon Sep 17 00:00:00 2001
From: gnat <natalieconnolly621@gmail.com>
Date: Sat, 27 Jul 2024 15:15:57 -0700
Subject: [PATCH] improved accessibility with captions, assuming I understand
 the html spec correctly

---
 html/I-dont-like-IT.html    |  2 +-
 html/header.html            |  2 +-
 html/my-laptop.html         | 31 ++++++++-----------------------
 html/natalie-sightings.html |  2 +-
 html/server-migration.html  |  5 +----
 html/site-info.html         |  2 +-
 6 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/html/I-dont-like-IT.html b/html/I-dont-like-IT.html
index 5ef35cc..7c4fc9e 100644
--- a/html/I-dont-like-IT.html
+++ b/html/I-dont-like-IT.html
@@ -89,7 +89,7 @@
                     If my understanding of their network is correct (which is reasonably likely), they would have very easily been able to revoke the leaked cert and issue a new one. No clue why they didn't.
                     Anyways, the important part is I received this email:
                 </p>
-                <img src='/files/dean-email-why-it-matters.png'/>
+                $[img-caption "/files/dean-email-why-it-matters.png" "Email to my parents from the dean of students where she blatantly lies"]
                 <p>
                     Problems with this email:<ul>
                         <li>The person the dean describes as the director of IT is not the director of IT.</li>
diff --git a/html/header.html b/html/header.html
index c31d58f..4fe94b1 100644
--- a/html/header.html
+++ b/html/header.html
@@ -1,7 +1,7 @@
 <header>
     <nav>
         <ul>
-            <li><h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1></li>
+            <li><h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]</h1></li>
             <li><a href='/'>home</a></li>
             <li><a href=$PREV_URL$>back</a> 
             <li><a href='/html/site-info.html'>site info</a></li>
diff --git a/html/my-laptop.html b/html/my-laptop.html
index 3b53fe8..ccae6d2 100644
--- a/html/my-laptop.html
+++ b/html/my-laptop.html
@@ -22,25 +22,13 @@
             </section>
             <section>
                 <image-column-container>
-                    <image-container style='min-width: 33%'>
-                        <flex-column style='max-width: 100%'>
-                        <div class=captioned-image>
-                            <img src="/files/laptop-keyboard.png" alt="photograph of my laptops keyboard, which is blank because I sanded it.">
-                            <p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
-                        </div>
-                        <div class=captioned-image>
-                            <img src="/files/laptop-radio.jpg" alt="The software defined radio that goes in my laptop's disc drive.">
-                            <p>The software defined radio that goes in my laptop's disc drive.</p>
-                        </div>
-                        <div class=captioned-image>
-                            <img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck).">
-                            <p>Graph of my keybinds (good luck).</p>
-                        </div>
-                        <div class=captioned-image>
-                            <img src="/files/laptop-charger-barrel.jpg" alt="charger bodge.">
-                            <p>charger bodge.</p>
-                        </div>
-                            <flex-column>
+                    <image-container>
+                        <flex-column style='margin-right: 10px;'>
+                            $[img-caption "/files/laptop-keyboard.png" "photograph of my laptops keyboard, which is blank because I sanded it."]
+                            $[img-caption "/files/laptop-radio.jpg" "The software defined radio that goes in my laptop's disc drive."]
+                            $[img-caption "/files/keybinds_graph.png" "Graph of my keybindings, they are hard to see"]
+                            $[img-caption "/files/laptop-charger-barrel.jpg" "charger barrel size adapter sticking out the back of my laptop"]
+                        </flex-column>
                     </image-container>
                     <text-column>
                         <p>I have put an unreasonable amount of time in to messing with my laptop and as such am equally unreasonably proud of it.<br></p>
@@ -55,10 +43,7 @@
                             </ul>
                         Additionally, I have written a custom xkb file. Unfortunately the geometry file hasn't been updated since I modded in the new keyboard, but here it is anyways: <br>
                         </p>
-                        <div class=captioned-image style='max-width: 100%'>
-                            <img src='/files/laptop-xkb-geometry.png'/><br>
-                            <p>my xkb geometry file compiled to a pdf</p>
-                        </div>
+                        $[img-caption "/files/laptop-xkb-geometry.png" "my xkb geometry file compiled to a pdf"]
                         <p>
                             Disregard the fucked up escape key, I was messing with it earlier. My keyboard isn't that notable beyond binding control to caps lock and binding the old control key to mode_switch.
                             Additionally, when mode_switch is pressed while an alphabetic key is pressed, it types a greek letter instead.
diff --git a/html/natalie-sightings.html b/html/natalie-sightings.html
index 091dcde..0a69bbf 100644
--- a/html/natalie-sightings.html
+++ b/html/natalie-sightings.html
@@ -14,7 +14,7 @@
                 <p>They are reasonably rare. <br>These photographs are uneditted, my various cameras are just fucked up. Ignore the annoying aspect ratio.</p>
             </section>
             <section>
-                <flex-grid>$[for file in files/natalie-sightings/*; do echo "<flex-grid-item><img src=\"/$file\" width=\"250\"/></flex-grid-item>"; done]</flex-grid>
+                <flex-grid>$[for file in files/natalie-sightings/*; do echo "<flex-grid-item>$(img-caption "/$file")</flex-grid-item>"; done]</flex-grid>
             </section>
         </main> 
     </body>
diff --git a/html/server-migration.html b/html/server-migration.html
index b18722b..41d67f5 100644
--- a/html/server-migration.html
+++ b/html/server-migration.html
@@ -17,10 +17,7 @@
                 <image-column-container>
                     <image-container>
                         <flex-column>
-                            <div class=captioned-image>
-                                <img src="/files/natalie-holding-server.png" alt="me holding a server">
-                                <p>The server in question.</p>
-                            </div>
+                            $[img-caption "/files/natalie-holding-server.png" "me holding the server I got from the school basement"]
                         </flex-column>
                     </image-container>
                     <text-column>
diff --git a/html/site-info.html b/html/site-info.html
index a09b1fa..16ad9f0 100644
--- a/html/site-info.html
+++ b/html/site-info.html
@@ -54,7 +54,7 @@
             <section>
                 <p>
                     This website <del>is</del> was designed to look reasonably similar to my laptop:
-                    <img src='/files/my-laptop.png'/>
+                    $[img-caption "/files/my-laptop.png" "A screenshot of my laptop with its old colorscheme"]
                     *My laptop no longer looks like this.
                 </p>
             </section>