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] 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;
+}