improved accessibility with captions, assuming I understand the html spec correctly

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>

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>

html/my-laptop.html

@@ -22,25 +22,13 @@
             </section>
             <section>
                 <image-column-container>
-                    <image-container style='min-width: 33%'>
+                    <image-container>
-                        <flex-column style='max-width: 100%'>
+                        <flex-column style='margin-right: 10px;'>
-                        <div class=captioned-image>
+                            $[img-caption "/files/laptop-keyboard.png" "photograph of my laptops keyboard, which is blank because I sanded it."]
-                            <img src="/files/laptop-keyboard.png" alt="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."]
-                            <p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
+                            $[img-caption "/files/keybinds_graph.png" "Graph of my keybindings, they are hard to see"]
-                        </div>
+                            $[img-caption "/files/laptop-charger-barrel.jpg" "charger barrel size adapter sticking out the back of my laptop"]
-                        <div class=captioned-image>
+                        </flex-column>
-                            <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>
                     <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-caption "/files/laptop-xkb-geometry.png" "my xkb geometry file compiled to a pdf"]
-                            <img src='/files/laptop-xkb-geometry.png'/><br>
-                            <p>my xkb geometry file compiled to a pdf</p>
-                        </div>
                         <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.

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>

html/server-migration.html

@@ -17,10 +17,7 @@
                 <image-column-container>
                     <image-container>
                         <flex-column>
-                            <div class=captioned-image>
+                            $[img-caption "/files/natalie-holding-server.png" "me holding the server I got from the school basement"]
-                                <img src="/files/natalie-holding-server.png" alt="me holding a server">
-                                <p>The server in question.</p>
-                            </div>
                         </flex-column>
                     </image-container>
                     <text-column>

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>