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

👩‍🎨 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
commit b21367fb9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 16 deletions

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

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>

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;

View File

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

View File

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