added grid for gallery

content/assets/theme.css

@@ -283,8 +283,18 @@ ol.pages li a {
   padding: 0 1em;
 }
 
+section.visual {
+  display: grid;
+  grid-gap: 1em;
+  align-items: center;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+section.visual figure { margin: 0 }
 figure img {
   max-width: 100%;
+  height: auto;
+  /* aspect-ratio: attr(width) / attr(height); */
   vertical-align: top;
 }
 

src/Visual.hs

@@ -5,40 +5,50 @@ import Common
 import Templates (outerWith, loading_)
 import Lucid
 
+
+thumbWidth :: Int
+thumbWidth = 710
+
+
 build :: Task IO ()
 build = do
     pictures <- match "visual/*" \src -> do
         copyFile src
+        callCommandWith
+            (\a b -> "convert " <> a <> " " <> b)
+            (-<.> "webp")
+            src
         src' <- toAbsolute src
         size <- (resized . read)
                 <$> readCommand "identify" ["-ping", "-format", "(%w, %h)", src']
-      processMagick src
+        callCommandWith
+            (\a b -> "convert -resize 710x " <> a <> " " <> b)
+            (-<.> "thumb.webp")
+            src
             <&> timestamped
             <&> fmap (size,) 
 
     watch pictures $ match_ "./visual.rst" \src -> do
         intro <- compilePandoc src
         write "visual.html" $ renderVisual intro (recentFirst pictures)
-
+    where
-resized :: (Int, Int) -> (Int, Int)
+        resized :: (Int, Int) -> (Int, Int)
-resized (width, height) = (710, round $ fi height * 710.0 / fi width)
+        resized (width, height) =
+            (thumbWidth, round $ fi height * fi thumbWidth / fi width)
             where
                 fi :: Int -> Float
                 fi = fromIntegral
 
+
 renderVisual :: Text -> [Timestamped ((Int, Int), FilePath)] -> Html ()
 renderVisual txt imgs =
     outerWith def {title = "visual"} do
         toHtmlRaw txt
         hr_ []
-        section_ $ forM_ imgs \ (Timestamped _ ((width, height), p)) ->
+        section_ [class_ "visual"] $
-            figure_ $ img_
+            forM_ imgs \ (Timestamped _ ((width, height), p)) ->
+                figure_ $ a_ [href_ (fromString (replaceExtensions p "webp"))] $ img_
                     [ src_ (fromString p)
                     , width_ (fromString $ show width)
                     , height_ (fromString $ show height)
                     , loading_ "lazy" ]
-
-processMagick :: FilePath -> Task IO FilePath
-processMagick = callCommandWith
-    (\a b -> "convert -resize 710x " <> a <> " " <> b)
-    (-<.> "thumb.webp")