Improved CSS classes for page content, added proper ref list macro, build scripts load and watch Pandoc filters automatically

6 files changed, 95 insertions, 119 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index e241d84..519a3a7 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -15,3 +15,7 @@
         }
     }
 }
+
+.u-mt0 {
+    margin-top: 0;
+}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index ee86daf..7cf2aa1 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -1,5 +1,7 @@
 .c-page-header {
     margin-bottom: $line-height * 2em;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
     overflow: hidden;
 
     &::after {
@@ -9,13 +11,19 @@
         z-index: -10;
         height: $line-height;
         margin-top: px-to-em(2px);
+        margin-left: -1 * $page--item-prefix--width;
         padding-top: px-to-em(2px);
         border-top: 1px solid var(--fg-hi);
         color: var(--fg-hi);
         line-height: $code-block--line-height;
     }
 
-    > :first-child {
-        margin-top: 0;
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        margin-left: 0;
+        padding-left: 0;
+
+        &::after {
+            margin-left: 0;
+        }
     }
 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
new file mode 100644
index 0000000..21969d7
--- /dev/null
+++ b/assets/css/components/_page.scss
@@ -0,0 +1,80 @@
+.c-page {
+    &__content {
+        padding-left: $page--item-prefix--width;
+
+        > :first-child {
+            margin-top: 0;
+        }
+    }
+
+    &__prefixed {
+        position: relative;
+        margin-left: -1 * $page--item-prefix--width;
+        padding-left: $page--item-prefix--width;
+
+        &::before {
+            display: inline-block;
+            position: absolute;
+            box-sizing: border-box;
+            width: $page--item-prefix--width;
+            margin-left: -1 * $page--item-prefix--width;
+            padding-right: $page--item-prefix--pad;
+            color: var(--page--item-prefix--fg);
+            font-weight: normal;
+            text-align: right;
+        }
+
+        &--h1 {
+            font-size: px-to-em($content--h1--font-size);
+
+            &::before {
+                content: '#';
+                font-size: px-to-em($font-size, $content--h1--font-size);
+            }
+        }
+
+        &--h2::before {
+            content: '##';
+        }
+
+        &--h3::before {
+            content: '###';
+        }
+
+        &--pre {
+            $scale-factor: $font-size / $code-block--font-size;
+
+            margin-top: $line-height * 1em;
+            // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
+            // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
+    
+            &::before {
+                content: str-repeat('``\A', 40);
+                height: 100%;
+                overflow: hidden;
+                color: var(--page--item-prefix--fg);
+                // font-size: px-to-em($font-size, $code-block--font-size);
+                // line-height: $code-block--line-height / $scale-factor;
+            }
+        }
+
+        &--ref::before {
+            content: '->';
+        }
+    }
+
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        &__content {
+            padding-left: 0;
+        }
+
+        &__prefixed {
+            margin-left: 0;
+            padding-left: 0;
+
+            &::before {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index 6448d08..bf3df8d 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,70 +1,4 @@
 .s-page {
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    .s-refs li,
-    pre {
-        position: relative;
-        margin-left: -1 * $page--item-prefix--width;
-        padding-left: $page--item-prefix--width;
-
-        &::before {
-            display: inline-block;
-            position: absolute;
-            box-sizing: border-box;
-            width: $page--item-prefix--width;
-            margin-left: -1 * $page--item-prefix--width;
-            padding-right: $page--item-prefix--pad;
-            color: var(--page--item-prefix--fg);
-            font-weight: normal;
-            text-align: right;
-        }
-    }
-
-    h1 {
-        font-size: px-to-em($content--h1--font-size);
-
-        &::before {
-            content: '#';
-            font-size: px-to-em($font-size, $content--h1--font-size);
-        }
-    }
-
-    h2::before {
-        content: '##';
-    }
-
-    h3::before {
-        content: '###';
-    }
-
-    .s-refs li::before {
-        content: '->';
-    }
-
-    pre {
-        margin-top: $line-height * 1em;
-
-        &::before {
-            content: str-repeat('``\A', 40);
-            height: 100%;
-            overflow: hidden;
-            color: var(--page--item-prefix--fg);
-        }
-    }
-
-    hr {
-        margin-left: -1 * $page--item-prefix--width;
-    }
-
     :link {
         color: var(--page--link--idle--fg);
     }
@@ -80,45 +14,4 @@
             color: var(--page--link--hover--fg);
         }
     }
-
-    .c-page-header {
-        margin-left: -1 * $page--item-prefix--width;
-        padding-left: $page--item-prefix--width;
-
-        &::after {
-            margin-left: -1 * $page--item-prefix--width;
-        }
-    }
-
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__content {
-            padding-left: 0;
-        }
-
-        h1,
-        h2,
-        h3,
-        .s-refs li,
-        pre {
-            margin-left: 0;
-            padding-left: 0;
-
-            &::before {
-                display: none;
-            }
-        }
-
-        hr {
-            margin-left: 0;
-        }
-
-        .c-page-header {
-            margin-left: 0;
-            padding-left: 0;
-
-            &::after {
-                margin-left: 0;
-            }
-        }
-    }
 }
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
deleted file mode 100644
index 79434ff..0000000
--- a/assets/css/scopes/_refs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.s-refs {
-    li {
-        padding-left: 0;
-
-        &::before {
-            display: none;
-        }
-    }
-}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 90c1bfc..7986bd9 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -5,11 +5,11 @@
 @import 'components/spacer';
 @import 'components/hlist';
 @import 'components/nav';
+@import 'components/page';
 @import 'components/page-header';
 
 @import 'layouts/container';
 
-@import 'scopes/refs';
 @import 'scopes/page';
 
 @import 'utils';