1 files changed, 80 insertions, 0 deletions

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