make gallery badges more visible

if each category has only a single image (or is empty) after filtering,
then reuse the category names for the buttons

make-pages/SinglePage.hs

@@ -199,7 +199,7 @@ makeDesc (LongDesc fs) = [b|@0
       </div>
     |]
 
-addIds :: Images' (Image, a) -> Images' (Image, a, Text)
+addIds :: Traversable t => t (Image, a) -> t (Image, a, Text)
 addIds = snd . mapAccumL makeId Set.empty where
   makeId used (img, x) = (Set.insert newId used, (img, x, newId)) where
     newId = head $ filter (\i -> not $ i `Set.member` used) ids
@@ -213,7 +213,11 @@ makeButtonBar title images =
     Uncat [_]       -> ""
     Cat   [(_,[_])] -> ""
     Uncat imgs      -> makeNav "uncat" $ makeAlts imgs
-    Cat   cats      -> makeNav "cat"   $ map (uncurry makeCat) cats
+    Cat   cats
+      | all ((<= 1) . length . snd) cats ->
+          makeButtonBar title $ Uncat $ flatten cats
+      | otherwise ->
+          makeNav "cat"   $ map (uncurry makeCat) cats
  where
    makeNav (cls :: Text) inner = [b|@0
       <nav id=alts class=$cls aria-label="alternate versions">
@@ -231,6 +235,10 @@ makeButtonBar title images =
         </ul> |]
      where elems = map (\(img,sz,i) -> altButton img sz i) imgs
 
+flatten :: [(Text, [(Image, Size, Text)])] -> [(Image, Size, Text)]
+flatten cats =
+  addIds [(img {label = cat}, sz) | (cat, is) <- cats, (img, sz, _) <- is]
+
 altButton :: Image -> Size -> Text -> Builder
 altButton img size i = [b|@0
   <li$nsfwClass>

style/shiny/gallery.css

@@ -170,7 +170,7 @@ figcaption .title { bottom: -1px; left: -1px; }
   display: inline-block;
   position: absolute;
 
-  mix-blend-mode: multiply;
+  mix-blend-mode: hard-light;
 }
 
 .item.nsfw::before {