2 files changed, 90 insertions, 2 deletions

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