Improved page sub-section list formatting

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

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;

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

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