make buttonbar class

style/shiny/base.css

@@ -1,10 +1,6 @@
 @import url(/fonts/muller/muller.css);
 
 :root {
-  font-family: Muller;
-  font-size: x-large;
-  font-weight: 600;
-
   --gradient:
     linear-gradient(135deg,
         hsl(42deg,  67%, 70%),
@@ -14,11 +10,16 @@
         hsl(195deg, 67%, 67%),
         hsl(155deg, 57%, 62%)
       );
-  background: var(--gradient) fixed;
-  margin: 1em;
 
   --text-col: white;
   --nsfw-sticker-rotate: 15deg;
+
+  font-family: Muller;
+  font-size: 18pt;
+  font-weight: 600;
+
+  background: var(--gradient) fixed;
+  margin: 1em;
 }
 
 header {
@@ -81,6 +82,49 @@ footer {
 }
 
 
+.buttonbar.choice input {
+  display: none;
+}
+
+.buttonbar {
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-flow: row wrap;
+  margin-bottom: -0.5em;
+}
+
+.buttonbar.choice {
+  justify-content: center;
+}
+
+.buttonbar li {
+  list-style: none;
+  margin-bottom: 0.5em;
+}
+
+.buttonbar.choice label,
+.buttonbar:not(.choice) li {
+  --button-bg: hsl(330deg, 40%, 16%, 100%);
+  margin-right: 0.5em;
+  padding: 0 0.35em;
+  border-radius: 0.25em;
+
+  border: 1px solid var(--text-col);
+  background: var(--button-bg);
+  text-shadow: none;
+}
+
+.buttonbar.choice :checked + label {
+  color: var(--button-bg);
+  background: var(--text-col);
+}
+
+.buttonbar a {
+  text-decoration: none;
+}
+
+
 @media (prefers-color-scheme: dark) {
   :root {
     --gradient:
@@ -113,3 +157,11 @@ footer {
     --border-col: black;
   }
 }
+
+
+@media (pointer: coarse) {
+  .buttonbar {
+    font-size: 200%;
+    border-width: 2px;
+  }
+}

style/shiny/single.css

@@ -58,44 +58,7 @@ body {
   opacity: 65%;
 }
 
-
-.alts input {
-  display: none;
-}
-
-.alts ul, .tags ul, .links ul {
-  padding: 0;
-  display: flex;
-  align-items: flex-start;
-  flex-flow: row wrap;
-  margin-bottom: -0.5em;
-}
-
-.alts ul {
-  justify-content: center;
-}
-
-.alts li, .tags li, .links li {
-  list-style: none;
-  margin-bottom: 0.5em;
-}
-
-.alts label, .tags li, .links li {
-  margin-right: 0.5em;
-  padding: 0 0.35em;
-  border-radius: 0.25em;
-
-  border: 1px solid white;
-  background: hsl(330deg, 40%, 16%, 80%);
-  text-shadow: none;
-}
-
-.alts :checked + label {
-  color: hsl(330deg, 40%, 16%, 80%);
-  background: white;
-}
-
-.alts .nsfw label::after {
+#alts .nsfw label::after {
   content: url(../18_plus_white.svg);
   transform: rotate(var(--nsfw-sticker-rotate));
   display: inline-block;
@@ -104,14 +67,10 @@ body {
   padding-left: 0.25em;
 }
 
-.alts .nsfw :checked + label::after {
+#alts .nsfw :checked + label::after {
   content: url(../18_plus.svg);
 }
 
-.alts a, .tags a, .links a {
-  text-decoration: none;
-}
-
 .info section {
   display: grid;
   grid-template-columns: 10% auto;
@@ -132,10 +91,6 @@ footer {
 }
 
 @media (pointer: coarse) {
-  .alts label, .tags li, .links li {
-    font-size: 200%;
-    border-width: 2px;
-  }
   footer {
     font-size: 150%;
   }