From 240476061bfebc67c7414dbe406e11b80cdb1686 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Sat, 13 Nov 2021 17:23:30 -0600
Subject: [PATCH] Use flexbox for more stuff

---
 assets/css/bobastyle.css   | 21 ++++++++----
 layouts/_default/list.html | 66 ++++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 3a500e4..404462c 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -4,10 +4,19 @@
 
 
 /* Post layout (in list pages) */
+.list-page-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
 .page-list ul,
 .series-taxonomy ul {
+  display: flex;
+  flex-direction: column;
   list-style: none;
   padding: 0;
+  gap: 40px;
 }
 
 .page-list li,
@@ -20,11 +29,6 @@
   background-color: #222;
 }
 
-.page-list li+li,
-.series-taxonomy > ul > li+li {
-  margin: 40px 0;
-}
-
 .post-title {
   margin-bottom: 10px;
 }
@@ -81,8 +85,13 @@
 
 
 /* Subsection formatting */
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
 .section {
-  margin-bottom: 40px;
   background-color: #222;
   border-radius: 12px;
   padding: 1px 25px;
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1c79184..d825fcd 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -10,43 +10,45 @@
     </span>
 </h1>
 
-{{ with .Sections }}
-<div class="sections">
-    {{ range . }}
+<div class="list-page-content">
+    {{ with .Sections }}
+    <div class="sections">
+        {{ range . }}
 
-    <a class="section-anchor" href="{{ .Permalink }}">
-        <div class="section">
-            <h2 class="section-title">
-                {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
-                {{ .Title | markdownify }}
-            </h2>
+        <a class="section-anchor" href="{{ .Permalink }}">
+            <div class="section">
+                <h2 class="section-title">
+                    {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
+                    {{ .Title | markdownify }}
+                </h2>
 
-            <div class="section-description">
-                {{ if .Description }}
-                <p>
-                    {{ .Description | markdownify }}
-                </p>
-                {{ else }}
-                {{ .Summary }}
-                {{ end }}
+                <div class="section-description">
+                    {{ if .Description }}
+                    <p>
+                        {{ .Description | markdownify }}
+                    </p>
+                    {{ else }}
+                    {{ .Summary }}
+                    {{ end }}
+                </div>
             </div>
-        </div>
-    </a>
+        </a>
 
-    {{ end }}
-</div>
-{{ end }}
-
-<div class="page-list">
-    <ul>
-        {{ range .Paginator.Pages }}
-        <li>{{ .Render "summary" }}</li>
-        {{ else }}
-        <div>
-            {{ i18n "no_posts" }}
-        </div>
         {{ end }}
-    </ul>
+    </div>
+    {{ end }}
+
+    <div class="page-list">
+        <ul>
+            {{ range .Paginator.Pages }}
+            <li>{{ .Render "summary" }}</li>
+            {{ else }}
+            <div>
+                {{ i18n "no_posts" }}
+            </div>
+            {{ end }}
+        </ul>
+    </div>
 </div>
 
 {{ if gt .Paginator.TotalPages 1 }}