new style

style/tum/index.css

@@ -4,7 +4,7 @@ body {
   width: 40em;
 }
 
-.gallery-list, .link-list {
+.list {
   display: grid;
   align-items: center;
   --gap: 0.05em;
@@ -18,30 +18,30 @@ body {
   font-weight: 600;
 }
 
-.gallery-list {
+#gallery-list {
   grid-template-columns: repeat(2, 50%);
 }
 
-.link-list {
+#link-list {
   grid-template-columns: 100%;
 }
 
-.gallery-list + .link-list {
+#gallery-list + #link-list {
   padding-top: var(--gap);
 }
 
-main a {
+.list a {
   display: block;
   font-weight: inherit;
   color: var(--text);
   padding: 0.5em;
 }
 
-main a:hover {
+.list a:hover {
   text-decoration: none;
 }
 
-main li {
+.list li {
   list-style: none;
   text-align: center;
   height: 100%;
@@ -50,7 +50,7 @@ main li {
   justify-content: center;
 }
 
-.gallery-list li {
+#gallery-list li {
   background: var(--green);
 }
 
@@ -62,12 +62,19 @@ li.nsfw {
   background: var(--yellow);
 }
 
-.nsfw a::after {
-  content: url(../18_plus.svg);
-  display: inline-block;
-  width: 1em; height: 1em;
-  padding-left: 0.15em;
-  vertical-align: -0.1em;
+@media screen {
+  .nsfw a::after {
+    content: url(../18_plus.svg);
+    display: inline-block;
+    width: 1em; height: 1em;
+    padding-left: 0.15em;
+    vertical-align: -0.1em;
+  }
+}
+@media speech {
+  .nsfw::after {
+    content: ' (nsfw)';
+  }
 }
 
 footer {

style/tum/single.css

@@ -150,12 +150,6 @@ footer {
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  #cw + * img {
-    transition: none;
-  }
-}
-
 @media (prefers-reduced-transparency) {
   #cw {
     background: hsl(var(--text-hue), 35%, 15%);
@@ -163,6 +157,6 @@ footer {
   }
 
   #cw + * img {
-    filter: none;
+    filter: initial;
   }
 }