[PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout

[Rito Rhymes <rito@ritovision.com>]

On narrow viewports, fixed-width content containers, homepage release
sections, and long preformatted strings can force page-wide horizontal
overflow.

Realign #protocols and #latest for narrow screens so they do not
overflow and can wrap down as needed to fit.

Make #releases scroll within its own container, and keep release-date
cells readable on mobile with nowrap and horizontal padding.

Allow preformatted blocks to scroll horizontally within their own
region instead of expanding page width and creating page-wide
horizontal scrolling.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
---
 korgi/static/css/main.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index d20d8b6..16d97cd 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -360,6 +360,33 @@ dt {
     #banner li {
         padding: 0 0.5em;
     }
+    #protocols {
+        margin: 1em 0;
+        width: auto;
+    }
+    #latest {
+        margin-right: 0;    
+    }
+    #releases {
+        display: block;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    #releases td:nth-child(3) {
+        white-space: nowrap;
+        padding: 0 0.75em;
+    }
+    #featured,
+    #content {
+        width: auto;
+        margin: 1em;
+        padding: 1em;
+    }
+    pre,
+    .literal-block {
+        white-space: pre;
+        overflow-x: auto;
+    }
 
     #extras {
         width: auto;
-- 
2.51.0