From af0a42ec55d58528bbdff58e0e339f0e471d3b17 Mon Sep 17 00:00:00 2001
From: yequari <yequari@32bit.cafe>
Date: Tue, 17 Oct 2023 15:32:40 -0700
Subject: [PATCH] fixing link page layout

---
 data/links/{ => left}/00_computing.yaml       |  3 ++
 data/links/{ => middle}/20_articles.yaml      |  0
 .../links/{ => middle}/30_foodforthought.yaml |  0
 data/links/{ => right}/10_amusement.yaml      |  0
 data/links/{ => right}/40_blogs.yaml          |  0
 layouts/links/list.html                       | 18 ++++++++++--
 layouts/partials/linklist.html                | 28 +++++++++----------
 themes/saturn/static/css/main.css             | 13 +++++----
 8 files changed, 39 insertions(+), 23 deletions(-)
 rename data/links/{ => left}/00_computing.yaml (83%)
 rename data/links/{ => middle}/20_articles.yaml (100%)
 rename data/links/{ => middle}/30_foodforthought.yaml (100%)
 rename data/links/{ => right}/10_amusement.yaml (100%)
 rename data/links/{ => right}/40_blogs.yaml (100%)

diff --git a/data/links/00_computing.yaml b/data/links/left/00_computing.yaml
similarity index 83%
rename from data/links/00_computing.yaml
rename to data/links/left/00_computing.yaml
index 601cccc..372e6eb 100644
--- a/data/links/00_computing.yaml
+++ b/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
diff --git a/data/links/20_articles.yaml b/data/links/middle/20_articles.yaml
similarity index 100%
rename from data/links/20_articles.yaml
rename to data/links/middle/20_articles.yaml
diff --git a/data/links/30_foodforthought.yaml b/data/links/middle/30_foodforthought.yaml
similarity index 100%
rename from data/links/30_foodforthought.yaml
rename to data/links/middle/30_foodforthought.yaml
diff --git a/data/links/10_amusement.yaml b/data/links/right/10_amusement.yaml
similarity index 100%
rename from data/links/10_amusement.yaml
rename to data/links/right/10_amusement.yaml
diff --git a/data/links/40_blogs.yaml b/data/links/right/40_blogs.yaml
similarity index 100%
rename from data/links/40_blogs.yaml
rename to data/links/right/40_blogs.yaml
diff --git a/layouts/links/list.html b/layouts/links/list.html
index cd6635f..f24c466 100644
--- a/layouts/links/list.html
+++ b/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 }}
diff --git a/layouts/partials/linklist.html b/layouts/partials/linklist.html
index 51ba550..f7a296d 100644
--- a/layouts/partials/linklist.html
+++ b/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>
diff --git a/themes/saturn/static/css/main.css b/themes/saturn/static/css/main.css
index edabcb7..32452a3 100644
--- a/themes/saturn/static/css/main.css
+++ b/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;
 }