From 17e7802f1eef43b6d0ae77fdf646d7e6fe8ccc37 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Dec 2020 12:11:45 +0100 Subject: Improved SCSS structure, keep less glyphs in fonts --- assets/css/_basics.scss | 12 ++++++------ assets/css/_vars.scss | 15 ++++++++++----- assets/css/components/_nav.scss | 1 + assets/css/components/_page-header.scss | 2 +- assets/css/layouts/_container.scss | 12 ++++++------ assets/css/scopes/_page.scss | 8 ++------ assets/fonts/glyphs.txt | 2 +- scripts/build_content.sh | 2 +- scripts/watch_metadata.sh | 2 +- scripts/watch_templates.sh | 2 +- templates/pageHeader.html | 6 +++--- 11 files changed, 33 insertions(+), 31 deletions(-) diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 202117e..da971d4 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -44,7 +44,7 @@ code { pre { margin: 0; color: var(--code-block-fg); - font-size: 1em; + font-size: $code-block-font-size; line-height: $code-block-line-height; text-overflow: ""; overflow: hidden; @@ -61,7 +61,7 @@ strong { ul, ol { - margin: ($line-height * 1rem) 0 0; + margin: ($line-height * 1em) 0 0; padding: 0; list-style: none; } @@ -98,12 +98,12 @@ ol { h1, h2, h3 { - margin: ($line-height * 2rem) 0 0; + margin: ($line-height * 2em) 0 0; + h1, + h2, + h3 { - margin-top: $line-height * 1rem; + margin-top: $line-height * 1em; } } @@ -148,14 +148,14 @@ p { hr { height: 1px; - margin: ($line-height * 2rem) 0 ($line-height * 2rem); + margin: ($line-height * 2em) 0 ($line-height * 2em); background-color: var(--bg-plus); border: 0; } blockquote { position: relative; - margin: ($line-height * 1rem) 0 0; + margin: ($line-height * 1em) 0 0; padding-left: calc(#{$subcontent-indent} - 2px); border-left: 2px solid var(--bg-plus); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index f9c80da..c061f4f 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,16 +1,21 @@ -$font-size: 16px; -$content-font-size: $font-size + 1; -$content-h1-font-size: $content-font-size + 1; +$font-size: 17px; +$nav-font-size: $font-size - 1; +$code-block-font-size: $font-size - 1; +$content-h1-font-size: $font-size + 1; $line-height: 1.5; $code-block-line-height: 1.4; -$content-width: 75ch; +$content-width: 80ch; + +$container-pad-h: 2rem; +$container-pad-h-sm: 1rem; +$container-pad-v: $line-height * 2rem; $nav-item-spacing: 4ch; $nav-item-spacing-sm: 3ch; $nav-item-pad-h: 1ch; -$nav-item-pad-v: 1rem; +$nav-item-pad-v: 1em; $page-item-prefix-max-chars: 3ch; $page-item-prefix-pad: 2ch; diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index a85c7d8..7f5eb19 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,5 +1,6 @@ .c-nav { background-color: var(--nav-bg); + font-size: $nav-font-size; &__items { display: flex; diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index 29eef00..ada20ab 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -1,5 +1,5 @@ .c-page-header { - margin-bottom: $line-height * 2rem; + margin-bottom: $line-height * 2em; overflow: hidden; &::after { diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index b5dee3c..7f6e292 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,6 +1,6 @@ .l-container { - padding-left: 2rem; - padding-right: 2rem; + padding-left: $container-pad-h; + padding-right: $container-pad-h; &--content { margin-left: auto; @@ -9,12 +9,12 @@ } &--pad-v { - padding-top: $line-height * 2rem; - padding-bottom: $line-height * 2rem; + padding-top: $container-pad-v; + padding-bottom: $container-pad-v; } @media (max-width: map-get($breakpoints, "sm")) { - padding-left: 1rem; - padding-right: 1rem; + padding-left: $container-pad-h-sm; + padding-right: $container-pad-h-sm; } } diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index 21d49d0..cdbdeb4 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,6 +1,4 @@ .s-page { - font-size: px-to-em($content-font-size); - &__content { padding-left: $page-item-prefix-width; @@ -32,11 +30,11 @@ } h1 { - font-size: px-to-em($content-h1-font-size, $content-font-size); + font-size: px-to-em($content-h1-font-size); &::before { content: "#"; - font-size: px-to-em($content-font-size, $content-h1-font-size); + font-size: px-to-em($font-size, $content-h1-font-size); } } @@ -53,8 +51,6 @@ } pre { - font-size: px-to-em($font-size, $content-font-size); - &::before { content: str-repeat("``\A", 40); height: 100%; diff --git a/assets/fonts/glyphs.txt b/assets/fonts/glyphs.txt index ac0461a..d61faee 100644 --- a/assets/fonts/glyphs.txt +++ b/assets/fonts/glyphs.txt @@ -1 +1 @@ - !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`´abcdefghijklmnopqrstuvwxyz{|}~äöüÄÖÜßẞ↓↙←↖↑↗→↘€»«„“”·…°’‾█▓▒░ ▀▄‐╭╮─│╰╯┌┐└┘├╱╲╳ʻ‘ + !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`´abcdefghijklmnopqrstuvwxyz{|}~äöüÄÖÜßẞ€„“”·…°’█▓▒░ diff --git a/scripts/build_content.sh b/scripts/build_content.sh index 8acdcdf..6b50cd8 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -35,7 +35,7 @@ if [ -z "$1" ]; then do handle "$FILE" done -elif [ "$1" = "md" ]; then +elif [ "$1" = "all_md" ]; then find content/ \ -type f \ -name "*.md" \ diff --git a/scripts/watch_metadata.sh b/scripts/watch_metadata.sh index 4323c90..41457e1 100755 --- a/scripts/watch_metadata.sh +++ b/scripts/watch_metadata.sh @@ -3,5 +3,5 @@ inotifywait -qrme close_write,delete,move --format "%w%f" metadata \ | while read FILENAME do - scripts/build_content.sh "md" + scripts/build_content.sh "all_md" done diff --git a/scripts/watch_templates.sh b/scripts/watch_templates.sh index 9c7e787..3482ac6 100755 --- a/scripts/watch_templates.sh +++ b/scripts/watch_templates.sh @@ -3,5 +3,5 @@ inotifywait -qrme close_write,delete,move --format "%w%f" templates \ | while read FILENAME do - scripts/build_content.sh "md" + scripts/build_content.sh "all_md" done diff --git a/templates/pageHeader.html b/templates/pageHeader.html index 9fe1867..0521c88 100644 --- a/templates/pageHeader.html +++ b/templates/pageHeader.html @@ -4,9 +4,9 @@ .| ' ____,...,______..,_~`` -`.., ' | ' | ' ' | _,~´"' , . ,~--´ ' _| | . |~~.__ ' ' | | ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) ' ' - '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _.._ -___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/____ -░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ + '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _,--. +___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____ +░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ --> 
 ' |      '     '             '     '            '   | |    |           '     '  
-- 
cgit v1.2.3-70-g09d2