Merge pull request #2 from lee0c/glitch

💈🦪 Updated with Glitch

.glitch-assets

@@ -117,3 +117,24 @@
 {"name":"20231101_153011 Copy.jpeg","date":"2024-08-19T17:09:09.593Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/20231101_153011%20Copy.jpeg","type":"image/jpeg","size":76019,"imageWidth":616,"imageHeight":615,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2F20231101_153011%20Copy.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"7SRlFlwfXWXqyAc4"}
 {"uuid":"7SRlFlwfXWXqyAc4","deleted":true}
 {"name":"Vee-Friday.jpg","date":"2024-08-19T17:09:09.593Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Vee-Friday.jpg","type":"image/jpeg","size":76019,"imageWidth":616,"imageHeight":615,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2F20231101_153011%20Copy.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"7SRlFlwfXWXqyAc4"}
+{"name":"IMG_0150.jpeg","date":"2024-08-24T13:54:06.494Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0150.jpeg","type":"image/jpeg","size":151337,"imageWidth":648,"imageHeight":648,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0150.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"wdbdD0tLASBG48Iz"}
+{"uuid":"wdbdD0tLASBG48Iz","deleted":true}
+{"name":"Lili.jpg","date":"2024-08-24T13:54:06.494Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Lili.jpg","type":"image/jpeg","size":151337,"imageWidth":648,"imageHeight":648,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0150.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"wdbdD0tLASBG48Iz"}
+{"name":"IMG_0177.jpeg","date":"2024-08-29T15:07:33.101Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0177.jpeg","type":"image/jpeg","size":491452,"imageWidth":1322,"imageHeight":1322,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0177.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"jbHIbVnbUMu4fUT3"}
+{"uuid":"jbHIbVnbUMu4fUT3","deleted":true}
+{"name":"laen.jpg","date":"2024-08-29T15:07:33.101Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/laen.jpg","type":"image/jpeg","size":491452,"imageWidth":1322,"imageHeight":1322,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0177.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"jbHIbVnbUMu4fUT3"}
+{"name":"IMG_0178.jpeg","date":"2024-08-29T20:26:51.071Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0178.jpeg","type":"image/jpeg","size":55012,"imageWidth":350,"imageHeight":350,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0178.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"AhNt9j6OUDupp0NP"}
+{"uuid":"AhNt9j6OUDupp0NP","deleted":true}
+{"name":"Intransitive-Lie.jpg","date":"2024-08-29T20:26:51.071Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Intransitive-Lie.jpg","type":"image/jpeg","size":55012,"imageWidth":350,"imageHeight":350,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0178.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"AhNt9j6OUDupp0NP"}
+{"name":"IMG_0179.jpeg","date":"2024-08-29T20:34:10.256Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0179.jpeg","type":"image/jpeg","size":112929,"imageWidth":1024,"imageHeight":1024,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0179.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"ZBQJQhUPlsHx8A2d"}
+{"uuid":"ZBQJQhUPlsHx8A2d","deleted":true}
+{"name":"Molly-Litherland.jpg","date":"2024-08-29T20:34:10.256Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Molly-Litherland.jpg","type":"image/jpeg","size":112929,"imageWidth":1024,"imageHeight":1024,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0179.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"ZBQJQhUPlsHx8A2d"}
+{"name":"IMG_0182.jpeg","date":"2024-08-29T22:19:31.828Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0182.jpeg","type":"image/jpeg","size":2582441,"imageWidth":3024,"imageHeight":3024,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0182.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"AnO4qAgqCLsVtdZ2"}
+{"uuid":"AnO4qAgqCLsVtdZ2","deleted":true}
+{"name":"Amata.jpg","date":"2024-08-29T22:19:31.828Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Amata.jpg","type":"image/jpeg","size":2582441,"imageWidth":3024,"imageHeight":3024,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0182.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"AnO4qAgqCLsVtdZ2"}
+{"name":"IMG_0183.jpeg","date":"2024-08-29T22:23:26.798Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0183.jpeg","type":"image/jpeg","size":261032,"imageWidth":1080,"imageHeight":1080,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0183.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"6z6HR9xBrQzYDJc6"}
+{"uuid":"6z6HR9xBrQzYDJc6","deleted":true}
+{"name":"Arina-Grace.jpg","date":"2024-08-29T22:23:26.798Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Arina-Grace.jpg","type":"image/jpeg","size":261032,"imageWidth":1080,"imageHeight":1080,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/thumbnails%2FIMG_0183.jpeg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"6z6HR9xBrQzYDJc6"}
+{"name":"IMG_0184.png","date":"2024-08-30T14:54:42.695Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0184.png","type":"image/png","size":915,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0184.png","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"23MzMMdMMNzs342p"}
+{"uuid":"23MzMMdMMNzs342p","deleted":true}
+{"name":"Acin-Fals.png","date":"2024-08-30T14:54:42.695Z","url":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Acin-Fals.png","type":"image/png","size":915,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/IMG_0184.png","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"23MzMMdMMNzs342p"}

artists.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="https://glitch.com/favicon.ico" />
+    <link rel="icon" href="https://i0.wp.com/transrescue.org/wp-content/uploads/2022/03/logoonblk200.png" />
 
     <title>Rescue Trans Rescue</title>
 
@@ -46,7 +46,7 @@
   </head>
   <body>
     <div class="wrapper">
-      <nav id="top-nav">
+      <nav role="navigation" id="top-nav">
         <a class="nav-item" href="/">home</a>
         <a class="nav-item" href="/artists">artists</a>
         <a class="nav-item" href="/signup">signup</a>
@@ -70,14 +70,14 @@
         </p>
       </div>
 
-      <div class="content" role="main">
+      <main>
-        <h1 class="title">Artists</h1>
+        <header role="banner"><h1 class="title">Artists</h1></header>
 
         <p>This page has moved to <a href="/artists">a simpler URL</a></p>
-      </div>
+      </main>
       
       <!-- Contents auto-generated by nav.js -->
-      <footer id="footer"></footer>
+      <footer role="contentinfo" id="footer"></footer>
     </div>
   </body>
 </html>

artists/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="https://glitch.com/favicon.ico" />
+    <link rel="icon" href="https://i0.wp.com/transrescue.org/wp-content/uploads/2022/03/logoonblk200.png" />
 
     <title>Rescue Trans Rescue</title>
 
@@ -50,7 +50,7 @@
   </head>
   <body>
     <div class="wrapper">
-      <nav id="top-nav">
+      <nav role="navigation" id="top-nav">
         <a class="nav-item" href="/">home</a>
         <a class="nav-item" href="/signup">signup</a>
         <button
@@ -73,7 +73,7 @@
         </p>
       </div>
 
-      <div class="content" role="main">
+      <main>
         <h1 class="title">Artists</h1>
         <p>
           Artists were asked to provide a short description of their plans. Read
@@ -85,10 +85,10 @@
         <div class="artist-grid" id="artist-grid">
           <!-- Contents are auto-generated by artists.js -->
         </div>
-      </div>
+      </main>
 
       <!-- Contents auto-generated by nav.js -->
-      <footer id="footer"></footer>
+      <footer role="contentinfo" id="footer"></footer>
     </div>
   </body>
 </html>

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="https://glitch.com/favicon.ico" />
+    <link rel="icon" href="https://i0.wp.com/transrescue.org/wp-content/uploads/2022/03/logoonblk200.png" />
 
     <title>Rescue Trans Rescue</title>
 
@@ -42,7 +42,7 @@
   </head>
   <body>
     <div class="wrapper">
-      <nav id="top-nav">
+      <nav role="navigation" id="top-nav">
         <a class="nav-item" href="/artists">artists</a>
         <a class="nav-item" href="/signup">signup</a>
         <button
@@ -65,14 +65,14 @@
         </p>
       </div>
 
-      <div class="content" role="main">
+      <main>
-        <h1 class="title">Rescue Trans Rescue</h1>
+        <header role="banner"><h1 class="title">Rescue Trans Rescue</h1></header> 
+        
         <img
           src="https://i0.wp.com/transrescue.org/wp-content/uploads/2022/03/logoonblk200.png"
           class="illustration"
           alt="Logo of Trans Rescue, which looks like a stlized helicopter flying through a pink and blue ring. Text underneath says Trans Rescue."
         />
-        <div>
         <h2>About Trans Rescue</h2>
         <blockquote>
           <p>
@@ -108,9 +108,9 @@
           of signing up for TR’s email list and a method for direct donation
           as well as sales.
         </p>
-          <h2>FAQs</h2>
+        <h2>Frequently Asked Questions</h2>
         <details id="expand-all">
-            <summary>toggle all FAQs</summary>
+          <summary>toggle all questions</summary>
         </details>
         <!-- Who are the artists? -->
         <details>
@@ -458,11 +458,10 @@
             #rescueTransRescue".
           </p>
         </details>
-        </div>
+      </main>
-      </div>
     </div>
     
     <!-- Contents auto-generated by nav.js -->    
-    <footer id="footer"></footer>
+    <footer role="contentinfo" id="footer"></footer>
   </body>
 </html>

scripts/artists.js

@@ -20,7 +20,7 @@ const FB = "fb";
       insta: "",
       fb: ""
     }
-  }
+  },
 */
 
 let artists = [
@@ -37,6 +37,12 @@ let artists = [
       fedi: "https://dice.camp/@Alien_Sunset",
     },
   },
+  {
+    name: "Acin Fals",
+    blurb: "<p>Pixel art with theme of 'fly together'.</p>",
+    imgSrc: "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Acin-Fals.png?v=1725029682695",
+    imgAlt: "A pixel art self portrait with light skin, dark hair, and a Pride-themed medical mask for a better future."
+  },
   {
     name: "Adhémara",
     imgSrc:
@@ -61,6 +67,19 @@ let artists = [
       fedi: "https://wandering.shop/@wizardofdocs",
     },
   },
+  {
+    name: "Amata",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Amata.jpg?v=1724969971828",
+    imgAlt:
+      "Selfie style photo taken at a cave entrance with nb white person with blue eyes. Hair does not show. Wearing a purple shirt and teal caving helmet with a mounted professional headlamp which is turned on. There is rope rigged in the background which disappears into the dark hole (the cave).",
+    blurb:
+      "<p>I am a cave scientist & photographer. While I am willing to offer any images you see on my website, of focus will be a square image with a shadowed figure outlined holding a progress pride flag in a cave near a waterfall.</p>",
+    socials: {
+      website: "www.sunguramy.com",
+      fedi: "https://flipping.rocks/@sunguramy",
+    },
+  },
   {
     name: "Anaïs Faë",
     imgSrc:
@@ -75,6 +94,17 @@ let artists = [
       insta: "https://www.instagram.com/anaisfae.art/",
     },
   },
+  {
+    name: "Arina Grace",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Arina-Grace.jpg?v=1724970206798",
+    imgAlt: "white trans woman wearing a black dress sitting on a blue couch",
+    blurb:
+      "<p>The fun part about photography is you aren't really sure what you're going to be able to offer until you get it.</p>",
+    socials: {
+      fedi: "https://mastodon.art/@SynthGal",
+    },
+  },
   {
     name: "Cassowary",
     imgSrc:
@@ -151,6 +181,22 @@ let artists = [
       fedi: "https://comicscamp.club/@nebulos",
     },
   },
+  {
+    name: "Intransitive Lie",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Intransitive-Lie.jpg?v=1724963211071",
+    imgAlt:
+      "A cartoon drawing of an elephant wearing a brown suit jacket holding up a sign which reads, 'Rise up.'",
+    blurb:
+      "<p>An abstract digital work derived from an image or images which relate to the theme of the trans experience and escape from tyranny, though I'll be honest, my art tends to be fairly open to interpretation</p>",
+    socials: {
+      website: "https://linktr.ee/intransitivelie",
+      fedi: "https://beige.party/@intransitivelie",
+      bsky: "https://bsky.app/profile/intransitivelie.bsky.social",
+      threads: "https://www.threads.net/@intransitivelie",
+      insta: "https://www.instagram.com/intransitivelie",
+    },
+  },
   {
     name: "JennyFluff",
     imgSrc:
@@ -188,6 +234,19 @@ let artists = [
       fedi: "https://mastoart.social/@Kite",
     },
   },
+  {
+    name: "laen",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/laen.jpg?v=1724944053101",
+    imgAlt:
+      "a cute green kodama kami sculpture sitting on a grey pebble-dashed stone wall. the kodama has sweet little arms, one of which is raised to its mouth, and it has a gentle, innocent face. behind it are some out-of-focus green leaves.",
+    blurb:
+      "<p>a cute raku ceramic sculpture of some kind, probably in trans or rainbow pride-flag colours. if the glaze agrees!</p>",
+    socials: {
+      website: "https://www.driftingspirits.art",
+      fedi: "https://sunny.garden/@moonrabbit",
+    },
+  },
   {
     name: "lee",
     imgSrc:
@@ -213,6 +272,18 @@ let artists = [
       fedi: "https://cathode.church/@SocialGaff",
     },
   },
+  {
+    name: "Lili",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Lili.jpg?v=1724507646494",
+    imgAlt:
+      "paper cut showing person with a mohawk sprawled sideways in a wheelie chair",
+    blurb:
+      "<p>Ink sketch of a mashup of gods from two different pantheons - Athena/Minerva the Greek/Roman goddess of wisdom, olives, battle strategy and Guan Yu (關羽) a deified military general known as a loyal protector with a legendary beard. In my imagination they are a harmoniously multifaceted trans god of strategy and protection with awesome armor.</p>",
+    socials: {
+      insta: "https://www.instagram.com/other_hsu_studios/",
+    },
+  },
   {
     name: "mari",
     imgSrc:
@@ -225,6 +296,19 @@ let artists = [
       fedi: "https://spanner.works/@bouncinglime",
     },
   },
+  {
+    name: "Molly Litherland",
+    imgSrc:
+      "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/Molly-Litherland.jpg?v=1724963650256",
+    imgAlt:
+      "A photograph of a portion of a watercolor flower painting. Three soft pastel pencils are resting on the painting in the pink, blue, and white colors of the trans flag.",
+    blurb:
+      "<p>I'm working on a piece featuring a caterpillar in the colors of the trans flag. It is climbing a branch surrounding in blooms in the colors of the LGBTQIA+ movement. I do a lot of nature are in a realistic style, and this will follow suit. The complete work will be 9x12 inches on high quality paper using soft pastels. I will use a protective spray to prevent the pastels from smudging, but care should be taken and the art should be displayed behind glass if it all possible. I would be willing to ship it framed if more than the minimum bid is reached.</p>",
+    socials: {
+      website: "https://art.mlitherland.com",
+      fedi: "https://tech.lgbt/@MollyBeth",
+    },
+  },
   {
     name: "Nicky Roscoe-Calvert",
     imgSrc:
@@ -357,6 +441,13 @@ let artists = [
   },
 ];
 
+function openCorrespondingDetail(event) {
+  let img = event.target;
+  let details = img.nextElementSibling;
+  if (details.open) details.removeAttribute("open");
+  else details.setAttribute("open", true);
+}
+
 function makeSocial(socialType, socialLink) {
   let iconHTML;
   switch (socialType) {
@@ -394,13 +485,6 @@ function makeSocial(socialType, socialLink) {
   return social;
 }
 
-if (document.getElementById("test-social-grid")) {
-  let socialDiv = document.getElementById("test-social-grid");
-  for (const key in artists[0].socials) {
-    socialDiv.appendChild(makeSocial(key, artists[0].socials[key]));
-  }
-}
-
 function makeArtist({ name, imgSrc, imgAlt, blurb, socials }) {
   let artist = document.createElement("div");
   artist.className = "artist";
@@ -414,6 +498,7 @@ function makeArtist({ name, imgSrc, imgAlt, blurb, socials }) {
       "https://cdn.glitch.global/4c6d23ef-8570-4ac4-ade9-a8daff6f3f9a/no-image.jpg?v=1723815950068";
     img.alt = "a 'missing image' icon";
   }
+  img.addEventListener("click", openCorrespondingDetail);
   artist.appendChild(img);
 
   let details = document.createElement("details");

scripts/nav.js

@@ -62,8 +62,8 @@ const ALIGN = "alignment";
 const LEFT = "left";
 const RIGHT = "right";
 
-const LEFT_ICON = '<i class="fa-regular fa-hand-point-left"></i>';
+const LEFT_ICON = '<i class="fa-regular fa-hand-point-left" aria-hidden="true"></i>';
-const RIGHT_ICON = '<i class="fa-regular fa-hand-point-right"></i>';
+const RIGHT_ICON = '<i class="fa-regular fa-hand-point-right" aria-hidden="true"></i>';
 
 /* Menu alignment - right or left handed */
 let align = localStorage.getItem(ALIGN);
@@ -99,10 +99,12 @@ function changeAlign(align) {
 
 changeAlign(align);
 
-function toggleAlign() {
+function toggleAlign(event) {
   if (align === LEFT) align = RIGHT;
   else if (align === RIGHT) align = LEFT;
   changeAlign(align);
+  
+  if (event.detail === 0) alignToggle.focus();
 }
 
 alignToggle.addEventListener("click", toggleAlign);

signup/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="https://glitch.com/favicon.ico" />
+    <link rel="icon" href="https://i0.wp.com/transrescue.org/wp-content/uploads/2022/03/logoonblk200.png" />
 
     <title>Rescue Trans Rescue</title>
 
@@ -47,7 +47,7 @@
   </head>
   <body>
     <div class="wrapper">
-      <nav id="top-nav">
+      <nav role="navigation" id="top-nav">
         <a class="nav-item" href="/">home</a>
         <a class="nav-item" href="/artists">artists</a>
         <button
@@ -70,8 +70,8 @@
         </p>
       </div>
 
-      <div class="content" role="main">
+      <main>
-        <h1 class="title">Sign Up!</h1>
+        <h1 role="banner" class="title">Sign Up!</h1>
 
         <div class="iframe-flex">
           <div class="iframe">
@@ -114,10 +114,10 @@
             </p>
           </div>
         </div>
-      </div>
+      </main>
     </div>
   </body>
 
   <!-- Contents auto-generated by nav.js -->
-  <footer id="footer"></footer>
+  <footer role="contentinfo" id="footer"></footer>
 </html>

styles/details.css

@@ -16,6 +16,10 @@ details summary {
   cursor: pointer;
 }
 
+details ::marker {
+  content: "+ ";
+}
+
 #expand-all summary {
   background-color: var(--color-accent);
 }

styles/main.css

@@ -1,10 +1,5 @@
 /* Our default values set as CSS variables */
 :root {
-  --color-bg: #2e303e;
-  --color-text-main: #ebeeef;
-  --color-primary: #25b0bc;
-  --color-accent: #ee9fcb;
-  --color-warn: #fccf08;
   --wrapper-height: 87vh;
   --image-max-width: 300px;
   --image-margin: 3rem;
@@ -18,6 +13,7 @@
   --color-text-main: #2e303e;
   --color-primary: #18737b;
   --color-accent: #94195d;
+  --color-warn: #d43a58;
 }
 
 .dark {
@@ -25,6 +21,7 @@
   --color-text-main: #ebeeef;
   --color-primary: #25b0bc;
   --color-accent: #ee9fcb;
+  --color-warn: #fec81a;
 }
 
 /* Basic page style resets */
@@ -59,6 +56,7 @@ a:visited {
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
+  border-radius: 1rem;
 }
 
 a:after {
@@ -169,7 +167,7 @@ body {
   margin: 0 1rem;
 }
 
-.content {
+main {
   display: block;
   flex-direction: column;
   align-items: center;
@@ -184,18 +182,22 @@ h1 {
   text-align: center;
 }
 
-.content a:link,
+main a:link,
-.content a:visited {
+main a:visited {
   color: var(--color-accent);
 }
 
 @media (hover: hover) {
-  .content a:hover {
+  main a:hover {
     background: var(--color-accent);
     color: var(--color-bg);
   }
 }
 
+:focus-visible {
+  outline: 3px solid var(--color-warn);
+}
+
 /* Very light scaling for our title */
 .title {
   color: var(--color-accent);