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>
       </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 ""

style/shiny/gallery.css

@@ -154,7 +154,7 @@
 }
 
 
-.grid {
+main {
   padding: 0;
   display: grid;
   grid: auto-flow / repeat(auto-fit, var(--image-size));
@@ -169,6 +169,7 @@
   width: var(--image-size);
   height: var(--image-size);
   overflow: hidden;
+  margin: 0;
 
   position: relative;
 }
@@ -189,13 +190,9 @@
   /* uncomment to reenable line breaks before year markers */
   /* grid-area: auto / 1; */
   padding: var(--border-thickness);
-}
-
-.year-text {
-  --gap: 0.2em;
   display: grid;
   grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
-  grid-gap: var(--gap);
+  grid-gap: 0;
   align-items: center;
   justify-content: center;
   height: 100%;