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

4 files changed, 70 insertions, 44 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1c46660..77b59b9 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -10,13 +10,13 @@ $content--h1--font-size: $font-size + 1;
 $subcontent--indent: 4ch;
 
 $container--pad-h: 2rem;
-$container--pad-h-sm: 1rem;
+$container--pad-h--sm: 1rem;
 $container--pad-v: $line-height * 2rem;
-$container--pad-v-sm: $line-height * 1rem;
+$container--pad-v--sm: $line-height * 1rem;
 
 $nav--font-size: $font-size - 1;
 $nav--item--spacing: 4ch;
-$nav--item--spacing-sm: 3ch;
+$nav--item--spacing--sm: 3ch;
 $nav--item--pad-h: 1ch;
 $nav--item--pad-v: .9em;
 
@@ -24,6 +24,9 @@ $page--item-prefix--max-chars: 3ch;
 $page--item-prefix--pad: 2ch;
 $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
 
+$page--item-prefix--max-chars--sm: 2ch;
+$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
+
 $breakpoints: (
     xs: 380px,
     sm: 700px,
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 6d087ad..dc33d1e 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -50,7 +50,7 @@
 
     @media (max-width: map-get($breakpoints, 'sm')) {
         &__item {
-            margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
+            margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
         }
     }
 
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;
+        }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index f0544f7..e99c62f 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -14,12 +14,12 @@
     }
 
     @media (max-width: map-get($breakpoints, 'sm')) {
-        padding-right: $container--pad-h-sm;
-        padding-left: $container--pad-h-sm;
+        padding-right: $container--pad-h--sm;
+        padding-left: $container--pad-h--sm;
 
         &--pad-v {
-            padding-top: $container--pad-v-sm;
-            padding-bottom: $container--pad-v-sm;
+            padding-top: $container--pad-v--sm;
+            padding-bottom: $container--pad-v--sm;
         }
     }
 }