From 598b5e44aa2f949ac470a46a9c850d62211cec42 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 28 Dec 2020 18:23:37 +0100 Subject: Improved CSS vars and scopes --- assets/css/_basics.scss | 12 +++----- assets/css/_vars.scss | 54 +++++++++++++++++++-------------- assets/css/components/_page-header.scss | 4 +-- assets/css/components/_refs.scss | 7 ----- assets/css/scopes/_page.scss | 22 ++++++++++++-- assets/css/scopes/_refs.scss | 9 ++++++ assets/css/style.scss | 2 +- content/index.md | 12 ++++---- filters/links_to_refs.lua | 3 ++ scripts/build_content.sh | 1 + templates/pagelistByYear.html | 4 +-- 11 files changed, 79 insertions(+), 51 deletions(-) delete mode 100644 assets/css/components/_refs.scss create mode 100644 assets/css/scopes/_refs.scss create mode 100644 filters/links_to_refs.lua diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 560ec94..a8ed013 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -55,7 +55,7 @@ pre { } strong { - color: var(--fg-plus-2); + color: var(--fg-lo); font-weight: bold; } @@ -75,7 +75,7 @@ li { position: absolute; width: $subcontent--indent; margin-left: -1 * $subcontent--indent; - color: var(--fg-minus); + color: var(--fg-hi); } } @@ -142,20 +142,16 @@ p { } } -:visited { - color: var(--link--visited--fg); -} - hr { height: 1px; margin: ($line-height * 2em) 0 ($line-height * 2em); border: 0; - background-color: var(--bg-plus); + background-color: var(--obj); } blockquote { position: relative; margin: ($line-height * 1em) 0 0; padding-left: calc(#{$subcontent--indent} - 2px); - border-left: 2px solid var(--bg-plus); + border-left: 2px solid var(--obj); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 9cd4b24..2242f09 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -34,35 +34,45 @@ $breakpoints: ( --gray2: hsl(270, 1%, 29%); --gray3: hsl(270, 2%, 54%); --gray4: hsl(270, 2%, 73%); - --gray5: hsl(270, 2%, 83%); - --gray6: hsl(270, 2%, 100%); + --gray5: hsl(270, 2%, 86%); + --gray5: hsl(270, 2%, 100%); - --bg-minus: var(--gray0); - --bg: var(--gray1); - --bg-plus: var(--gray2); - --fg-minus: var(--gray3); - --fg: var(--gray4); - --fg-plus: var(--gray5); - --fg-plus-2: var(--gray6); + // - --heading--fg: var(--fg-plus-2); + --bg-hi: var(--gray0); // Lighter background + --bg: var(--gray1); // Background + + --obj: var(--gray2); + + --fg-hi: var(--gray3); // Faint text + --fg: var(--gray4); // Text + --fg-lo: var(--gray5); // Strong text + + // + + --heading--fg: var(--fg-lo); --select--bg: hsla(270, 2%, 100%, .996); - --select--fg: var(--bg-minus); + --select--fg: var(--bg-hi); - --code--fg: var(--fg-minus); - --code-block--fg: var(--fg-minus); + --code--fg: var(--fg-hi); - --page--item-prefix--fg: var(--fg-minus); + --code-block--fg: var(--fg-hi); - --link--idle--fg: var(--fg-plus-2); //#90acf2; - --link--visited--fg: var(--fg-plus); //#bc9df2; - --link--hover--bg: var(--fg-plus-2); - --link--hover--fg: var(--bg-minus); + --link--idle--fg: var(--fg-lo); + --link--hover--bg: var(--link--idle--fg); + --link--hover--fg: #000; - --nav--bg: var(--bg-minus); - --nav--logo--fg: var(--fg-minus); + --nav--bg: var(--bg-hi); + --nav--logo--fg: var(--fg-hi); --nav--item--idle--fg: var(--fg); - --nav--item--hover--fg: var(--fg-plus-2); - --nav--item--active--fg: var(--fg-plus-2); + --nav--item--hover--fg: var(--fg-lo); + --nav--item--active--fg: var(--fg-lo); + + --page--item-prefix--fg: var(--fg-hi); + + --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; + --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; + --page--link--hover--bg: var(--page--link--idle--fg); + --page--link--hover--fg: #000; } diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index e15be1c..ee86daf 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -10,8 +10,8 @@ height: $line-height; margin-top: px-to-em(2px); padding-top: px-to-em(2px); - border-top: 1px solid var(--fg-minus); - color: var(--fg-minus); + border-top: 1px solid var(--fg-hi); + color: var(--fg-hi); line-height: $code-block--line-height; } diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss deleted file mode 100644 index 51524bd..0000000 --- a/assets/css/components/_refs.scss +++ /dev/null @@ -1,7 +0,0 @@ -.c-refs__item { - padding-left: 0; - - &::before { - display: none; - } -} diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index ba61b5f..6448d08 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -10,7 +10,7 @@ h1, h2, h3, - .c-refs__item, + .s-refs li, pre { position: relative; margin-left: -1 * $page--item-prefix--width; @@ -46,7 +46,7 @@ content: '###'; } - .c-refs__item::before { + .s-refs li::before { content: '->'; } @@ -65,6 +65,22 @@ margin-left: -1 * $page--item-prefix--width; } + :link { + color: var(--page--link--idle--fg); + } + + :visited { + color: var(--page--link--visited--fg); + } + + :link, + :visited { + &:hover { + background-color: var(--page--link--hover--bg); + color: var(--page--link--hover--fg); + } + } + .c-page-header { margin-left: -1 * $page--item-prefix--width; padding-left: $page--item-prefix--width; @@ -82,7 +98,7 @@ h1, h2, h3, - .c-refs__item, + .s-refs li, pre { margin-left: 0; padding-left: 0; diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss new file mode 100644 index 0000000..79434ff --- /dev/null +++ b/assets/css/scopes/_refs.scss @@ -0,0 +1,9 @@ +.s-refs { + li { + padding-left: 0; + + &::before { + display: none; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 0473689..8d9a87f 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -2,12 +2,12 @@ @import 'functions'; @import 'basics'; -@import 'components/refs'; @import 'components/nav'; @import 'components/page-header'; @import 'layouts/container'; +@import 'scopes/refs'; @import 'scopes/page'; @import 'utils'; diff --git a/content/index.md b/content/index.md index dd058d8..f9111ef 100644 --- a/content/index.md +++ b/content/index.md @@ -4,13 +4,13 @@ title: Home # Volpeon's Den -Welcome to my website! I'm Volpeon and here's an [inline link](#). +Welcome to my website! I'm Volpeon and here's an [inline link](#c). > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et > dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet > clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -Welcome to my website! I'm Volpeon and here's an [inline link](#). +Welcome to my website! I'm Volpeon and here's an [inline link](#d). ## Subtitle @@ -22,7 +22,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#). 1. Lorem ipsum dolor sit amet 2. Another item - +::: { .s-refs } +- [Lorem ipsum dolor sit amet](#a) +- [Another item](#b) +::: diff --git a/filters/links_to_refs.lua b/filters/links_to_refs.lua new file mode 100644 index 0000000..f19a0f9 --- /dev/null +++ b/filters/links_to_refs.lua @@ -0,0 +1,3 @@ +function Link (el) + return { pandoc.Span(el.content), pandoc.Note { pandoc.Plain(pandoc.Link(el.content, el.target, el.title)) } } +end diff --git a/scripts/build_content.sh b/scripts/build_content.sh index e3b97ea..feb3c0d 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -137,6 +137,7 @@ handle () { --metadata "is$section" \ --metadata-file metadata/metadata.yaml \ --metadata-file "$subpages_meta_file" + # --lua-filter "filters/add_refs.lua" rm "$subpages_meta_file" else diff --git a/templates/pagelistByYear.html b/templates/pagelistByYear.html index 8270530..758d45b 100644 --- a/templates/pagelistByYear.html +++ b/templates/pagelistByYear.html @@ -1,9 +1,9 @@ $for(pages)$ $for(it.by_year/pairs)$

$it.key$

-