mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-01-22 17:30:00 +00:00
Code Issues Projects Releases Wiki Activity

styles(table of content): use multi column layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<section> <section>
<nav class="" aria-label="Definitions"> <nav class="" aria-label="Definitions">
<ol class="auto-grid 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>

14
assets/css/base.scss
View File

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