superselect/natalie-webbed-site
1
0
Fork 0
forked from nat/webbed-site
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
gnat 2024-07-27 15:15:57 -07:00
parent ed6f7b5ac3
commit 4badb94386
6 changed files with 13 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/I-dont-like-IT.html
View File

@ -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>

2
html/header.html
View File

@ -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>

31
html/my-laptop.html
View File

@ -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.

2
html/natalie-sightings.html
View File

@ -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>

5
html/server-migration.html
View File

@ -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>

2
html/site-info.html
View File

@ -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>