Improved SCSS structure, keep less glyphs in fonts

6 files changed, 26 insertions, 24 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%;