Improved CSS definitions, more fine-grained content build script

1 files changed, 45 insertions, 31 deletions

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;
+      }
+    }
   }
 }