From 8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 8 Jan 2021 11:45:30 +0100 Subject: Added section link to the header in regular pages, improved template structure, improved CSS variable names, keep prefix for specific page items on mobile --- .stylelintrc.json | 2 +- assets/css/_vars.scss | 9 ++-- assets/css/components/_nav.scss | 2 +- assets/css/components/_page.scss | 95 +++++++++++++++++++++++--------------- assets/css/layouts/_container.scss | 8 ++-- scripts/metadata_filter.lua | 14 ++++-- templates/base.html | 14 ++---- templates/layouts/dated_list.html | 37 ++++++++------- templates/layouts/index.html | 28 ++++++----- templates/layouts/page.html | 32 +++++++++---- 10 files changed, 145 insertions(+), 96 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 49f4e7f..58d0137 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -3,7 +3,7 @@ "rules": { "indentation": 4, "number-leading-zero": "never", - "max-nesting-depth": 3, + "max-nesting-depth": 4, "selector-class-pattern": [ "^[closu](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", { "resolveNestedSelectors": true } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 1c46660..77b59b9 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -10,13 +10,13 @@ $content--h1--font-size: $font-size + 1; $subcontent--indent: 4ch; $container--pad-h: 2rem; -$container--pad-h-sm: 1rem; +$container--pad-h--sm: 1rem; $container--pad-v: $line-height * 2rem; -$container--pad-v-sm: $line-height * 1rem; +$container--pad-v--sm: $line-height * 1rem; $nav--font-size: $font-size - 1; $nav--item--spacing: 4ch; -$nav--item--spacing-sm: 3ch; +$nav--item--spacing--sm: 3ch; $nav--item--pad-h: 1ch; $nav--item--pad-v: .9em; @@ -24,6 +24,9 @@ $page--item-prefix--max-chars: 3ch; $page--item-prefix--pad: 2ch; $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; +$page--item-prefix--max-chars--sm: 2ch; +$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad; + $breakpoints: ( xs: 380px, sm: 700px, diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 6d087ad..dc33d1e 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -50,7 +50,7 @@ @media (max-width: map-get($breakpoints, 'sm')) { &__item { - margin-left: $nav--item--spacing-sm - $nav--item--pad-h; + margin-left: $nav--item--spacing--sm - $nav--item--pad-h; } } diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index a55bcb4..435d696 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -1,34 +1,4 @@ .c-page { - &__header { - margin-bottom: $line-height * 1em; - - &::after { - content: '--'; - display: block; - margin-bottom: $line-height * -1em; - color: var(--fg-hi); - line-height: 2 * $line-height; - } - - &__title { - margin-top: 0; - } - - &__meta { - margin-top: 0; - color: var(--fg-hi); - font-weight: normal; - } - } - - &__content { - padding-left: $page--item-prefix--width; - - > :first-child { - margin-top: 0; - } - } - &__prefixed { position: relative; margin-left: -1 * $page--item-prefix--width; @@ -92,22 +62,75 @@ } &--ref::before { - content: '->'; + content: '|>'; + } + + &--backref::before { + content: '<|'; } } - @media (max-width: map-get($breakpoints, 'sm')) { - &__content { - padding-left: 0; + &__header { + margin-bottom: $line-height * 1em; + + &__title { + margin-top: 0; + } + + &__backlink__link { + &:link, + &:visited { + color: var(--fg-hi); + + &:hover { + color: var(--link--hover--fg); + } + } + } + + &__backlink + &__title { + margin-top: $line-height * 1em; + } + + &__meta { + margin-top: 0; + color: var(--fg-hi); + font-weight: normal; + } + } + + &__content { + padding-left: $page--item-prefix--width; + + > :first-child { + margin-top: 0; } + } + @media (max-width: map-get($breakpoints, 'sm')) { &__prefixed { margin-left: 0; - padding-left: 0; + padding-left: $page--item-prefix--width--sm; &::before { - display: none; + width: $page--item-prefix--width--sm; + margin-left: -1 * $page--item-prefix--width--sm; + } + + &--h1, + &--h2, + &--h3, + &--pre { + padding-left: 0; + + &::before { + display: none; + } } } + + &__content { + padding-left: 0; + } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index f0544f7..e99c62f 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -14,12 +14,12 @@ } @media (max-width: map-get($breakpoints, 'sm')) { - padding-right: $container--pad-h-sm; - padding-left: $container--pad-h-sm; + padding-right: $container--pad-h--sm; + padding-left: $container--pad-h--sm; &--pad-v { - padding-top: $container--pad-v-sm; - padding-bottom: $container--pad-v-sm; + padding-top: $container--pad-v--sm; + padding-bottom: $container--pad-v--sm; } } } diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua index 4abb716..fb7b3c9 100644 --- a/scripts/metadata_filter.lua +++ b/scripts/metadata_filter.lua @@ -137,15 +137,23 @@ function resolve_category(categories, category) end function create_main_menu_state(section, main_menu) + local active_item = nil + for i = 1, #main_menu do local item = main_menu[i] local active = pandoc.utils.stringify(item.id) == section.id item.active = pandoc.MetaBool(active) + if active then + active_item = item + end end - return main_menu:filter(function(item) - return not item.hidden or item.active - end) + return pandoc.MetaMap({ + items = main_menu:filter(function(item) + return not item.hidden or item.active + end), + active = active_item + }) end function organize_subpages(pages) diff --git a/templates/base.html b/templates/base.html index da3dec9..8682125 100644 --- a/templates/base.html +++ b/templates/base.html @@ -36,23 +36,19 @@ -
-
- $if(section.is_index)$ + $if(section.is_index)$ ${layouts/index()} - $elseif(layout.is_dated_list)$ + $elseif(layout.is_dated_list)$ ${layouts/dated_list()} - $else$ + $else$ ${layouts/page()} - $endif$ -
-
+ $endif$ diff --git a/templates/layouts/dated_list.html b/templates/layouts/dated_list.html index 0a279f0..8c5de69 100644 --- a/templates/layouts/dated_list.html +++ b/templates/layouts/dated_list.html @@ -1,22 +1,25 @@ -

$title$

- +
+
+

$title$

$body$ -$if(categories)$ -
    - $for(categories)$ -
  • $it.key/uppercase$ $it.value.name$
    • - $endfor$ -
-$endif$ + $if(categories)$ +
    + $for(categories)$ +
  • $it.key/uppercase$ $it.value.name$
    • + $endfor$ +
+ $endif$ -$for(pages.by_year)$ - -$endfor$ +
+
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 144d1ed..a1410f1 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html @@ -1,14 +1,16 @@ - $body$ + +