From 5d26c51acf62d9765017841744ece2a404b09305 Mon Sep 17 00:00:00 2001
From: Oscar <o@ovl.design>
Date: Fri, 29 Nov 2019 17:45:38 +0100
Subject: [PATCH] styles(table of content): use multi column layout

---
 11ty/_includes/components/table-of-content.njk |  2 +-
 assets/css/base.scss                           | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/11ty/_includes/components/table-of-content.njk b/11ty/_includes/components/table-of-content.njk
index 6b4a5012..aa1ce1fc 100644
--- a/11ty/_includes/components/table-of-content.njk
+++ b/11ty/_includes/components/table-of-content.njk
@@ -1,6 +1,6 @@
 <section>
   <nav class="" aria-label="Definitions">
-    <ol class="auto-grid list">
+    <ol class="multi-column u-no-padding-left list">
     {% for section in collections.tableOfContent %}
       <li>
         <span class="sub-headline">{{ section.title }}</span>
diff --git a/assets/css/base.scss b/assets/css/base.scss
index a7d42824..fa5edc53 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -27,6 +27,8 @@ code {
 
 :root {
   --auto-grid-min-size: 17rem;
+
+  --l-gap: 1rem;
 }
 
 $primary-color: #0e4bff; //cobalt blue is so pretty//
@@ -171,7 +173,13 @@ th {
     auto-fill,
     minmax(var(--auto-grid-min-size), 1fr)
   );
-  grid-gap: 1rem;
+  grid-gap: var(--l-gap);
+}
+
+.multi-column {
+  column-count: auto;
+  column-gap: var(--l-gap);
+  column-width: var(--auto-grid-min-size);
 }
 
 .small-left-grid {
@@ -414,3 +422,7 @@ th {
 .site-footer {
   margin-top: 3rem;
 }
+
+.u-no-padding-left {
+  padding-left: 0 !important;
+}