make buttonbar class

make-pages/SinglePage.hs

@@ -39,6 +39,8 @@ make' nsfw dir (Info {date, title, artist, tags, nsfwTags,
     <link rel=stylesheet href=/style/shiny/single.css title=shiny>
     <link rel='alternate stylesheet' href=/style/tum/single.css title=tummy>
 
+    <script async src=/script/single.js></script>
+
     $0.prefetches
 
     <title>$*title</title>
@@ -47,10 +49,9 @@ make' nsfw dir (Info {date, title, artist, tags, nsfwTags,
       <h1>$*title</h1>
       $artistTag
       <h2 id=date class="right corner">$formattedDate</h2>
-      $buttonBar
     </header>
 
-    <script async src=/script/single.js></script>
+    $buttonBar
 
     <main>
       <figure id=mainfig>
@@ -130,17 +131,17 @@ makeButtonBar title images =
   case length images of
     0 -> throw $ NoEligibleImages title
     1 -> ""
-    _ -> [b|@2
+    _ -> [b|@0
-      <nav class=alts>
+      <nav id=alts>
-        <ul id=altlist>
+        <ul class="buttonbar choice">
-          $6.alts
+          $4.alts
         </ul>
       </nav>
       |]
  where alts = map (uncurry altButton) $ zip [0..] images
 
 altButton :: Int -> Image -> Builder
-altButton i (Image {label, path, nsfw, warning}) = [b|@6
+altButton i (Image {label, path, nsfw, warning}) = [b|@4
   <li$nsfwClass>
     <input type=radio$checked id="$idLabel" name=variant
            autocomplete=off value="$@path'"
@@ -166,7 +167,7 @@ makeTags nsfw sfwTags nsfwTags =
   if null tags then "" else [b|@4
     <section class=tags>
       <h2>tags</h2>
-      <ul>
+      <ul class=buttonbar>
         $8.tagList
       </ul>
     </section>
@@ -181,7 +182,7 @@ extLinks nsfw allLinks =
   if null links then "" else [b|@4
     <section class=links>
       <h2>links</h2>
-      <ul>
+      <ul class=buttonbar>
         $8.linkList
       </ul>
     </section>

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 .nsfw label::after {
-.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 {
   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%;
   }