mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-31 14:18:32 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #43 from ovlb/feature/fix-break-in-table-of-content

Browse Source 
👩‍🎨 Avoid Breaks in Table of Content Items
This commit is contained in:
Tatiana Mac
2020-02-11 21:38:30 -08:00
committed by GitHub
parent 75dddd91fe 61508441c4
commit b21367fb9b
5 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
11ty/_includes/components/table-of-content-item.njk
View File

@@ -1,4 +1,4 @@
<li>
<li class="toc__list-item">
{{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe }}
{%- if
definition.data.flag and

20
11ty/_includes/components/table-of-content.njk
View File

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

7
assets/css/base.scss
View File

@@ -206,11 +206,8 @@ 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 {
display: grid;

5
assets/css/structures/_multi-column.scss Normal file
View File

@@ -0,0 +1,5 @@
.multi-column {
column-count: auto;
column-gap: var(--l-gap);
column-width: var(--auto-grid-min-size);
}

3
assets/css/structures/_table-of-content.scss Normal file
View File

@@ -0,0 +1,3 @@
.toc__list-item {
break-inside: avoid;
}