1 files changed, 23 insertions, 4 deletions

diff --git a/static/site.css b/static/site.css
index 3d33a5bb..2d47385a 100644
--- a/static/site.css
+++ b/static/site.css
@@ -34,7 +34,7 @@ a:hover {
     text-decoration: underline;
 }
 
-.columns {
+.layout-columns {
     display: flex;
 }
 
@@ -103,16 +103,29 @@ a:hover {
     fill: var(--fg-color);
 }
 
+.content-columns {
+    columns: 2;
+}
+
+.content-columns .column {
+    break-inside: avoid;
+}
+
+.content-columns .column h2 {
+    margin-top: 0;
+    font-size: 1em;
+}
+
 @media (max-width: 780px) {
     #sidebar:not(.no-hide) {
         display: none;
     }
 
-    .columns.vertical-when-thin {
+    .layout-columns.vertical-when-thin {
         flex-direction: column;
     }
 
-    .columns.vertical-when-thin > *:not(:last-child) {
+    .layout-columns.vertical-when-thin > *:not(:last-child) {
         margin-bottom: 10px;
     }
 
@@ -123,6 +136,12 @@ a:hover {
     }
 }
 
+@media (max-width: 600px) {
+    .content-columns {
+        columns: 1;
+    }
+}
+
 #sidebar, #content, #header {
     background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6);
     border: 1px dotted var(--fg-color);
@@ -131,7 +150,7 @@ a:hover {
 
 #sidebar {
     flex: 1 1 20%;
-    min-width: 200px;
+    min-width: 150px;
     max-width: 250px;
     flex-basis: 250px;
     float: left;