simplify some css selectors

(by adding more classes & ids :( )

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 {
-  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 {
+.bb-choice label, .bb-links 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,
-.buttonbar:not(.choice) li:focus-within {
+.bb-choice :focus ~ label, .bb-links 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 {
-  font-weight: 100;
-  font-size: 110%;
+#filters h3, #clear, #reset {
   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);
 }