From 79a662b19252d6000597da5232568984a8e8ddcf Mon Sep 17 00:00:00 2001
From: Steven Engler <sengler@uwaterloo.ca>
Date: Wed, 18 Sep 2019 21:02:20 -0400
Subject: [PATCH] Improved page sub-section list formatting

---
 layouts/_default/list.html  |  2 +-
 static/css/styles.css       | 23 +++++++++++++++++++++++
 static/css/themes/dark.css  |  8 ++++++++
 static/css/themes/light.css |  8 ++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index f7b75cc..256ee5d 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -6,7 +6,7 @@
   </div>
   {{- if gt (len .Sections) 0 }}
   <h2>Categories</h2>
-    <ul>
+    <ul class="section-list">
     {{- range .Sections }}
       <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
     {{- end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index 6491541..039ae78 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -234,6 +234,29 @@ blockquote {
 	font-weight: bold;
 }
 
+.section-list {
+	padding-left: 0;
+}
+
+.section-list li {
+	display: inline-block;
+	margin-right: 0.5em;
+}
+
+.section-list li:last-child {
+	margin-right: 0em;
+}
+
+.section-list li > * {
+	background-color: rgba(25, 25, 25, 0.05);
+	border-radius: 5px;
+	font-size: 90%;
+	padding-top: 0.2em;
+	padding-bottom: 0.2em;
+	padding-left: 0.4em;
+	padding-right: 0.4em;
+}
+
 .links {
 	font-size: 120%;
 	list-style-type: none;
diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index 687f3ac..7e4c42e 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -17,6 +17,14 @@ a > code {
 	background-color: rgba(65, 65, 170, 0.3);
 }
 
+.section-list li > * {
+	background-color: rgba(90, 90, 90, 0.25);
+}
+
+.section-list li > a {
+	background-color: rgba(65, 65, 170, 0.3);
+}
+
 body {
 	color: rgb(210, 210, 210);
 	background-color: rgb(27, 27, 27);
diff --git a/static/css/themes/light.css b/static/css/themes/light.css
index 0bd0d8c..3221b7f 100644
--- a/static/css/themes/light.css
+++ b/static/css/themes/light.css
@@ -17,6 +17,14 @@ a > code {
 	background-color: rgba(15, 15, 150, 0.05);
 }
 
+.section-list li > * {
+	background-color: rgba(25, 25, 25, 0.05);
+}
+
+.section-list li > a {
+	background-color: rgba(15, 15, 150, 0.05);
+}
+
 body {
 	background-color: rgb(247, 247, 247);
 }