From 6ae57ee2c08d40841bb8143dd9f7156092e26c21 Mon Sep 17 00:00:00 2001
From: Ben Sturmfels <ben@sturm.com.au>
Date: Tue, 19 Oct 2021 13:26:57 +1100
Subject: [PATCH] Improve sidebar and inline images on mobile.

---
 www/conservancy/static/css/conservancy.css | 38 +++++++++++++---------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index ea35d6be..6a936f6c 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -333,28 +333,27 @@ body > header {
     width: 80%;
 }
 
-#container {
-    width: 100%;
-    overflow: hidden;
-}
 #container #mainContent {
-    /* All the measurements here are relative to #sidebar's 13em width.
-       Leave enough space for it plus 1.5em margins on either side. */
-    position: relative;
-    left: 14.5em;
-    width: calc(100% - 16em);
     max-width: 50em;
     margin: 0;
     padding: 0;
     background: #ffffff;
+    flex: 1 1 auto;
 }
 #container #sidebar {
-    position: absolute;
-    width: 13em;
-    background-color: #ccd4a3;
-    /* Gives symmetry with the margin-top of the first h2.
-       1.25em font-size * 1.5em margin == 1.875em */
-    padding-bottom: 1.875em;
+  background-color: #ccd4a3;
+  padding: 1px 0.5rem 0.25rem;
+  flex: 1 0 15em;
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 30em) {
+  #container {
+    display: flex;
+  }
+  #container #sidebar {
+    margin-right: 1rem;
+  }
 }
 
 #container #sidebar li {
@@ -475,10 +474,17 @@ blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
     text-indent: 0;
     margin: .25em;
     min-width: 8%;
-    max-width: 30%;
     width: auto;
     box-shadow: 1px 1px 2px rgba(0,0,0,.3);
+    margin-bottom: 1rem;
 }
+
+@media screen and (min-width: 30em) {
+  .picture-small {
+    max-width: 20rem;
+  }
+}
+
 .picture-small img {
    width: 100%;
 }