more style stuff

style/gallery.css

@@ -10,7 +10,7 @@ body {
   grid-gap: 1.5em;
   justify-content: center;
   justify-items: center;
-  align-items: center;
+  align-items: start;
 
   --image-size: 200px;
   --border-thickness: 2px;
@@ -23,8 +23,11 @@ body {
   padding: 0;
   margin: 0;
   position: relative;
-  width: calc(var(--image-size) + 2 * var(--border-thickness));
+  width: var(--image-size);
-  height: calc(var(--image-size) + 2 * var(--border-thickness));
+  height: var(--image-size);
+  box-shadow: 0 0 10px var(--shadow);
+  border: 2px solid var(--text);
+  overflow: hidden;
 }
 
 figure {
@@ -32,17 +35,8 @@ figure {
   padding: 0;
 }
 
-.item * {
-  transition: all 0.2s ease-in-out;
-}
-
-.item img {
-  border: 2px solid var(--text);
-  box-shadow: 0 0 10px var(--shadow);
-}
-
 .item figcaption {
-  width: calc(100% - 4 * var(--border-thickness));
+  width: calc(100% - 2 * var(--border-thickness));
   margin: 0;
   padding: var(--border-thickness);
 
@@ -50,16 +44,62 @@ figure {
   left: 0;
   bottom: 0;
 
+  font-size: 80%;
+  text-align: center;
+
   background: hsl(0, 0%, 100%, 75%);
-  text-shadow: 0 0 2px white;
+  text-shadow:
-  border: 2px solid var(--text);
+    -1px -1px 1px white,
+     1px -1px 1px white,
+    -1px  1px 1px white,
+     1px  1px 1px white;
+  border-top: 2px solid var(--text);
 }
 
-.item:hover img {
+
-  filter: contrast(120%);
+@media (hover) {
+  .item:hover figcaption {
+    opacity: 20%;
+  }
+
+  @media (prefers-reduced-motion) {
+    .item:hover figcaption {
+      transform: translateY(80%);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .item:hover img {
+      filter: contrast(120%);
+    }
+
+    .item:hover figcaption {
+      transform: translate(-20%, 80%) rotateZ(7deg);
+    }
+
+    .item * {
+      transition: all 0.2s ease-in-out;
+    }
+  }
 }
 
-.item:hover figcaption {
+@media (hover: none) {
-  opacity: 20%;
+  .item a {
-  transform: translate(-5%, 80%) rotateZ(7deg);
+    display: block;
+    margin: 0;
+    height: var(--image-size);
+  }
+
+  .item img {
+    margin-bottom: 0;
+  }
+
+  .item figcaption {
+    position: static;
+    background: hsl(0, 0%, 100%, 50%);
+  }
+
+  .item {
+    height: auto;
+  }
 }

style/index.css

@@ -7,6 +7,7 @@ body {
 .gallery-list {
   display: grid;
   grid-template-columns: repeat(2, 50%);
+  align-items: center;
 
   margin: 0;
   padding: 0;
@@ -20,18 +21,19 @@ body {
   font-weight: inherit;
   color: var(--text);
   padding: 0.5em;
-
-  transition: all 0.25s ease-in-out;
 }
 
 .gallery-list a:hover {
-  transform: scale(110%);
   text-decoration: none;
 }
 
 .gallery-list li {
   list-style: none;
   text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   background: var(--green);
 }
@@ -49,9 +51,25 @@ body {
   background: var(--red);
 }
 
-.nsfw a:after {
+.nsfw a::after {
   content: url(18_plus.png);
   padding-left: 0.15em;
   vertical-align: middle;
-  opacity: 75%;
+}
+
+@media (hover) and (prefers-reduced-motion: no-preference) {
+  .gallery-list a:hover {
+    transform: scale(110%);
+    transition: transform 0.25s ease-in-out;
+  }
+}
+
+@media (pointer: coarse) {
+  .gallery-list {
+    font-size: 300%;
+  }
+
+  .nsfw a::after {
+    vertical-align: baseline;
+  }
 }

style/single.css

@@ -20,6 +20,7 @@ body {
 #mainfig {
   justify-content: center;
   border: 2px solid var(--text);
+  box-shadow: 0 0 30px var(--shadow);
   margin: auto;
   height: min-content;
   width: min-content;
@@ -70,8 +71,10 @@ figcaption p {
 
 .info > section {
   display: grid;
-  grid-gap: 1em;
+  --grid-gap: 1em;
-  grid-template-columns: 10em calc(var(--page-size) - 11em);
+  grid-gap: var(--grid-gap);
+  grid-template-columns:
+    calc(20% - var(--grid-gap) / 2) calc(80% - var(--grid-gap) / 2);
   justify-content: center;
   align-items: baseline;
   margin: 1em;
@@ -139,3 +142,24 @@ footer {
   font-style: oblique;
   text-align: center;
 }
+
+
+@media (pointer: coarse) {
+  .info, .alts {
+    font-size: 200%;
+  }
+
+  footer {
+    font-size: 150%;
+  }
+
+  .alts .nsfw label::after {
+    content: url(18_plus.png);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #cw + * img {
+    transition: none;
+  }
+}