support updates

style/shiny/gallery.css

@@ -116,17 +116,12 @@ body {
   box-shadow: var(--focus-box);
 }
 
-.item[data-date]::before {
-  content: attr(data-date);
-}
-
-
 figure {
   margin: 0;
   padding: 0;
 }
 
-figcaption, .item::before {
+figcaption .date, figcaption .title {
   position: absolute;
   width: 100%;
   border: 1px solid var(--text-col);
@@ -134,10 +129,11 @@ figcaption, .item::before {
   text-align: center;
   background: hsl(0, 0%, 0%, 75%);
   font-size: 80%;
+  text-shadow: none;
 }
 
-figcaption { bottom: -1px; left: -1px; }
-.item::before { top: -1px; left: -1px; }
+figcaption .date { top: -1px; left: -1px; }
+figcaption .title { bottom: -1px; left: -1px; }
 
 .year-marker {
   grid-area: auto / 1;
@@ -164,19 +160,31 @@ figcaption { bottom: -1px; left: -1px; }
   transform: scaleX(110%);
 }
 
-.item.nsfw::after {
-  --size: calc(1/4 * var(--image-size));
-  content: url(../18_plus_white.svg);
+.item.nsfw::before, .item[data-updated="true"]::after {
   height: var(--size);
   width: var(--size);
 
   display: inline-block;
   position: absolute;
+
+}
+
+.item.nsfw::before {
+  --size: calc(1/4 * var(--image-size));
+  --base-transform: rotate(var(--nsfw-sticker-rotate));
+  content: url(../18_plus_white.svg);
   top: calc(1em + 3px);
   right: 3px;
-
-  transform: rotate(var(--nsfw-sticker-rotate));
   mix-blend-mode: multiply;
+  transform: var(--base-transform);
+}
+
+.item[data-updated="true"]::after {
+  --size: calc(1/4 * var(--image-size));
+  content: url(../sparkles.svg);
+  bottom: calc(1em + 3px);
+  right: 3px;
+  mix-blend-mode: overlay;
 }
 
 footer {
@@ -187,30 +195,33 @@ footer {
 
 
 @media (hover) {
-  .item:hover figcaption, .item:hover::before {
+  .item:hover .date, .item:hover .title,
+  .item:hover::before, .item:hover::after {
     filter: opacity(20%);
   }
 
-  @media (prefers-reduced-motion) {
-    .item:hover figcaption {
-      transform: translateY(80%);
-    }
-  }
-
   @media (prefers-reduced-motion: no-preference) {
-    figcaption, .item::before {
+    figcaption .date, figcaption .title, .item::before, .item::after {
       transition-property: filter, transform;
-      transition-duration: 0.25s;
+      transition-duration: 0.15s;
       transition-timing-function: ease-in-out;
     }
 
-    .item:hover figcaption {
+    .item:hover .title {
       transform: translate(-20%, 80%) rotateZ(7deg);
     }
 
-    .item:hover::before {
+    .item:hover .date {
       transform: translate(20%, -80%) rotateZ(7deg);
     }
+
+    .item:hover::before {
+      transform: translate(1.5em, -1.5em) var(--base-transform);
+    }
+
+    .item:hover::after {
+      transform: translate(1.5em, 1.5em);
+    }
   }
 }
 
@@ -219,10 +230,14 @@ footer {
     height: min-content;
   }
 
-  figcaption {
+  figcaption .date, figcaption .title {
     position: initial;
   }
 
+  figcaption .date::after {
+    content: ':';
+  }
+
   .item a {
     display: block;
     height: var(--image-size);

style/shiny/single.css

@@ -132,6 +132,28 @@ body {
   margin: 0.35em;
 }
 
+#updates dl {
+  display: grid;
+  grid-template-columns: min-content auto;
+  grid-gap: 0.5em;
+  align-items: baseline;
+}
+
+#updates dt {
+  font-size: 80%;
+  font-weight: 700;
+  grid-area: auto / 1;
+}
+
+#updates dd {
+  grid-area: auto / 2;
+}
+
+.updated {
+  font-size: 90%;
+  font-style: italic;
+}
+
 footer {
   text-align: center;
   margin-top: 1em;