Added section link to the header in regular pages, improved template structure, improved CSS variable names, keep prefix for specific page items on mobile

1 files changed, 59 insertions, 36 deletions

diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index a55bcb4..435d696 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,34 +1,4 @@
 .c-page {
-    &__header {
-        margin-bottom: $line-height * 1em;
-
-        &::after {
-            content: '--';
-            display: block;
-            margin-bottom: $line-height * -1em;
-            color: var(--fg-hi);
-            line-height: 2 * $line-height;
-        }
-
-        &__title {
-            margin-top: 0;
-        }
-
-        &__meta {
-            margin-top: 0;
-            color: var(--fg-hi);
-            font-weight: normal;
-        }
-    }
-
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
     &__prefixed {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -92,22 +62,75 @@
         }
 
         &--ref::before {
-            content: '->';
+            content: '|>';
+        }
+
+        &--backref::before {
+            content: '<|';
         }
     }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__content {
-            padding-left: 0;
+    &__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: 0;
+            padding-left: $page--item-prefix--width--sm;
 
             &::before {
-                display: none;
+                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;
+        }
     }
 }