styles(table of content): use multi column layout

This commit is contained in:
Oscar 2019-11-29 17:45:38 +01:00
parent 58ba26142c
commit 5d26c51acf
2 changed files with 14 additions and 2 deletions

View File

@ -1,6 +1,6 @@
<section>
<nav class="" aria-label="Definitions">
<ol class="auto-grid list">
<ol class="multi-column u-no-padding-left list">
{% for section in collections.tableOfContent %}
<li>
<span class="sub-headline">{{ section.title }}</span>

View File

@ -27,6 +27,8 @@ code {
:root {
--auto-grid-min-size: 17rem;
--l-gap: 1rem;
}
$primary-color: #0e4bff; //cobalt blue is so pretty//
@ -171,7 +173,13 @@ th {
auto-fill,
minmax(var(--auto-grid-min-size), 1fr)
);
grid-gap: 1rem;
grid-gap: var(--l-gap);
}
.multi-column {
column-count: auto;
column-gap: var(--l-gap);
column-width: var(--auto-grid-min-size);
}
.small-left-grid {
@ -414,3 +422,7 @@ th {
.site-footer {
margin-top: 3rem;
}
.u-no-padding-left {
padding-left: 0 !important;
}