From e046171999a71eb05def5b61bcbf8cb19987530a Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Mon, 8 Mar 2021 00:13:22 +0100
Subject: [PATCH] fix text layout for the image description stuff

---
 make-pages/SinglePage.hs |  5 +----
 style/shiny/single.css   | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index 39a5b27..3d9eea1 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -178,10 +178,7 @@ makeDesc (TextDesc desc) = [b|@0
   |]
 makeDesc (LongDesc fs) = [b|@0
     <section id=desc class=info-section>
-      <h2>about</h2>
-      <div>
-        $4.fields
-      </div>
+      $2.fields
     </section>
   |]
  where
diff --git a/style/shiny/single.css b/style/shiny/single.css
index b87610a..bd5f1e6 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -110,13 +110,22 @@
   margin: auto;
 }
 
-.info-section {
+#info {
   display: grid;
-  grid-template-columns: 10% auto;
-  grid-gap: 2em;
+  grid-template-columns: min-content auto;
+  column-gap: 1em;
   align-items: baseline;
 }
 
+/* 'display: contents' removes things from the accessibility tree
+ * which is probably only a problem for screen readers?
+ */
+@media not speech {
+  .info-section {
+    display: contents;
+  }
+}
+
 #info figure {
   width: min-content;
   margin: 0.25em auto;