Improved SCSS structure, keep less glyphs in fonts

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 @@
  .|      '      ____,...,______..,_~``  -`..,   '   |    ' |           '     '
   |       _,~´"'  ,               .    ,~--´    '  _|  | . |~~.__      '     '
 | |    ,-"    _.-|~/  |..,____,) ,/,,"'         '_( | '    |)    )     '     '
- '|    \__,~"´   /:) /       |:\ \            ,~(    ) . | |  )   `,   '   _.._
-___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/____
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ '|    \__,~"´   /:) /       |:\ \            ,~(    ) . | |  )   `,   '   _,--.
+___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 -->
 <pre class="u-hidden@sm-down">
 ' |      '     '             '     '            '   | |    |           '     '