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

@@ -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);
+  }
 }