Improved CSS variable names, improved script variable names, added initial support for finding child pages

6 files changed, 80 insertions, 81 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index da971d4..9505cdd 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -13,8 +13,8 @@
 }
 
 ::selection {
-  color: var(--select-fg);
-  background-color: var(--select-bg);
+  color: var(--select--fg);
+  background-color: var(--select--bg);
 }
 
 html,
@@ -38,14 +38,14 @@ body {
 }
 
 code {
-  color: var(--code-fg);
+  color: var(--code--fg);
 }
 
 pre {
   margin: 0;
-  color: var(--code-block-fg);
-  font-size: $code-block-font-size;
-  line-height: $code-block-line-height;
+  color: var(--code-block--fg);
+  font-size: $code-block--font-size;
+  line-height: $code-block--line-height;
   text-overflow: "";
   overflow: hidden;
 
@@ -68,13 +68,13 @@ ol {
 
 li {
   position: relative;
-  padding-left: $subcontent-indent;
+  padding-left: $subcontent--indent;
 
   &::before {
     position: absolute;
     display: inline-block;
-    width: $subcontent-indent;
-    margin-left: -1 * $subcontent-indent;
+    width: $subcontent--indent;
+    margin-left: -1 * $subcontent--indent;
     color: var(--fg-minus);
   }
 }
@@ -110,12 +110,12 @@ h3 {
 h1 {
   text-transform: uppercase;
   font-size: 1em;
-  color: var(--heading-fg);
+  color: var(--heading--fg);
 }
 
 h2 {
   font-size: 1em;
-  color: var(--heading-fg);
+  color: var(--heading--fg);
 }
 
 h3 {
@@ -133,17 +133,17 @@ p {
   z-index: 1000;
   padding: 0.2em 0.3em;
   margin: 0 -0.3em;
-  color: var(--link-idle-fg);
+  color: var(--link--idle--fg);
 
   &:hover {
-    background-color: var(--link-hover-bg);
-    color: var(--link-hover-fg);
+    background-color: var(--link--hover--bg);
+    color: var(--link--hover--fg);
     text-decoration: none;
   }
 }
 
 :visited {
-  color: var(--link-visited-fg);
+  color: var(--link--visited--fg);
 }
 
 hr {
@@ -156,6 +156,6 @@ hr {
 blockquote {
   position: relative;
   margin: ($line-height * 1em) 0 0;
-  padding-left: calc(#{$subcontent-indent} - 2px);
+  padding-left: calc(#{$subcontent--indent} - 2px);
   border-left: 2px solid var(--bg-plus);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index c061f4f..96e56c6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,27 +1,27 @@
 $font-size: 17px;
-$nav-font-size: $font-size - 1;
-$code-block-font-size: $font-size - 1;
-$content-h1-font-size: $font-size + 1;
-
 $line-height: 1.5;
-$code-block-line-height: 1.4;
 
-$content-width: 80ch;
+$code-block--font-size: $font-size - 1;
+$code-block--line-height: 1.4;
+
+$content--width: 80ch;
+$content--h1--font-size: $font-size + 1;
 
-$container-pad-h: 2rem;
-$container-pad-h-sm: 1rem;
-$container-pad-v: $line-height * 2rem;
+$subcontent--indent: 4ch;
 
-$nav-item-spacing: 4ch;
-$nav-item-spacing-sm: 3ch;
-$nav-item-pad-h: 1ch;
-$nav-item-pad-v: 1em;
+$container--pad-h: 2rem;
+$container--pad-h-sm: 1rem;
+$container--pad-v: $line-height * 2rem;
 
-$page-item-prefix-max-chars: 3ch;
-$page-item-prefix-pad: 2ch;
-$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
+$nav--font-size: $font-size - 1;
+$nav--item--spacing: 4ch;
+$nav--item--spacing-sm: 3ch;
+$nav--item--pad-h: 1ch;
+$nav--item--pad-v: 1em;
 
-$subcontent-indent: 4ch;
+$page--item-prefix--max-chars: 3ch;
+$page--item-prefix--pad: 2ch;
+$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
 
 $breakpoints: (
   xs: 380px,
@@ -45,24 +45,24 @@ $breakpoints: (
   --fg-plus: var(--gray5);
   --fg-plus-2: var(--gray6);
 
-  --heading-fg: var(--fg-plus-2);
+  --heading--fg: var(--fg-plus-2);
 
-  --select-bg: hsla(270, 2%, 100%, 0.996);
-  --select-fg: var(--bg-minus);
+  --select--bg: hsla(270, 2%, 100%, 0.996);
+  --select--fg: var(--bg-minus);
 
-  --code-fg: var(--fg-minus);
-  --code-block-fg: var(--fg-minus);
+  --code--fg: var(--fg-minus);
+  --code-block--fg: var(--fg-minus);
 
-  --page-item-prefix-fg: var(--fg-minus);
+  --page--item-prefix--fg: var(--fg-minus);
 
-  --link-idle-fg: var(--fg-plus-2); //#90acf2;
-  --link-visited-fg: var(--fg-plus); //#bc9df2;
-  --link-hover-bg: var(--fg-plus-2);
-  --link-hover-fg: var(--bg-minus);
+  --link--idle--fg: var(--fg-plus-2); //#90acf2;
+  --link--visited--fg: var(--fg-plus); //#bc9df2;
+  --link--hover--bg: var(--fg-plus-2);
+  --link--hover--fg: var(--bg-minus);
 
-  --nav-bg: var(--bg-minus);
-  --nav-logo-fg: var(--fg-minus);
-  --nav-item-idle-fg: var(--fg);
-  --nav-item-hover-fg: var(--fg-plus-2);
-  --nav-item-active-fg: var(--fg-plus-2);
+  --nav--bg: var(--bg-minus);
+  --nav--logo--fg: var(--fg-minus);
+  --nav--item--idle--fg: var(--fg);
+  --nav--item--hover--fg: var(--fg-plus-2);
+  --nav--item--active--fg: var(--fg-plus-2);
 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 7f5eb19..a3f7004 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,6 +1,6 @@
 .c-nav {
-  background-color: var(--nav-bg);
-  font-size: $nav-font-size;
+  background-color: var(--nav--bg);
+  font-size: $nav--font-size;
 
   &__items {
     display: flex;
@@ -10,15 +10,15 @@
   &__logo {
     display: inline-block;
     margin: 0;
-    padding: $nav-item-pad-v 0;
-    color: var(--nav-logo-fg);
+    padding: $nav--item--pad-v 0;
+    color: var(--nav--logo--fg);
     text-decoration: none;
 
     &:link,
     &:visited {
       &:hover {
         background-color: transparent;
-        color: var(--nav-item-hover-fg);
+        color: var(--nav--item--hover--fg);
         font-weight: bold;
       }
     }
@@ -26,22 +26,22 @@
 
   &__item {
     display: inline-block;
-    padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px);
-    margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h);
-    color: var(--nav-item-idle-fg);
+    padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
+    margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
+    color: var(--nav--item--idle--fg);
     text-decoration: none;
     border-bottom: 2px solid transparent;
 
     &:hover {
       background-color: transparent;
-      color: var(--nav-item-hover-fg);
+      color: var(--nav--item--hover--fg);
       font-weight: bold;
     }
   }
 
   @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-header.scss b/assets/css/components/_page-header.scss
index ada20ab..dd273df 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -12,6 +12,6 @@
     padding-top: px-to-em(2px);
     color: var(--fg-minus);
     border-top: 1px solid var(--fg-minus);
-    line-height: $code-block-line-height;
+    line-height: $code-block--line-height;
   }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 7f6e292..eb71070 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,20 +1,20 @@
 .l-container {
-  padding-left: $container-pad-h;
-  padding-right: $container-pad-h;
+  padding-left: $container--pad-h;
+  padding-right: $container--pad-h;
 
   &--content {
     margin-left: auto;
     margin-right: auto;
-    max-width: $content-width;
+    max-width: $content--width;
   }
 
   &--pad-v {
-    padding-top: $container-pad-v;
-    padding-bottom: $container-pad-v;
+    padding-top: $container--pad-v;
+    padding-bottom: $container--pad-v;
   }
 
   @media (max-width: map-get($breakpoints, "sm")) {
-    padding-left: $container-pad-h-sm;
-    padding-right: $container-pad-h-sm;
+    padding-left: $container--pad-h-sm;
+    padding-right: $container--pad-h-sm;
   }
 }
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index cdbdeb4..7c9e2d4 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,6 +1,6 @@
 .s-page {
   &__content {
-    padding-left: $page-item-prefix-width;
+    padding-left: $page--item-prefix--width;
 
     > :first-child {
       margin-top: 0;
@@ -13,28 +13,28 @@
   .c-refs__item,
   pre {
     position: relative;
-    margin-left: -1 * $page-item-prefix-width;
-    padding-left: $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
 
     &::before {
       position: absolute;
       box-sizing: border-box;
       display: inline-block;
-      margin-left: -1 * $page-item-prefix-width;
-      padding-right: $page-item-prefix-pad;
-      width: $page-item-prefix-width;
-      color: var(--page-item-prefix-fg);
+      margin-left: -1 * $page--item-prefix--width;
+      padding-right: $page--item-prefix--pad;
+      width: $page--item-prefix--width;
+      color: var(--page--item-prefix--fg);
       font-weight: normal;
       text-align: right;
     }
   }
 
   h1 {
-    font-size: px-to-em($content-h1-font-size);
+    font-size: px-to-em($content--h1--font-size);
 
     &::before {
       content: "#";
-      font-size: px-to-em($font-size, $content-h1-font-size);
+      font-size: px-to-em($font-size, $content--h1--font-size);
     }
   }
 
@@ -54,22 +54,21 @@
     &::before {
       content: str-repeat("``\A", 40);
       height: 100%;
-      color: var(--page-item-prefix-fg);
+      color: var(--page--item-prefix--fg);
       overflow: hidden;
-      line-height: $code-block-line-height;
     }
   }
 
   hr {
-    margin-left: -1 * $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
   }
 
   .c-page-header {
-    margin-left: -1 * $page-item-prefix-width;
-    padding-left: $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
 
     &::after {
-      margin-left: -1 * $page-item-prefix-width;
+      margin-left: -1 * $page--item-prefix--width;
     }
   }