From e7d6404ab184a5f6a8645bd0ac90b3676b8c5efc Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Dec 2020 13:22:37 +0100 Subject: Improved CSS definitions, more fine-grained content build script --- assets/css/_basics.scss | 10 ++--- assets/css/_utils.scss | 20 +++++----- assets/css/_vars.scss | 16 +++++--- assets/css/components/_nav.scss | 70 ++++++++++++++++++++++------------- assets/css/layouts/_container.scss | 30 +++++++-------- assets/css/scopes/_page.scss | 76 ++++++++++++++++++++++---------------- scripts/build_content.sh | 28 +++++++++++--- scripts/watch_content.sh | 4 +- scripts/watch_metadata.sh | 2 +- scripts/watch_templates.sh | 2 +- templates/base.html | 8 ++-- templates/pageHeaderSm.html | 16 ++++---- 12 files changed, 169 insertions(+), 113 deletions(-) diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index dd394da..202117e 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -44,8 +44,10 @@ code { pre { margin: 0; color: var(--code-block-fg); - font-size: $code-block-font-size; + font-size: 1em; line-height: $code-block-line-height; + text-overflow: ""; + overflow: hidden; strong { font-weight: normal; @@ -107,7 +109,7 @@ h3 { h1 { text-transform: uppercase; - font-size: px-to-em($heading-font-size); + font-size: 1em; color: var(--heading-fg); } @@ -149,10 +151,6 @@ hr { margin: ($line-height * 2rem) 0 ($line-height * 2rem); background-color: var(--bg-plus); border: 0; - - @media (max-width: $breakpoint-sm) { - margin-left: 0; - } } blockquote { diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index bf7e213..036a87e 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -1,15 +1,17 @@ .u-hidden { - display: none; + display: none; - &\@sm-down { - @media (max-width: $breakpoint-sm) { - display: none; - } + @each $name, $width in $breakpoints { + &\@#{$name}-down { + @media (max-width: $width) { + display: none; + } } - &\@sm-up { - @media (min-width: $breakpoint-sm + 1) { - display: none; - } + &\@#{$name}-up { + @media (min-width: $width + 1) { + display: none; + } } + } } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 4883605..1ed64a5 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,6 +1,7 @@ -$font-size: 17px; -$heading-font-size: $font-size + 1; -$code-block-font-size: $font-size; +$font-size: 16px; +$content-font-size: $font-size + 1; +$content-h1-font-size: $content-font-size + 1; + $line-height: 1.5; $code-block-line-height: 1.4; @@ -12,7 +13,10 @@ $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; $subcontent-indent: 4ch; -$breakpoint-sm: 700px; +$breakpoints: ( + xs: 380px, + sm: 700px, +); :root { --gray0: hsl(270, 0%, 7%); @@ -41,8 +45,8 @@ $breakpoint-sm: 700px; --page-item-prefix-fg: var(--fg-minus); - --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6); - --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5); + --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); diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index d86a484..834b6a0 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,36 +1,56 @@ .c-nav { - background-color: var(--nav-bg); - //border-bottom: 1px solid var(--bg-plus); + background-color: var(--nav-bg); - &__items { - display: flex; - align-items: baseline; + &__items { + display: flex; + align-items: baseline; + } + + &__logo { + display: inline-block; + color: var(--nav-logo-fg); + text-decoration: none; + + &:link, + &:visited { + &:hover { + background-color: transparent; + color: var(--nav-item-hover-fg); + font-weight: bold; + } } + } - &__logo { - display: inline-block; - color: var(--nav-logo-fg); - text-decoration: none; + &__item { + display: inline-block; + padding: 1rem 1ch calc(1rem - 2px); + margin: 0 -1ch 0 3ch; + color: var(--nav-item-idle-fg); + text-decoration: none; + border-bottom: 2px solid transparent; - &:link:hover { - background-color: transparent; - color: var(--nav-item-hover-fg); - font-weight: bold; - } + &:hover { + background-color: transparent; + color: var(--nav-item-hover-fg); + font-weight: bold; } + } + @media (max-width: map-get($breakpoints, "sm")) { &__item { - display: inline-block; - padding: 1rem 1ch calc(1rem - 2px); - margin: 0 -1ch 0 3ch; - color: var(--nav-item-idle-fg); - text-decoration: none; - border-bottom: 2px solid transparent; - - &:hover { - background-color: transparent; - color: var(--nav-item-hover-fg); - font-weight: bold; + margin-left: 2ch; + } + } + + /* + @media (max-width: map-get($breakpoints, "xs")) { + &__logo { + display: none; + } + + &__logo + &__item { + margin-left: -1ch; } } + */ } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 9159f5a..b5dee3c 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,20 +1,20 @@ .l-container { - padding-left: 2rem; - padding-right: 2rem; + padding-left: 2rem; + padding-right: 2rem; - &--narrow { - margin-left: auto; - margin-right: auto; - max-width: $content-width; - } + &--content { + margin-left: auto; + margin-right: auto; + max-width: $content-width; + } - &--pad-v { - padding-top: $line-height * 2rem; - padding-bottom: $line-height * 2rem; - } + &--pad-v { + padding-top: $line-height * 2rem; + padding-bottom: $line-height * 2rem; + } - @media (max-width: $breakpoint-sm) { - padding-left: 1rem; - padding-right: 1rem; - } + @media (max-width: map-get($breakpoints, "sm")) { + padding-left: 1rem; + padding-right: 1rem; + } } diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index 4a97b79..21d49d0 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,8 +1,12 @@ .s-page { - padding-left: $page-item-prefix-width; + font-size: px-to-em($content-font-size); - > :first-child { - margin-top: 0; + &__content { + padding-left: $page-item-prefix-width; + + > :first-child { + margin-top: 0; + } } h1, @@ -22,25 +26,20 @@ padding-right: $page-item-prefix-pad; width: $page-item-prefix-width; color: var(--page-item-prefix-fg); - font-size: 1rem; font-weight: normal; text-align: right; } + } - @media (max-width: $breakpoint-sm) { - margin-left: 0; - padding-left: 0; + h1 { + font-size: px-to-em($content-h1-font-size, $content-font-size); - &::before { - display: none; - } + &::before { + content: "#"; + font-size: px-to-em($content-font-size, $content-h1-font-size); } } - h1::before { - content: "#"; - } - h2::before { content: "##"; } @@ -53,12 +52,16 @@ content: "|>"; } - pre::before { - content: str-repeat("``\A", 40); - height: 100%; - color: var(--page-item-prefix-fg); - overflow: hidden; - line-height: $code-block-line-height * ($code-block-font-size / $font-size); + pre { + font-size: px-to-em($font-size, $content-font-size); + + &::before { + content: str-repeat("``\A", 40); + height: 100%; + color: var(--page-item-prefix-fg); + overflow: hidden; + line-height: $code-block-line-height; + } } hr { @@ -72,26 +75,37 @@ &::after { margin-left: -1 * $page-item-prefix-width; } + } + + @media (max-width: map-get($breakpoints, "sm")) { + &__content { + padding-left: 0; + } - @media (max-width: $breakpoint-sm) { + h1, + h2, + h3, + .c-refs__item, + pre { margin-left: 0; padding-left: 0; - &::after { - margin-left: 0; + &::before { + display: none; } } - } - - .c-nav { - margin-left: -1 * $page-item-prefix-width; - @media (max-width: $breakpoint-sm) { + hr { margin-left: 0; } - } - @media (max-width: $breakpoint-sm) { - padding-left: 0; + .c-page-header { + margin-left: 0; + padding-left: 0; + + &::after { + margin-left: 0; + } + } } } diff --git a/scripts/build_content.sh b/scripts/build_content.sh index ca75120..6ce857f 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -35,10 +35,28 @@ if [ -z "$1" ]; then do handle "$FILE" done -elif [ "$2" = "delete" ]; then - TARGET=$(target "$1") - echo "[DELETE ] $1 -> $TARGET" - rm -rf $TARGET +elif [ "$1" = "md" ]; then + find content/ \ + -type f \ + -name "*.md" \ + | while read FILE + do + handle "$FILE" + done +elif [ "$1" = "single" ]; then + if [ -z "$2" ]; then + echo "[ERROR ] \"single\" operation requires file argument" + else + handle "$2" + fi +elif [ "$1" = "delete" ]; then + if [ -z "$2" ]; then + echo "[ERROR ] \"delete\" operation requires file argument" + else + TARGET=$(target "$2") + echo "[DELETE ] $2 -> $TARGET" + rm -rf $TARGET + fi else - handle "$1" + echo "[ERROR ] Unknown operation: \"$1\"" fi diff --git a/scripts/watch_content.sh b/scripts/watch_content.sh index c4f55fb..769f2c5 100755 --- a/scripts/watch_content.sh +++ b/scripts/watch_content.sh @@ -4,8 +4,8 @@ inotifywait -qrme close_write,delete,move --format "%w%f" content \ | while read FILENAME do if [ -f "$FILENAME" ]; then - scripts/build_content.sh "$FILENAME" + scripts/build_content.sh "single" "$FILENAME" elif [ ! -d "$FILENAME" ]; then - scripts/build_content.sh "$FILENAME" "delete" + scripts/build_content.sh "delete" "$FILENAME" fi done diff --git a/scripts/watch_metadata.sh b/scripts/watch_metadata.sh index af2e6a7..4323c90 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 + scripts/build_content.sh "md" done diff --git a/scripts/watch_templates.sh b/scripts/watch_templates.sh index 160a46c..9c7e787 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 + scripts/build_content.sh "md" done diff --git a/templates/base.html b/templates/base.html index 96dd4ff..d381984 100644 --- a/templates/base.html +++ b/templates/base.html @@ -31,15 +31,15 @@ -
-
+
+
$if(isHome)$