Improved CSS vars and scopes

7 files changed, 67 insertions, 43 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 560ec94..a8ed013 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -55,7 +55,7 @@ pre {
 }
 
 strong {
-    color: var(--fg-plus-2);
+    color: var(--fg-lo);
     font-weight: bold;
 }
 
@@ -75,7 +75,7 @@ li {
         position: absolute;
         width: $subcontent--indent;
         margin-left: -1 * $subcontent--indent;
-        color: var(--fg-minus);
+        color: var(--fg-hi);
     }
 }
 
@@ -142,20 +142,16 @@ p {
     }
 }
 
-:visited {
-    color: var(--link--visited--fg);
-}
-
 hr {
     height: 1px;
     margin: ($line-height * 2em) 0 ($line-height * 2em);
     border: 0;
-    background-color: var(--bg-plus);
+    background-color: var(--obj);
 }
 
 blockquote {
     position: relative;
     margin: ($line-height * 1em) 0 0;
     padding-left: calc(#{$subcontent--indent} - 2px);
-    border-left: 2px solid var(--bg-plus);
+    border-left: 2px solid var(--obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9cd4b24..2242f09 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -34,35 +34,45 @@ $breakpoints: (
     --gray2: hsl(270, 1%, 29%);
     --gray3: hsl(270, 2%, 54%);
     --gray4: hsl(270, 2%, 73%);
-    --gray5: hsl(270, 2%, 83%);
-    --gray6: hsl(270, 2%, 100%);
+    --gray5: hsl(270, 2%, 86%);
+    --gray5: hsl(270, 2%, 100%);
 
-    --bg-minus: var(--gray0);
-    --bg: var(--gray1);
-    --bg-plus: var(--gray2);
-    --fg-minus: var(--gray3);
-    --fg: var(--gray4);
-    --fg-plus: var(--gray5);
-    --fg-plus-2: var(--gray6);
+    //
 
-    --heading--fg: var(--fg-plus-2);
+    --bg-hi: var(--gray0); // Lighter background
+    --bg:    var(--gray1); // Background
+
+    --obj:   var(--gray2);
+
+    --fg-hi: var(--gray3); // Faint text
+    --fg:    var(--gray4); // Text
+    --fg-lo: var(--gray5); // Strong text
+
+    //
+
+    --heading--fg: var(--fg-lo);
 
     --select--bg: hsla(270, 2%, 100%, .996);
-    --select--fg: var(--bg-minus);
+    --select--fg: var(--bg-hi);
 
-    --code--fg: var(--fg-minus);
-    --code-block--fg: var(--fg-minus);
+    --code--fg: var(--fg-hi);
 
-    --page--item-prefix--fg: var(--fg-minus);
+    --code-block--fg: var(--fg-hi);
 
-    --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-lo);
+    --link--hover--bg: var(--link--idle--fg);
+    --link--hover--fg: #000;
 
-    --nav--bg: var(--bg-minus);
-    --nav--logo--fg: var(--fg-minus);
+    --nav--bg: var(--bg-hi);
+    --nav--logo--fg: var(--fg-hi);
     --nav--item--idle--fg: var(--fg);
-    --nav--item--hover--fg: var(--fg-plus-2);
-    --nav--item--active--fg: var(--fg-plus-2);
+    --nav--item--hover--fg: var(--fg-lo);
+    --nav--item--active--fg: var(--fg-lo);
+
+    --page--item-prefix--fg: var(--fg-hi);
+
+    --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
+    --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
+    --page--link--hover--bg: var(--page--link--idle--fg);
+    --page--link--hover--fg: #000;
 }
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index e15be1c..ee86daf 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -10,8 +10,8 @@
         height: $line-height;
         margin-top: px-to-em(2px);
         padding-top: px-to-em(2px);
-        border-top: 1px solid var(--fg-minus);
-        color: var(--fg-minus);
+        border-top: 1px solid var(--fg-hi);
+        color: var(--fg-hi);
         line-height: $code-block--line-height;
     }
 
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss
deleted file mode 100644
index 51524bd..0000000
--- a/assets/css/components/_refs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.c-refs__item {
-    padding-left: 0;
-
-    &::before {
-        display: none;
-    }
-}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index ba61b5f..6448d08 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -10,7 +10,7 @@
     h1,
     h2,
     h3,
-    .c-refs__item,
+    .s-refs li,
     pre {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -46,7 +46,7 @@
         content: '###';
     }
 
-    .c-refs__item::before {
+    .s-refs li::before {
         content: '->';
     }
 
@@ -65,6 +65,22 @@
         margin-left: -1 * $page--item-prefix--width;
     }
 
+    :link {
+        color: var(--page--link--idle--fg);
+    }
+
+    :visited {
+        color: var(--page--link--visited--fg);
+    }
+
+    :link,
+    :visited {
+        &:hover {
+            background-color: var(--page--link--hover--bg);
+            color: var(--page--link--hover--fg);
+        }
+    }
+
     .c-page-header {
         margin-left: -1 * $page--item-prefix--width;
         padding-left: $page--item-prefix--width;
@@ -82,7 +98,7 @@
         h1,
         h2,
         h3,
-        .c-refs__item,
+        .s-refs li,
         pre {
             margin-left: 0;
             padding-left: 0;
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
new file mode 100644
index 0000000..79434ff
--- /dev/null
+++ b/assets/css/scopes/_refs.scss
@@ -0,0 +1,9 @@
+.s-refs {
+    li {
+        padding-left: 0;
+
+        &::before {
+            display: none;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 0473689..8d9a87f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -2,12 +2,12 @@
 @import 'functions';
 @import 'basics';
 
-@import 'components/refs';
 @import 'components/nav';
 @import 'components/page-header';
 
 @import 'layouts/container';
 
+@import 'scopes/refs';
 @import 'scopes/page';
 
 @import 'utils';