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;
+  }
+}