make current filters more obvious

- inside the list, give selected filters a background
- when the list is collapsed, display the current selection next to it

script/gallery.js

@@ -35,6 +35,14 @@ function updateItems() {
 
     document.getElementById(`marker-${year}`).hidden = hide;
   }
+
+  function disp(pfx, tags) {
+    return Array(...tags).map(x => pfx + x).join('\u2003'); // em space
+  }
+  let plus  = disp('+\u2009', reqTags); // thin space
+  let minus = disp('-\u2009', excTags);
+  document.getElementById('filters-details').dataset.filters =
+    `${plus}\u2003${minus}`.trim();
 }
 
 function update() {

style/shiny/gallery.css

@@ -42,7 +42,7 @@
 
   font-weight: 500;
   font-size: 90%;
-  grid-gap: 0.5em 1em;
+  gap: 0.5em;
 }
 
 .filterlist input {
@@ -59,6 +59,9 @@
 
 .filterlist label {
   cursor: pointer;
+  padding: 0.15em 0.4em;
+  border-radius: 1000px;
+  border: 1px solid transparent;
 }
 
 .filterlist label::before {
@@ -71,6 +74,10 @@
   text-shadow: none;
 }
 .filterlist :checked + label::before { content: url('/style/checked.svg'); }
+.filterlist :checked + label {
+  background: var(--button-bg);
+  border: var(--button-border);
+}
 
 .filterlist label:not([data-count="1"])::after {
   content: attr(data-count);
@@ -111,6 +118,12 @@
   text-decoration: none;
 }
 
+#filters-details[data-filters]:not([open])::after {
+  content: attr(data-filters);
+  margin-left: 2em;
+  font-size: 90%;
+}
+
 
 @media (max-width: 80rem) {
   #filters div {