WIP: Redesign

1 files changed, 2 insertions, 132 deletions

diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 9d1e991..ef39061 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,133 +1,3 @@
-.c-page {
-    &__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-family: $font-fam--mono;
-            font-weight: normal;
-            text-align: right;
-        }
-
-        $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size);
-
-        &--h1 {
-            margin-top: $line-height * $h1-unscale-factor;
-            font-size: px-to-em($content--h1--font-size);
-
-            &::before {
-                content: '#';
-                font-size: $h1-unscale-factor;
-            }
-        }
-
-        &--h2::before {
-            content: '##';
-        }
-
-        &--h3::before {
-            content: '###';
-        }
-
-        &--pre {
-            $scale-factor: $font-size / $code-block--font-size;
-
-            margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
-            padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
-            border-left: 0;
-            color: var(--code-block--fg);
-            font-size: $code-block--font-size;
-            line-height: $code-block--line-height;
-            text-overflow: '';
-    
-            &::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: '|>';
-        }
-
-        &--backref::before {
-            content: '<|';
-        }
-    }
-
-    &__header {
-        margin-bottom: $line-height * 1em;
-
-        &__title {
-            margin-top: 0;
-        }
-
-        &__backlink__link {
-            &:link,
-            &:visited {
-                color: var(--fg-hi);
-
-                &:hover {
-                    color: var(--link--hover--fg);
-                }
-            }
-        }
-
-        &__backlink + &__title {
-            margin-top: $line-height * 1em;
-        }
-
-        &__meta {
-            margin-top: 0;
-            color: var(--fg-hi);
-            font-weight: normal;
-        }
-    }
-
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__prefixed {
-            margin-left: 0;
-            padding-left: $page--item-prefix--width--sm;
-
-            &::before {
-                width: $page--item-prefix--width--sm;
-                margin-left: -1 * $page--item-prefix--width--sm;
-            }
-
-            &--h1,
-            &--h2,
-            &--h3,
-            &--pre {
-                padding-left: 0;
-
-                &::before {
-                    display: none;
-                }
-            }
-        }
-
-        &__content {
-            padding-left: 0;
-        }
-    }
+@include component('page') {
+    //
 }