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 }}
-            {{ partial "linklist.html" . }}
-        {{ end }}
+        <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,15 +1,13 @@
-<div class="links-column">
-    <ul class="link">
-        <h2>{{ .name }}</h2>
-        {{ range .links }}
-        <li>
-            <details>
-                <summary>
-                    <a target="_blank" href="{{ .url }}" >{{ .name }}</a>
-                </summary>
-                {{ .description }}
-            </details>
-        </li>
-        {{ end }}
-    </ul>
-</div>
+<ul class="link-list">
+    <h2>{{ .name }}</h2>
+    {{ range .links }}
+    <li>
+        <details>
+            <summary>
+                <a target="_blank" href="{{ .url }}" >{{ .name }}</a>
+            </summary>
+            {{ .description }}
+        </details>
+    </li>
+    {{ end }}
+</ul>

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;
 }