diff --git a/script/gallery.js b/script/gallery.js index 202fc6a..10502c3 100644 --- a/script/gallery.js +++ b/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() { diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css index 6d1e77b..39f31b9 100644 --- a/style/shiny/gallery.css +++ b/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 {