From b3f54f22eefce6f77f0d46798d5c8b21a1bb6027 Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Mon, 3 Aug 2020 15:42:45 -0400
Subject: [PATCH] Add styles to better render images and code blocks

* Add max width to `figure` so it won't exceed the viewport width for either break-point
* Add max width to `img` within `figure` to account for the default 40px margin on the left/right
* Set width for `pre` blocks so they won't exceed the viewport width for either break-point; add a horizontal scroll-bar if the text is too wide
* Set `pre code` block to use `display:block` so long text won't cause the block to render too wide; otherwise, the width of the containing `pre` block won't be sufficient to contain the text
---
 static/css/style.css | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 22ddb02..c929fbe 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -56,4 +56,42 @@ img.profile.photo.like {
   max-width: 30px;
   border-radius: 50%;
   padding: 0.5em;
+}
+
+/* Styles for images and code fence blocks in content area */
+
+pre {
+  overflow-x: auto;
+  width: 100vw;
+}
+
+pre code {
+  display: block;
+}
+
+figure {
+  max-width: 100vw;
+}
+
+figure img {
+  max-width: calc(100vw - 160px);
+}
+
+@media only screen and (min-width: 922px) {
+  pre {
+    overflow-x: auto;
+    max-width: calc(100vw - 350px);
+  }
+
+  pre code {
+    display: block;
+  }
+
+  figure {
+    max-width: calc(100vw - 350px);
+  }
+
+  figure img {
+    max-width: calc(100vw - 510px);
+  }
 }
\ No newline at end of file