From a0c65ee102e259cd3e1acb7dcbc22234c6ac927b Mon Sep 17 00:00:00 2001
From: Oscar <o@ovl.design>
Date: Wed, 15 Jan 2020 16:13:23 +0100
Subject: [PATCH 1/3] fix(table of content): avoid breaks inside of list items

---
 .../components/table-of-content-item.njk      |  2 +-
 .../_includes/components/table-of-content.njk | 20 +++++++++----------
 assets/css/base.scss                          |  1 +
 assets/css/structures/_table-of-content.scss  |  3 +++
 4 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 assets/css/structures/_table-of-content.scss

diff --git a/11ty/_includes/components/table-of-content-item.njk b/11ty/_includes/components/table-of-content-item.njk
index 05643741..6359c1e6 100644
--- a/11ty/_includes/components/table-of-content-item.njk
+++ b/11ty/_includes/components/table-of-content-item.njk
@@ -1,4 +1,4 @@
-<li>
+<li class="toc__list-item">
   {{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe  }}
   {%- if
     definition.data.flag and
diff --git a/11ty/_includes/components/table-of-content.njk b/11ty/_includes/components/table-of-content.njk
index aa1ce1fc..5f1458e1 100644
--- a/11ty/_includes/components/table-of-content.njk
+++ b/11ty/_includes/components/table-of-content.njk
@@ -1,16 +1,16 @@
 <section>
   <nav class="" aria-label="Definitions">
     <ol class="multi-column u-no-padding-left list">
-    {% for section in collections.tableOfContent %}
-      <li>
-        <span class="sub-headline">{{ section.title }}</span>
-        <ol>
-          {% for definition in section.definitions %}
-            {% include 'components/table-of-content-item.njk' %}
-          {% endfor %}
-        </ol>
-      </li>
-    {% endfor %}
+      {% for section in collections.tableOfContent %}
+        <li>
+          <span class="sub-headline">{{ section.title }}</span>
+          <ol class="toc__list">
+            {% for definition in section.definitions %}
+              {% include 'components/table-of-content-item.njk' %}
+            {% endfor %}
+          </ol>
+        </li>
+      {% endfor %}
     </ol>
   </nav>
 </section>
diff --git a/assets/css/base.scss b/assets/css/base.scss
index fa5edc53..23d95620 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -181,6 +181,7 @@ th {
   column-gap: var(--l-gap);
   column-width: var(--auto-grid-min-size);
 }
+@import './structures/table-of-content';
 
 .small-left-grid {
   display: grid;
diff --git a/assets/css/structures/_table-of-content.scss b/assets/css/structures/_table-of-content.scss
new file mode 100644
index 00000000..683b5b75
--- /dev/null
+++ b/assets/css/structures/_table-of-content.scss
@@ -0,0 +1,3 @@
+.toc__list-item {
+  page-break-inside: avoid;
+}

From 7a04c5fa6f1548bc826bffbb50ce89654b167763 Mon Sep 17 00:00:00 2001
From: Oscar <o@ovl.design>
Date: Wed, 15 Jan 2020 16:13:36 +0100
Subject: [PATCH 2/3] chore: move mutli col into own file

---
 assets/css/base.scss                     | 6 +-----
 assets/css/structures/_multi-column.scss | 5 +++++
 2 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 assets/css/structures/_multi-column.scss

diff --git a/assets/css/base.scss b/assets/css/base.scss
index 23d95620..6eeb922b 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -176,11 +176,7 @@ th {
   grid-gap: var(--l-gap);
 }
 
-.multi-column {
-  column-count: auto;
-  column-gap: var(--l-gap);
-  column-width: var(--auto-grid-min-size);
-}
+@import './structures/multi-column';
 @import './structures/table-of-content';
 
 .small-left-grid {
diff --git a/assets/css/structures/_multi-column.scss b/assets/css/structures/_multi-column.scss
new file mode 100644
index 00000000..735fb062
--- /dev/null
+++ b/assets/css/structures/_multi-column.scss
@@ -0,0 +1,5 @@
+.multi-column {
+  column-count: auto;
+  column-gap: var(--l-gap);
+  column-width: var(--auto-grid-min-size);
+}

From 61508441c4b9b3b1f751eb0a074318e9a6c8ee9f Mon Sep 17 00:00:00 2001
From: Oscar <o@ovl.design>
Date: Wed, 15 Jan 2020 16:19:56 +0100
Subject: [PATCH 3/3] fix(table of content): use break-inside

---
 assets/css/structures/_table-of-content.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/structures/_table-of-content.scss b/assets/css/structures/_table-of-content.scss
index 683b5b75..a459f3e0 100644
--- a/assets/css/structures/_table-of-content.scss
+++ b/assets/css/structures/_table-of-content.scss
@@ -1,3 +1,3 @@
 .toc__list-item {
-  page-break-inside: avoid;
+  break-inside: avoid;
 }