Added header, improved SCSS structure, use metadata file instead of param, improved folder structure

1 files changed, 93 insertions, 0 deletions

diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
new file mode 100644
index 0000000..cf7673c
--- /dev/null
+++ b/assets/css/scopes/_page.scss
@@ -0,0 +1,93 @@
+.s-page {
+  padding-left: $page-item-prefix-width;
+
+  h1,
+  h2,
+  h3,
+  .c-refs__item,
+  pre {
+    position: relative;
+    margin-left: -1 * $page-item-prefix-width;
+    padding-left: $page-item-prefix-width;
+
+    &::before {
+      position: absolute;
+      box-sizing: border-box;
+      display: inline-block;
+      margin-left: -1 * $page-item-prefix-width;
+      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;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  h1::before {
+    content: "#";
+  }
+
+  h2::before {
+    content: "##";
+  }
+
+  h3::before {
+    content: "###";
+  }
+
+  .c-refs__item::before {
+    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);
+  }
+
+  hr {
+    margin-left: -1 * $page-item-prefix-width;
+  }
+
+  .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: $breakpoint-sm) {
+      margin-left: 0;
+      padding-left: 0;
+
+      &::after {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .c-nav {
+    margin-left: -1 * $page-item-prefix-width;
+
+    @media (max-width: $breakpoint-sm) {
+      margin-left: 0;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding-left: 0;
+  }
+}