use headings & figures for gallery grid instead of a ul

make-pages/GalleryPage.hs

@@ -80,9 +80,7 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|
       </nav>
 
       <main>
-        <ul class=grid>
-          $items
-        </ul>
+        $items
       </main>
     </div>
   |]
@@ -137,8 +135,9 @@ makeYearItems :: Bool -- ^ nsfw
               -> [(FilePath, Info)]
               -> Builder
 makeYearItems nsfw year infos = [b|
-    <li class="item year-marker" id="marker-$year">
-      <span class=year-text>$year'</span>
+    <h2 class="item year-marker" id="marker-$year" aria-label=$year>
+      $year'
+    </h2>
     $items
   |]
  where
@@ -147,16 +146,17 @@ makeYearItems nsfw year infos = [b|
 
 makeItem :: Bool -> FilePath -> Info -> Builder
 makeItem nsfw file info@(Info {bg}) = [b|
-    <li class="item post$nsfw'" data-year=$year' data-updated="$updated'"
+    <figure class="item post$nsfw'" data-year=$year' data-updated="$updated'"
         data-tags="$tags'">
       <a href="$dir">
         <img src="$thumbnail" loading=lazy$bgStyle
           width=200 height=200
           title="$tooltip">
       </a>
+    </figure>
   |]
  where
-  title     = fromMaybe info.title $ info.galleryTitle
+  title     = fromMaybe info.title info.galleryTitle
   dir       = takeDirectory file
   thumbnail = getThumb dir info
   nsfw'     = if nsfw && anyNsfw info then [b|$& nsfw|] else ""