new buttons and tweaked bg gradients

make-pages/GalleryPage.hs

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

make-pages/SinglePage.hs

@@ -285,7 +285,7 @@ makeTags undir tags =
   if null tags then "" else [b|@0
     <nav id=tags class=info-section>
       <h2>tags</h2>
-      <ul class="buttonbar bb-links">
+      <ul>
         $4.tagList
       </ul>
     </nav>

script/gallery.js

@@ -71,8 +71,8 @@ function clear(e) {
 function toggleSingles(e) {
   showSingles = !showSingles;
 
-  for (let li of document.querySelectorAll('#filters li')) {
+  for (let li of document.querySelectorAll('.filterlist li')) {
-    let count = li.querySelector('label').dataset.count;
+    let count = +li.querySelector('label').dataset.count;
     if (count <= 1) {
       li.hidden = !showSingles;
     }

style/checked.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100%"
+   height="100%"
+   viewBox="0 0 32 32"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
+   id="svg13"
+   sodipodi:docname="checked.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><defs
+   id="defs17" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="2419"
+   inkscape:window-height="1748"
+   id="namedview15"
+   showgrid="false"
+   inkscape:zoom="22.34375"
+   inkscape:cx="16"
+   inkscape:cy="16"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="emoji" />
+<metadata
+   id="metadata2">
+<rdf:RDF>
+
+     <rdf:Description
+   rdf:about="">
+       <dc:title>Mutant Standard emoji 2020.04</dc:title>
+     </rdf:Description>
+
+    <cc:work
+   rdf:about="">
+        <cc:license
+   rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/" />
+        <cc:attributionName>Dzuk</cc:attributionName>
+        <cc:attributionURL>http://mutant.tech/</cc:attributionURL>
+    </cc:work>
+
+<cc:Work
+   rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+     rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF>
+</metadata>
+<rect
+   id="large_blue_diamond"
+   x="0"
+   y="0"
+   width="32"
+   height="32"
+   style="fill:none;" /><g
+   id="outline"><path
+     d="M3,15l13,-13l13,13l0,2l-13,13l-13,-13l0,-2Z"
+     style="fill:none;stroke:#000;stroke-width:4px;"
+     id="path5" /></g><g
+   id="emoji"><path
+     d="M3,17l0,-2l13,-11l13,11l0,2l-13,13l-13,-13Z"
+     style="fill:#1598db;fill-opacity:1"
+     id="path8" /><path
+     d="M29,15l-13,13l-13,-13l13,-13l13,13Z"
+     style="fill:#6bddf4;fill-opacity:1"
+     id="path10" /></g></svg>

style/shiny/base.css

@@ -1,6 +1,8 @@
 @import url(/fonts/muller/muller.css);
 
 :root {
+  /* old slightly-muted gradient */
+  /*
   --gradient:
     linear-gradient(135deg,
         hsl(42deg,  67%, 70%),
@@ -10,24 +12,38 @@
         hsl(195deg, 67%, 67%),
         hsl(155deg, 57%, 62%)
       );
+  */
+
+  /* bright colours from yummy.cricket bg */
+  --gradient:
+    linear-gradient(135deg,
+        hsl(42deg,  92%,  70%),
+        hsl(348deg, 92%,  70%),
+        hsl(334deg, 100%, 80%),
+        hsl(234deg, 100%, 76%),
+        hsl(195deg, 100%, 67%),
+        hsl(155deg, 70%,  62%)
+      );
 
   --text-col: white;
   --text-shadow-col: hsl(0, 0%, 0%, 75%);
   --text-shadow: 2px 2px 3px var(--text-shadow-col);
   --nsfw-sticker-rotate: 15deg;
 
-  --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
+  --focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
   --focus-text: hsl(334deg, 87%, 90%);
 
-  --shadow-col: hsl(42deg, 82%, 90%, 75%);
   --border-col: var(--text-col);
   --border: 3px solid var(--border-col);
   --border-radius: 1.5em;
-  --shadow: 0 0 3em var(--shadow-col);
   --background: hsla(0, 0%, 0%, 60%);
 
-  --button-bg: hsl(330deg, 40%, 16%, 100%);
+  --button-bg: hsla(0deg, 0%, 0%, 20%);
-  --button-corner: 0.25em;
+  --button-bg-selected: hsla(0deg, 0%, 100%, 20%);
+  --button-border: 1px solid hsla(0deg, 0%, 0%, 40%);
+  --button-border-selected: 1px solid hsla(0deg, 0%, 100%, 30%);
+  --button-pad: 0.15em 0.8em;
+  --button-radius: 1000px;
 
   font-family: Muller;
   font-size: x-large;
@@ -50,7 +66,6 @@ h3 { font-size: 110%; }
 .page {
   background: var(--background);
   border: var(--border);
-  box-shadow: var(--shadow);
   position: relative;
 
   padding: 2em 4em;
@@ -68,9 +83,9 @@ header h1 {
 a {
   color: inherit;
   text-decoration: dotted underline;
-  text-decoration-thickness: 2px;
 }
 
+
 a:focus {
   outline: none;
   color: var(--focus-text);
@@ -152,12 +167,10 @@ figure > img {
 
 .buttonbar label, .bb-links li {
   margin-right: 0.5em;
-  padding: 0 0.35em;
+  padding: var(--button-pad);
-  border-radius: var(--button-corner);
-
-  border: 1px solid var(--text-col);
   background: var(--button-bg);
-  text-shadow: none;
+  border: var(--button-border);
+  border-radius: var(--button-radius);
 }
 
 .buttonbar :focus ~ label, .bb-links li:focus-within {
@@ -165,14 +178,14 @@ figure > img {
 }
 
 .buttonbar :checked ~ label {
-  color: var(--button-bg);
+  background: var(--button-bg-selected);
-  background: var(--text-col);
+  border-color: var(--button-border-selected);
 }
 
 
-summary {
+summary, summary h2 {
   cursor: pointer;
-  position: relative;
+  display: inline;
 }
 
 summary:focus-within {
@@ -183,28 +196,16 @@ summary { list-style: none; }
 summary::-webkit-details-marker { display: none; }
 
 summary::after {
-  --fg: var(--text-col);
+  display: inline-block;
-  --bg: var(--button-bg);
+  margin-left: 1.5em;
-
+  padding: var(--button-pad);
-  background: var(--bg);
+  background: var(--button-bg);
-  color: var(--fg);
+  border: var(--button-border);
-  text-shadow: none;
+  border-radius: var(--button-radius);
-
-  border: 1px solid var(--fg);
-  border-radius: var(--button-corner);
-
-  position: absolute;
-  right: 0; top: 0;
-  padding: 2px 5px;
-  margin-left: 1ex;
 }
 
-details       summary::after { content: 'show'; }
+       summary::after { content: 'show'; }
-details[open] summary::after {
+[open] summary::after { content: 'hide'; }
-  content: 'hide';
-  --fg: var(--button-bg);
-  --bg: var(--text-col);
-}
 
 
 dt {
@@ -252,18 +253,19 @@ p {
   :root {
     --gradient:
       linear-gradient(135deg,
-          hsl(42deg,  27%, 25%),
+          hsl(42deg,  37%, 20%),
-          hsl(348deg, 27%, 25%),
+          hsl(348deg, 37%, 20%),
-          hsl(334deg, 32%, 25%),
+          hsl(334deg, 42%, 20%),
-          hsl(234deg, 57%, 23%),
+          hsl(234deg, 67%, 18%),
-          hsl(195deg, 27%, 20%),
+          hsl(195deg, 37%, 15%),
-          hsl(155deg, 22%, 20%)
+          hsl(155deg, 32%, 15%)
         );
     --text-col: hsl(55deg, 60%, 90%);
-  }
 
-  body {
+    --button-bg-selected: hsla(55deg, 40%, 95%, 20%);
-    --shadow-col: hsl(42deg, 82%, 90%, 20%);
+    --button-border-selected: 1px solid hsl(55deg, 60%, 90%, 40%);
+    --button-bg: hsla(0deg, 0%, 0%, 50%);
+    --button-border: 1px solid hsla(0deg, 0%, 100%, 40%);
     --border-col: black;
   }
 

style/shiny/gallery.css

@@ -10,12 +10,15 @@
   .page { max-width: 80%; }
 }
 
+#filters {
+  margin: 1em 0 2em 0;
+}
+
 #filters div {
   display: grid;
   grid-template-columns: 15% auto;
   align-items: baseline;
-  grid-gap: 0.5em 0.75em;
+  grid-gap: 0.75em;
-  margin: 1em 0 2em 0;
 }
 
 #filters h3 {
@@ -27,70 +30,106 @@
   grid-area: auto / 1;
 }
 
-#singles {
+.filterlist {
-  text-align: left;
+  display: flex;
-  grid-area: auto / 2;
+  flex-flow: row wrap;
+  /* justify-content: space-between; */
+  padding: 0;
+
+  font-weight: 500;
+  font-size: 90%;
+  grid-gap: 0.5em 1em;
 }
 
+.filterlist input {
+  appearance: none;
+}
+
+.filterlist li:not([hidden]) {
+  display: block;
+}
+
+.filterlist li:focus-within {
+  color: var(--focus-text);
+}
+
+.filterlist label {
+  padding: 0.15em 0.4em;
+  border-radius: var(--button-radius);
+  background: var(--button-bg);
+  border: var(--button-border);
+}
+
+.filterlist label::before {
+  content: url('/style/unchecked.svg');
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: -15%;
+  padding-right: 0.25em;
+  text-shadow: none;
+}
+.filterlist :checked + label::before { content: url('/style/checked.svg'); }
+
+.filterlist label:not([data-count="1"])::after {
+  content: attr(data-count);
+  font-size: 80%;
+  font-weight: 400;
+  padding: 0 0.5em;
+}
+
+.filterlist [data-count="1"] {
+  font-size: 85%;
+  padding-right: 0.8em;
+}
+
+.filterlist input {
+  margin: 0;
+}
+
+#filterstuff {
+  padding: 0;
+  grid-area: auto / span 2;
+  display: flex;
+  justify-content: center;
+  margin-top: 0;
+  grid-gap: 2em;
+}
+
+#filterstuff li {
+  list-style: none;
+  display: inline-block;
+  padding: var(--button-pad);
+  border-radius: var(--button-radius);
+  background: var(--button-bg);
+  border: var(--button-border);
+}
+
+#filterstuff a {
+  font-weight: 500;
+  text-decoration: none;
+}
+
+
 @media (max-width: 80rem) {
   #filters div {
     grid-template-columns: auto;
   }
+
   #filters h3 {
     text-align: left;
-  }
+    grid-area: unset;
-}
-
-#filters .bb-choice {
-  font-weight: 400;
-  font-size: 90%;
-  margin: 0;
-  border-radius: 0.5em;
-  border: 1px solid var(--text-col);
-  overflow: hidden;
-  background: var(--text-col);
-  grid-gap: 1px;
-}
-
-#filters .bb-choice:focus-within {
-  box-shadow: var(--focus-box);
-}
-
-#filters .bb-choice li {
-  margin: 0;
-  flex-grow: 1;
-}
-
-#filters li:focus-within {
-  color: var(--focus-text);
-}
-
-#filters label {
-  display: block;
-  margin: 0;
-  border-radius: 0;
-  padding: 0.15em 0.5em;
-  text-align: center;
-  border: none;
-  box-shadow: none;
-}
-#filters label[data-count]::after {
-  content: '(' attr(data-count) ')';
-  font-size: 80%;
-  padding-left: 0.25em;
   }
 
   #filterstuff {
-  grid-area: auto / span 2;
+    grid-area: unset;
-  display: flex;
+    flex-flow: column;
-  justify-content: center;
+    grid-gap: 0.2em;
-  margin-top: 0;
-  gap: 2em;
   }
 
   #filterstuff li {
-  list-style: none;
+    border-radius: 1em;
-  font-weight: 400;
+  }
 }
 
 
@@ -115,7 +154,7 @@
 
 .item:not(.year-marker) {
   box-shadow: var(--text-shadow);
-  border: var(--border-thickness) solid var(--text-col);
+  border: var(--border-thickness) solid var(--border-col);
   border-radius: 0.5em;
   background: hsl(340, 45%, 65%);
 }
@@ -132,7 +171,7 @@ figure {
 figcaption .date, figcaption .title {
   position: absolute;
   width: 100%;
-  border: 1px solid var(--text-col);
+  border: 1px solid var(--border-col);
   display: block;
   text-align: center;
   background: hsl(0, 0%, 0%, 75%);

style/shiny/single.css

@@ -17,7 +17,7 @@
   width: min-content;
   position: relative;
   overflow: hidden;
-  border: var(--border-thickness) solid var(--text-col);
+  border: var(--border-thickness) solid var(--border-col);
   border-radius: 1em;
   box-shadow: var(--text-shadow);
   background: hsl(340, 45%, 65%);
@@ -221,3 +221,12 @@ footer {
   justify-content: end;
   grid-area: 1 / 3 / auto / auto;
 }
+
+#tags ul {
+  padding: 0;
+}
+
+#tags li {
+  display: inline;
+  margin-right: 0.75em;
+}

style/unchecked.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+<metadata>
+<rdf:RDF xmlns:cc="http://web.resource.org/cc/"
+         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:dc = "http://purl.org/dc/elements/1.1/"
+         >
+
+     <rdf:Description rdf:about="">
+       <dc:title>Mutant Standard emoji 2020.04</dc:title>
+     </rdf:Description>
+
+    <cc:work rdf:about="">
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/"/>
+        <cc:attributionName>Dzuk</cc:attributionName>
+        <cc:attributionURL>http://mutant.tech/</cc:attributionURL>
+    </cc:work>
+
+</rdf:RDF>
+</metadata>
+<rect id="small_white_square" x="0" y="0" width="32" height="32" style="fill:none;"/><g id="outline"><rect x="12" y="11" width="8" height="10" style="fill:none;stroke:#000;stroke-width:4px;"/></g><g id="emoji"><path d="M20,21l-8,0l0,-2l2,-2l4,0l2,2l0,2Z" style="fill:#b2b2b2;"/><rect x="12" y="11" width="8" height="8" style="fill:#fff;"/></g></svg>