fix overlapping text and other layout weirdness

make-pages/GalleryPage.hs

@@ -152,6 +152,7 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
         data-tags="$tags'">
       <a href="$dir">
         <img src="$thumb" loading=lazy$bgStyle
+          width=200 height=200
           title="$tooltip">
       </a>
   |]

make-pages/SinglePage.hs

@@ -154,11 +154,13 @@ make' root siteName prefix nsfw _dataDir dir
     <div class=page>
       <header>
         <h1>$title</h1>
-        $artistTag
         <h2 id=date class="right corner">
           $formattedDate $updateDate
         </h2>
-        <a class="left corner" href=$undir>back to gallery</a>
+        <h2 class="left corner">
+          $artistTag
+          <a href=$undir>back to gallery</a>
+        </h2>
       </header>
 
       $2.buttonBar
@@ -193,7 +195,7 @@ last' xs = if null xs then Nothing else Just $ last xs
 
 makeArtist :: Artist -> Builder
 makeArtist (Artist {name, url}) =
-  [b|<h2 id=artist class="left corner">by $artistLink</h2>|]
+  [b|by $artistLink <br>|]
  where
    artistLink = case url of
     Just u  -> [b|<a href="$u">$name</a>|]

script/single.js

@@ -24,7 +24,7 @@ function addCWListeners(id, caption) {
   }
 }
 
-function setImage(id, src, width, height, href, cw, firstLoad) {
+function setImage(id, src, href, cw) {
   let caption = document.getElementById('cw');
   let newCaption;
 
@@ -45,17 +45,13 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
     mainlink.tabIndex = -1;
   }
 
-  mainimg.src            = src;
-  mainfig.dataset.width  = width;
-  mainfig.dataset.height = height;
-  mainlink.href          = href;
+  mainimg.src   = src;
+  mainlink.href = href;
 }
 
-function activateButton(button, doPush = true, firstLoad = false) {
+function activateButton(button, doPush = true) {
   setImage(button.id, button.value,
-           button.dataset.width, button.dataset.height,
-           button.dataset.link, button.dataset.warning,
-           firstLoad);
+           button.dataset.link, button.dataset.warning);
 
   if (doPush) history.pushState(null, '', '#' + button.id);
 }
@@ -74,7 +70,7 @@ function useFragment(firstLoad = false) {
   if (button) {
     id = button.id;
     button.checked = true;
-    activateButton(button, false, firstLoad);
+    activateButton(button, false);
   }
 
   if (firstLoad) addCWListeners(id, document.getElementById('cw'));
@@ -105,7 +101,7 @@ function setup() {
     } };
   }
 
-  window.addEventListener('popstate', useFragment);
+  window.addEventListener('popstate', e => useFragment());
   useFragment(true);
 }
 

style/shiny/single.css

@@ -96,10 +96,13 @@
 }
 
 #info figure {
-  width: min-content;
   margin: 0.25em auto;
 }
 
+#info figure img {
+  max-width: 100%;
+}
+
 #info .light-bg {
   background: hsl(0deg, 0%, 100%, 75%);
   padding: 5px;
@@ -109,6 +112,7 @@
 #info .floating {
   float: right;
   margin-left: 0.8em;
+  max-width: 40%;
 }
 
 #info .floating.left {