add dates to gallery

make-pages/GalleryPage.hs

@@ -8,6 +8,7 @@ import Data.HashSet (HashSet)
 import qualified Data.HashSet as HashSet
 import Data.List (intersperse, groupBy, sortOn)
 import qualified Data.Text.Lazy as Lazy
+import qualified Data.Time as Time
 import System.FilePath (takeDirectory, joinPath, splitPath)
 import GHC.Exts (Down (..), the)
 
@@ -130,8 +131,8 @@ makeYearItems nsfw year infos = [b|@4
   year' = show year & foldMap \c -> [b|<span class=y>$c</span>|]
 
 makeItem :: Bool -> FilePath -> Info -> Builder
-makeItem nsfw file info@(Info {title, bg}) = [b|@4
-    <li class="item post$nsfw'" data-tags="$tags'">
+makeItem nsfw file info@(Info {title, bg, date}) = [b|@4
+    <li class="item post$nsfw'" data-tags="$tags'" data-date="$date'">
       <figure>
         <a href="$dir">
           <img src="$thumb"$bgStyle>
@@ -144,4 +145,10 @@ makeItem nsfw file info@(Info {title, bg}) = [b|@4
   thumb = getThumb dir info
   nsfw' = if nsfw && #anyNsfw info then [b| nsfw|] else ""
   tags' = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info
+  date' = formatDateShort date
   bgStyle = ifJust bg \col -> [b| style="background: $col"|]
+
+formatDateShort :: Time.Day -> Builder
+formatDateShort date = [b|$day $month|] where
+  (_, m, day) = Time.toGregorian date
+  month = words "jan feb mar apr may jun jul aug sep oct nov dec" !! (m - 1)

style/shiny/gallery.css

@@ -111,16 +111,18 @@ body {
   box-shadow: var(--focus-box);
 }
 
+.item[data-date]::before {
+  content: attr(data-date);
+}
+
 
 figure {
   margin: 0;
   padding: 0;
 }
 
-figcaption {
+figcaption, .item::before {
   position: absolute;
-  bottom: -1px;
-  left: -1px;
   width: 100%;
   border: 1px solid var(--text-col);
   display: block;
@@ -129,6 +131,8 @@ figcaption {
   font-size: 80%;
 }
 
+figcaption { bottom: -1px; left: -1px; }
+.item::before { top: -1px; left: -1px; }
 
 .year-marker {
   grid-area: auto / 1;
@@ -163,7 +167,7 @@ figcaption {
 
   display: inline-block;
   position: absolute;
-  top: 3px;
+  top: calc(1em + 3px);
   right: 3px;
 
   transform: rotate(var(--nsfw-sticker-rotate));
@@ -178,7 +182,7 @@ footer {
 
 
 @media (hover) {
-  .item:hover figcaption {
+  .item:hover figcaption, .item:hover::before {
     filter: opacity(20%);
   }
 
@@ -189,7 +193,7 @@ footer {
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    .item figcaption {
+    figcaption, .item::before {
       transition-property: filter, transform;
       transition-duration: 0.25s;
       transition-timing-function: ease-in-out;
@@ -198,6 +202,10 @@ footer {
     .item:hover figcaption {
       transform: translate(-20%, 80%) rotateZ(7deg);
     }
+
+    .item:hover::before {
+      transform: translate(20%, -80%) rotateZ(7deg);
+    }
   }
 }