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 }} {{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe }}
{%- if {%- if
definition.data.flag and definition.data.flag and

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

@@ -1,16 +1,16 @@
<section> <section>
<nav class="" aria-label="Definitions"> <nav class="" aria-label="Definitions">
<ol class="multi-column u-no-padding-left list"> <ol class="multi-column u-no-padding-left list">
{% for section in collections.tableOfContent %} {% for section in collections.tableOfContent %}
<li> <li>
<span class="sub-headline">{{ section.title }}</span> <span class="sub-headline">{{ section.title }}</span>
<ol> <ol class="toc__list">
{% for definition in section.definitions %} {% for definition in section.definitions %}
{% include 'components/table-of-content-item.njk' %} {% include 'components/table-of-content-item.njk' %}
{% endfor %} {% endfor %}
</ol> </ol>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</nav> </nav>
</section> </section>

7
assets/css/base.scss
View File

@@ -206,11 +206,8 @@ th {
grid-gap: var(--l-gap); grid-gap: var(--l-gap);
} }
.multi-column { @import './structures/multi-column';
column-count: auto; @import './structures/table-of-content';
column-gap: var(--l-gap);
column-width: var(--auto-grid-min-size);
}
.small-left-grid { .small-left-grid {
display: 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;
}