Fix mobile overflow and soft-wrapping issues on documentation pages

layouts/_default/single.html

@@ -27,10 +27,12 @@ <h1>{{ .Title }}</h1>
 <!--     </h2> -->
 <!-- </div> -->
 
-<div class="post-content">
+<div class="container">
+    <div class="post-content">
 
-    {{ .Content }}
+        {{ .Content }}
 
+    </div>
 </div>
 {{ end }}
 {{ end }}

static/css/main.css

@@ -7,7 +7,8 @@
   /* Hue is between neovim green and blue for text/background */
   /* Saturation is low */
   --fg-color: #29332f;
-  --inverse-fg-color: #a9d5c4; /* Dark-mode fg color. */
+  --inverse-fg-color: #a9d5c4;
+  /* Dark-mode fg color. */
   --bg-color: #e7eee8;
   --accent-bg-color: #d3e4db;
   --link-color: #195174;
@@ -18,7 +19,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --fg-color: #a9d5c4;
-    --inverse-fg-color: #29332f; /* Light-mode fg color. */
+    --inverse-fg-color: #29332f;
+    /* Light-mode fg color. */
     --bg-color: #0f191f;
     --accent-bg-color: #0b151b;
     --link-color: #5fb950;
@@ -65,7 +67,7 @@ a {
   transition: all ease-in-out 140ms;
 }
 
-/* Ensure that the hover border is sized correctly for <a><img…></a>. #295 */
+/* Ensure that the hover border is sized correctly for <a><img…></a>. #295 */
 a:has(> img) {
   display: block;
 }
@@ -139,20 +141,24 @@ pre {
 
 /* Keyboard input should be distinctive from <pre> and <code>. */
 kbd {
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px #ffffff;
   color: var(--accent-color);
-  background-color: #ebebeb; /* var(--accent-bg-color); */
-  border: 1pt solid var(--border-color); /* #555 */
-  border-radius: 3px; /* rounded corners */
+  background-color: #ebebeb;
+  /* var(--accent-bg-color); */
+  border: 1pt solid var(--border-color);
+  /* #555 */
+  border-radius: 3px;
+  /* rounded corners */
   padding: 2px 5px;
 }
 
 @media (prefers-color-scheme: dark) {
   kbd {
-    box-shadow: 2px 2px 4px var(--border-color), inset 0px 0px 0px 2px rgba(255,255,255,0.2);
+    box-shadow: 2px 2px 4px var(--border-color), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.2);
     color: var(--fg-color);
     background-color: var(--accent-bg-color);
-    border: 1pt solid var(--fg-color); /* #555 */
+    border: 1pt solid var(--fg-color);
+    /* #555 */
   }
 }
 
@@ -175,6 +181,11 @@ samp {
 .container {
   width: 100%;
   max-width: 1200px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-right: max(1rem, env(safe-area-inset-right));
+  overflow-wrap: break-word;
 }
 
 .container:before {
@@ -188,6 +199,7 @@ samp {
     grid-template-columns: initial;
   }
 }
+
 .flex {
   display: flex;
   gap: 1em;
@@ -212,11 +224,23 @@ samp {
   grid-gap: 1em;
 }
 
+.golden-grid > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+img,
+iframe,
+video {
+  max-width: 100%;
+}
+
 @media (max-width: 525px) {
   .golden-grid {
     grid-template-columns: 1fr;
   }
 }
+
 /*
  * Navbar
  *
@@ -226,6 +250,7 @@ samp {
 .nav-link {
   color: var(--link-color);
 }
+
 .nav-link:hover,
 .nav-link:focus,
 .nav-link:active {
@@ -243,6 +268,7 @@ samp {
 .navbar-brand {
   color: var(--link-color);
 }
+
 .navbar-brand:hover,
 .navbar-brand:focus,
 .navbar-brand:active {
@@ -264,6 +290,7 @@ samp {
 .dropdown-item {
   color: var(--link-color);
 }
+
 .dropdown-item:focus,
 .dropdown-item:hover,
 .dropdown-item:active {
@@ -321,7 +348,8 @@ samp {
   position: relative;
   overflow: hidden;
   width: 100%;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+  padding-top: 56.25%;
+  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 
   /* width: 560px; */
   /* height: 315px; */
@@ -496,9 +524,9 @@ iframe.poll {
  * News section
  */
 
- .news-section table {
-    margin-top: 1rem;
- }
+.news-section table {
+  margin-top: 1rem;
+}
 
 /*
  * DocSearch overrides
@@ -587,12 +615,12 @@ iframe.poll {
 }
 
 .DocSearch-Button {
-  border:  1px solid var(--docsearch-primary-color)
+  border: 1px solid var(--docsearch-primary-color)
 }
 
 @media (prefers-color-scheme: dark) {
   .DocSearch footer {
-      border-top: 1px solid var(--link-color)
+    border-top: 1px solid var(--link-color)
   }
 
   .DocSearch-Button-Keys {
@@ -603,27 +631,31 @@ iframe.poll {
   }
 
   .DocSearch-Button {
-    border:  1px solid var(--docsearch-primary-color)
+    border: 1px solid var(--docsearch-primary-color)
   }
 }
 
 /* Force footer to bottom of viewport. */
 html {
   height: 100%;
 }
+
 body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   margin: 0;
 }
+
 body > nav {
   flex-shrink: 0;
 }
+
 body > main {
   flex: 1 0 auto;
 }
+
 body > footer {
   flex-shrink: 0;
   margin-top: auto;
-}
+}