Improved CSS vars and scopes

11 files changed, 79 insertions, 51 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';
diff --git a/content/index.md b/content/index.md
index dd058d8..f9111ef 100644
--- a/content/index.md
+++ b/content/index.md
@@ -4,13 +4,13 @@ title: Home
 
 # Volpeon's Den
 
-Welcome to my website! I'm Volpeon and here's an [inline link](#).
+Welcome to my website! I'm Volpeon and here's an [inline link](#c).
 
 > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
 > dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
 > clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
-Welcome to my website! I'm Volpeon and here's an [inline link](#).
+Welcome to my website! I'm Volpeon and here's an [inline link](#d).
 
 ## Subtitle
 
@@ -22,7 +22,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#).
 1. Lorem ipsum dolor sit amet
 2. Another item
 
-<ul>
-    <li class="c-refs__item"><a href="#">Lorem ipsum dolor sit amet</a></li>
-    <li class="c-refs__item"><a href="#">Another item</a></li>
-</ul>
+::: { .s-refs }
+- [Lorem ipsum dolor sit amet](#a)
+- [Another item](#b)
+:::
diff --git a/filters/links_to_refs.lua b/filters/links_to_refs.lua
new file mode 100644
index 0000000..f19a0f9
--- /dev/null
+++ b/filters/links_to_refs.lua
@@ -0,0 +1,3 @@
+function Link (el)
+    return { pandoc.Span(el.content), pandoc.Note { pandoc.Plain(pandoc.Link(el.content, el.target, el.title)) } }
+end
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index e3b97ea..feb3c0d 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -137,6 +137,7 @@ handle () {
             --metadata "is$section" \
             --metadata-file metadata/metadata.yaml \
             --metadata-file "$subpages_meta_file"
+            # --lua-filter "filters/add_refs.lua"
 
         rm "$subpages_meta_file"
     else
diff --git a/templates/pagelistByYear.html b/templates/pagelistByYear.html
index 8270530..758d45b 100644
--- a/templates/pagelistByYear.html
+++ b/templates/pagelistByYear.html
@@ -1,9 +1,9 @@
 $for(pages)$
     $for(it.by_year/pairs)$
         <h2>$it.key$</h2>
-        <ul class="c-refs">
+        <ul class="s-refs">
             $for(it.value)$
-            <li class="c-refs__item">
+            <li>
                 <a href="$it.url_rel$">$it.date$ - $it.title$</a>
             </li>
             $endfor$