vertically center single pages

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

make-pages/NsfwWarning.hs

@@ -7,7 +7,7 @@ data What = Single | Gallery
 
 instance CanBuild What where
   build Single  = "this art"
-  build Gallery = "the art in this gallery"
+  build Gallery = "some of the art in this gallery"
 
 
 script :: Maybe What -> Builder
@@ -34,7 +34,9 @@ dialog (Just what) = [b|@0
 
       <div class=dialog-buttons>
         <button id=nsfw-yes class=yes>i am an adult</button>
-        <button id=nsfw-no class=no>i am not</button>
+        <a href=//crouton.net referrerpolicy=no-referrer>
+          <button id=nsfw-no class=no>i am not</button>
+        </a>
       </div>
     </div>
   </div>

make-pages/SinglePage.hs

@@ -313,7 +313,7 @@ extLinks links =
   if null links then "" else [b|@0
     <nav id=links class=info-section>
       <h2>links</h2>
-      <ul class="buttonbar bb-links">
+      <ul>
         $4.linkList
       </ul>
     </nav>

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() {

script/nsfw-warning.js

@@ -17,16 +17,19 @@ function yes() {
   dismiss();
 }
 
+// now just a normal link
+/*
 function no() {
-  history.go(-1);
+  document.location = '//crouton.net';
 }
+*/
 
 function setup() {
   if (alreadyYes()) {
     dismiss();
   } else {
     document.getElementById('nsfw-yes').onclick = yes;
-    document.getElementById('nsfw-no').onclick = no;
+    // document.getElementById('nsfw-no').onclick = no;
   }
 }
 

style/shiny/gallery.css

@@ -23,7 +23,7 @@
   display: grid;
   grid-template-columns: 15% auto;
   align-items: baseline;
-  grid-gap: 0.75em;
+  gap: 0.75em;
 }
 
 #filters h3 {
@@ -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);
@@ -94,7 +101,7 @@
   display: flex;
   justify-content: center;
   margin-top: 0;
-  grid-gap: 2em;
+  gap: 2em;
 }
 
 #filterstuff li {
@@ -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 {
@@ -125,7 +138,7 @@
   #filterstuff {
     grid-area: unset;
     flex-flow: column;
-    grid-gap: 0.2em;
+    gap: 0.2em;
   }
 
   #filterstuff li {
@@ -137,8 +150,8 @@
 .grid {
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, var(--image-size));
-  grid-gap: var(--gap);
+  grid: auto-flow / repeat(auto-fit, var(--image-size));
+  gap: var(--gap);
   justify-content: center;
 }
 
@@ -177,7 +190,7 @@
   --gap: 0.2em;
   display: grid;
   grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
-  grid-gap: var(--gap);
+  gap: var(--gap);
   align-items: center;
   justify-content: center;
   height: 100%;

style/shiny/index.css

@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: space-evenly;
   padding: 0;
-  grid-gap: 1.5em;
+  gap: 1.5em;
 
   font-size: 175%;
 }
@@ -93,7 +93,7 @@ main {
   .list {
     font-size: 300%;
     grid-template-columns: 100%;
-    grid-gap: 1em;
+    gap: 1em;
   }
 }
 

style/shiny/nsfw-warning.css

@@ -20,7 +20,7 @@
     "icon    text"
     "buttons buttons"
     / 1fr 3fr;
-  grid-gap: 0.5em;
+  gap: 0.5em;
   align-items: center;
 
   min-height: 20vh;
@@ -61,8 +61,8 @@
   margin-top: 1em;
 }
 
-.dialog button + button {
-  margin-left: 1em;
+.dialog-buttons > * {
+  margin: 0 1em;
 }
 
 .dialog button {
@@ -74,6 +74,16 @@
   font-weight: 600;
   font-size: inherit;
   color: black;
+
+  position: relative;
+
+  cursor: pointer;
+}
+
+.dialog button a {
+  inset: 0;
+  width: max-content;
+  text-decoration: none;
 }
 
 .dialog .yes {

style/shiny/single.css

@@ -6,8 +6,14 @@
   --image-width: 1000px;
 }
 
+body {
+  display: grid;
+  min-height: 100vh;
+}
+
 .page {
   max-width: var(--image-width);
+  align-self: center;
 }
 
 #mainfig {
@@ -138,7 +144,7 @@
 #updates dl {
   display: grid;
   grid-template-columns: min-content auto;
-  grid-gap: 0.5em;
+  gap: 0.5em;
   align-items: baseline;
 }
 
@@ -177,7 +183,7 @@ footer {
   margin: 1.5em 0;
   text-align: center;
   display: grid;
-  grid-gap: 0.5em;
+  gap: 0.5em;
   grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em);
 }
 
@@ -208,11 +214,11 @@ footer {
   grid-area: 1 / 3 / auto / auto;
 }
 
-#tags ul {
+:is(#tags, #links) ul {
   padding: 0;
 }
 
-#tags li {
+:is(#tags, #links) li {
   display: inline;
   margin-right: 0.75em;
 }