Add arrow in the right side of list page section buttons

This makes it more obvious that you can click this to view a different
area.

assets/css/bobastyle.css

@@ -611,6 +611,9 @@ body {
   color: var(--text-1);
   border-radius: 12px;
   padding: 1px 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .section:hover {
@@ -634,6 +637,16 @@ body {
   margin-bottom: 5px;
 }
 
+.section-arrow {
+  margin-block: auto;
+  max-height: fit-content;
+  float: right;
+}
+.section-arrow > .icon {
+  height: 48px;
+  width: 48px;
+}
+
 /* }}} */
 
 

layouts/section.summary.html

@@ -1,14 +1,20 @@
 <a class="section-anchor" href="{{ .Permalink }}">
     <div class="section">
-        <h2 class="section-title">
-            {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
-            {{ .Title | markdownify }}
-        </h2>
+        <div>
+            <h2 class="section-title">
+                {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
+                {{ .Title | markdownify }}
+            </h2>
 
-        {{ with .Summary }}
-            <div class="section-description">
-                {{ . }}
-            </div>
-        {{ end }}
+            {{ with .Summary }}
+                <div class="section-description">
+                    {{ . }}
+                </div>
+            {{ end }}
+        </div>
+
+        <div class="section-arrow">
+            {{ partial "icon.html" "arrow-right" }}
+        </div>
     </div>
 </a>