Improved CSS definitions, more fine-grained content build script

6 files changed, 130 insertions, 92 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;
+      }
+    }
   }
 }