style & layout updates

style/shiny/gallery.css

@@ -3,13 +3,18 @@
 
 :root {
   --image-size: 200px;
-  --gap: 1em;
+  --badge-size: calc(1/4 * var(--image-size));
+  --gap: 0em;
 }
 
 @media (min-width: 1000px) {
   .page { max-width: 80%; }
 }
 
+.page {
+  padding: 2em calc(1/4 * var(--image-size));
+}
+
 #filters {
   margin: 1em 0 2em 0;
 }
@@ -33,7 +38,6 @@
 .filterlist {
   display: flex;
   flex-flow: row wrap;
-  /* justify-content: space-between; */
   padding: 0;
 
   font-weight: 500;
@@ -54,10 +58,7 @@
 }
 
 .filterlist label {
-  padding: 0.15em 0.4em;
-  border-radius: var(--button-radius);
-  background: var(--button-bg);
-  border: var(--button-border);
+  cursor: pointer;
 }
 
 .filterlist label::before {
@@ -154,35 +155,18 @@
 
 .item:not(.year-marker) {
   box-shadow: var(--text-shadow);
-  border: var(--border-thickness) solid var(--border-col);
-  border-radius: 0.5em;
-  background: hsl(340, 45%, 65%);
+  outline: var(--border-thickness) solid var(--border-col);
+  background: hsl(0, 0%, 0%, 50%);
+  clip-path: polygon(5% 0, 95% 10%, 95% 100%, 5% 90%);
+}
+.item img {
+  clip-path: polygon(7% 2%, 93% 12%, 93% 98%, 7% 88%);
 }
 
 .item:focus-within {
   box-shadow: var(--focus-box);
 }
 
-figure {
-  margin: 0;
-  padding: 0;
-}
-
-figcaption .date, figcaption .title {
-  position: absolute;
-  width: 100%;
-  border: 1px solid var(--border-col);
-  display: block;
-  text-align: center;
-  background: hsl(0, 0%, 0%, 75%);
-  text-shadow: none;
-}
-
-figcaption .date { top: -1px; left: -1px; }
-figcaption .title { bottom: -1px; left: -1px; }
-
-.date { text-transform: lowercase; }
-
 .year-marker {
   /* uncomment to reenable line breaks before year markers */
   /* grid-area: auto / 1; */
@@ -210,9 +194,8 @@ figcaption .title { bottom: -1px; left: -1px; }
 }
 
 .item.nsfw::before, .item[data-updated="true"]::after {
-  height: var(--size);
-  width: var(--size);
-  transform: var(--base-transform);
+  height: var(--badge-size);
+  width: var(--badge-size);
 
   display: inline-block;
   position: absolute;
@@ -221,19 +204,18 @@ figcaption .title { bottom: -1px; left: -1px; }
 }
 
 .item.nsfw::before {
-  --size: calc(1/4 * var(--image-size));
-  --base-transform: rotate(var(--nsfw-sticker-rotate));
+  transform: rotate(15deg);
   content: url(../18_plus_white.svg);
-  top: calc(1em + 3px);
-  right: 3px;
+  top: 11%;
+  right: 7%;
+  z-index: 100;
 }
 
 .item[data-updated="true"]::after {
-  --size: calc(1/4 * var(--image-size));
-  --base-transform: rotate(-8deg);
+  transform: rotate(-8deg);
   content: url(../sparkles.svg);
-  bottom: calc(1em + 3px);
-  right: 3px;
+  bottom: 4%;
+  right: 7%;
 }
 
 footer {
@@ -242,68 +224,6 @@ footer {
   margin-top: 1em;
 }
 
-
-@media (hover) and (pointer: fine) {
-  .item:hover .date, .item:hover .title,
-  .item:hover::before, .item:hover::after {
-    filter: opacity(20%);
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    figcaption .date, figcaption .title, .item::before, .item::after {
-      transition-property: filter, transform;
-      transition-duration: 0.15s;
-      transition-timing-function: ease-in-out;
-    }
-
-    .item:hover .title {
-      transform: translate(-20%, 80%) rotateZ(7deg);
-    }
-
-    .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) var(--base-transform);
-    }
-  }
-}
-
-@media (not hover), (pointer: coarse) {
-  .item:not(.year-marker) {
-    height: min-content;
-  }
-
-  figcaption .date, figcaption .title {
-    position: initial;
-  }
-
-  figcaption .date {
-    border-bottom: none;
-  }
-  figcaption .title {
-    border-top: none;
-  }
-
-  figcaption .date::after {
-    content: ':';
-  }
-
-  .item a {
-    display: block;
-    height: var(--image-size);
-  }
-
-  .item img {
-    margin-bottom: 0;
-  }
-}
-
 @media (pointer: coarse) {
   #filters label {
     font-size: 150%;