simplify some css selectors

(by adding more classes & ids :( )

make-pages/GalleryPage.hs

@@ -48,12 +48,12 @@ make' (GalleryInfo {title, prefix, filters, hidden}) infos = [b|@0
         <summary><h2>filters</h2></summary>
         <div>
           <h3>show only</h3>
-          <ul id=require class='buttonbar choice'>
+          <ul id=require class="buttonbar bb-choice">
             $8.requireFilters
           </ul>
 
           <h3>exclude</h3>
-          <ul id=exclude class='buttonbar choice'>
+          <ul id=exclude class="buttonbar bb-choice">
             $8.excludeFilters
           </ul>
 

make-pages/IndexPage.hs

@@ -18,7 +18,7 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
     <title>$*title</title>
 
     <header>
-      <h1>$*title</h1>
+      <h1 id=title>$*title</h1>
     </header>
 
     <main>

make-pages/SinglePage.hs

@@ -105,7 +105,7 @@ makeArtist (Artist {name, url}) =
 
 makeDesc :: Strict.Text -> Builder
 makeDesc desc = [b|@4
-    <section id=desc>
+    <section id=desc class=info-section>
       <h2>about</h2>
       <div>
         $8*desc
@@ -120,7 +120,7 @@ makeButtonBar title images =
     1 -> ""
     _ -> [b|@0
       <nav id=alts aria-label="alternate versions">
-        <ul class="buttonbar choice">
+        <ul class="buttonbar bb-choice">
           $4.alts
         </ul>
       </nav>
@@ -133,10 +133,11 @@ altButton i (Image {label, path, nsfw, warning}) = [b|@4
     <input type=radio$checked id="$idLabel" name=variant
            autocomplete=off value="$@path'"
            data-link="$@path"$warning'>
-    <label for="$idLabel">$*label</label>
+    <label for="$idLabel"$nsfwLabelClass>$*label</label>
   |]
  where
   nsfwClass      = if nsfw then " class=nsfw"       else ""
+  nsfwLabelClass = if nsfw then " class=nsfw-label" else ""
   checked        = if i == 0 then " checked" else ""
   idLabel        = escId label
   path'          = pageFile path
@@ -147,7 +148,7 @@ makeTags tags =
   if null tags then "" else [b|@4
     <nav id=tags class=info-section>
       <h2>tags</h2>
-      <ul class=buttonbar>
+      <ul class="buttonbar bb-links">
         $8.tagList
       </ul>
     </nav>

style/shiny/base.css

@@ -94,7 +94,28 @@ footer {
 }
 
 
-.buttonbar.choice input {
+.buttonbar {
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-flow: row wrap;
+  margin-bottom: -0.5em;
+}
+
+.buttonbar li {
+  list-style: none;
+  margin-bottom: 0.5em;
+}
+
+.buttonbar a {
+  text-decoration: none;
+}
+
+.bb-choice {
+  justify-content: center;
+}
+
+.bb-choice input {
   display: inline;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -104,25 +125,7 @@ footer {
   width: 0;
 }
 
-.buttonbar {
+.bb-choice label, .bb-links li {
-  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;
@@ -133,22 +136,18 @@ footer {
   text-shadow: none;
 }
 
-.buttonbar.choice :focus + label,
+.bb-choice :focus ~ label, .bb-links li:focus-within {
-.buttonbar:not(.choice) li:focus-within {
   box-shadow: var(--focus-box);
 }
 
-.buttonbar.choice :checked + label {
+.bb-choice :checked ~ label {
   color: var(--button-bg);
   background: var(--text-col);
 }
 
-.buttonbar a {
-  text-decoration: none;
-}
 
 
-summary h1, summary h2, summary h3, summary h4 {
+summary > * {
   display: inline;
 }
 

style/shiny/gallery.css

@@ -19,23 +19,23 @@ body {
   margin: 1em 0 2em 0;
 }
 
-#filters h3, #filters div > a {
+#filters h3, #clear, #reset {
-  font-weight: 100;
-  font-size: 110%;
   margin: 0;
 }
 
-#filters h3 {
+#clear, #reset {
+  font-weight: 400;
+  font-size: 110%;
+}
+
+#filters h3, #clear {
   text-align: right;
   grid-area: auto / 1;
 }
 
-#clear {
-  text-align: right;
-}
-
 #reset {
   text-align: left;
+  grid-area: auto / 2;
 }
 
 @media (max-width: 80rem) {

style/shiny/index.css

@@ -11,17 +11,17 @@ body {
   width: 37.5em;
 }
 
-header h1::before, header h1::after {
+#title::before, #title::after {
   display: inline-block;
 }
-header h1::before {
+#title::before {
   content: url(../niss.svg);
   padding-right: 0.15em;
   height: 1em;
   width: 1em;
   vertical-align: -0.2em;
 }
-header h1::after {
+#title::after {
   content: url(../niss_tongue.svg);
   padding-left: 0.15em;
   height: 1.05em;

style/shiny/single.css

@@ -57,12 +57,12 @@ body {
   border-radius: 0.5em;
 }
 
-#cw + * img {
+#cw ~ * {
   filter: blur(50px);
   opacity: 65%;
 }
 
-#alts .nsfw label::after {
+.nsfw-label::after {
   content: url(../18_plus_white.svg);
   transform: rotate(var(--nsfw-sticker-rotate));
   display: inline-block;
@@ -71,7 +71,7 @@ body {
   padding-left: 0.25em;
 }
 
-#alts .nsfw :checked + label::after {
+:checked ~ .nsfw-label::after {
   content: url(../18_plus.svg);
 }