add dates to gallery

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);
+    }
   }
 }