fixing link page layout

data/links/left/00_computing.yaml

@@ -18,3 +18,6 @@ links:
   - name: Beej's Guides
     description: Beej's Guides are all excellent tools to learn various programming languages and technologies. Notably useful for me are Beej's Guide to Network Programming and Beej's Guide to C (both volumes)
     url: https://beej.us/guide/
+  - name: A Complete Guide to Flexbox
+    description: A terrific guide to using CSS flexbox with examples and explanations of all the properties. My go-to resource whenever I have questions regarding flexbox.
+    url: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background

layouts/links/list.html

@@ -2,9 +2,21 @@
 <div id="content">
 {{ .Content }}
     <div id="links-main">
-        {{ range $.Site.Data.links }}
+        <div class="links-column">
+            {{ range $.Site.Data.links.left }}
+                {{ partial "linklist.html" . }}
+            {{ end }}
+        </div>
+        <div class="links-column">
+            {{ range $.Site.Data.links.middle }}
+                {{ partial "linklist.html" . }}
+            {{ end }}
+        </div>
+        <div class="links-column">
+            {{ range $.Site.Data.links.right }}
                 {{ partial "linklist.html" . }}
             {{ end }}
         </div>
     </div>
+</div>
 {{ end }}

layouts/partials/linklist.html

@@ -1,5 +1,4 @@
-<div class="links-column">
+<ul class="link-list">
-    <ul class="link">
     <h2>{{ .name }}</h2>
     {{ range .links }}
     <li>
@@ -12,4 +11,3 @@
     </li>
     {{ end }}
 </ul>
-</div>

themes/saturn/static/css/main.css

@@ -329,6 +329,7 @@ footer {
 #links-main {
     display: flex;
     flex-flow: row wrap;
+    align-items: flex-start;
 }
 
 #links-main li {
@@ -336,27 +337,29 @@ footer {
     list-style-type: none;
 }
 
-.links-column details {
+.link-list details {
     border: 1px dotted var(--pewter-blue);
     padding: 0.5em 0.5em 0;
 }
 
-.links-column details[open] {
+.link-list details[open] {
     padding: 0.5em;
 }
 
-.links-column details[open] summary {
+.link-list details[open] summary {
     border-bottom: 1px dotted var(--pewter-blue);
     margin-bottom: 0.5em;
 }
 
-.links-column summary {
+.link-list summary {
     margin: -0.5em -0.5em 0;
     padding: 0.5em;
 }
 
 .links-column {
-    flex: 1 1 300px;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 30%;
     overflow-wrap: break-word;
 }