Various improvements: CSS classes, favicon, design

13 files changed, 114 insertions, 46 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3adf64c..dd394da 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -33,17 +33,8 @@ html {
 }
 
 body {
-  margin: 2em;
+  margin: 0;
   padding: 0;
-
-  @media (max-width: $breakpoint-sm) {
-    margin: 1em;
-  }
-}
-
-main {
-  max-width: 70ch;
-  margin: 0 auto;
 }
 
 code {
@@ -62,7 +53,7 @@ pre {
 }
 
 strong {
-  color: var(--fg-plus);
+  color: var(--fg-plus-2);
   font-weight: bold;
 }
 
@@ -117,12 +108,12 @@ h3 {
 h1 {
   text-transform: uppercase;
   font-size: px-to-em($heading-font-size);
-  color: var(--heading);
+  color: var(--heading-fg);
 }
 
 h2 {
   font-size: 1em;
-  color: var(--heading);
+  color: var(--heading-fg);
 }
 
 h3 {
@@ -138,7 +129,7 @@ p {
 :visited {
   position: relative;
   z-index: 1000;
-  padding: 0.1em 0.3em;
+  padding: 0.2em 0.3em;
   margin: 0 -0.3em;
   color: var(--link-idle-fg);
 
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index a29ad6d..4883605 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -4,6 +4,8 @@ $code-block-font-size: $font-size;
 $line-height: 1.5;
 $code-block-line-height: 1.4;
 
+$content-width: 75ch;
+
 $page-item-prefix-max-chars: 3ch;
 $page-item-prefix-pad: 2ch;
 $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
@@ -13,31 +15,40 @@ $subcontent-indent: 4ch;
 $breakpoint-sm: 700px;
 
 :root {
-  --gray1: hsl(270, 0%, 9.7%);
+  --gray0: hsl(270, 0%, 7%);
+  --gray1: hsl(270, 0%, 10%);
   --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%);
 
+  --bg-minus: var(--gray0);
   --bg: var(--gray1);
   --bg-plus: var(--gray2);
   --fg-minus: var(--gray3);
   --fg: var(--gray4);
-  --fg-plus: var(--gray6);
+  --fg-plus: var(--gray5);
+  --fg-plus-2: var(--gray6);
+
+  --heading-fg: var(--fg-plus-2);
 
   --select-bg: hsla(270, 2%, 100%, 0.996);
-  --select-fg: var(--gray1);
+  --select-fg: var(--bg-minus);
 
   --code-fg: var(--fg-minus);
   --code-block-fg: var(--fg-minus);
 
   --page-item-prefix-fg: var(--fg-minus);
 
-  --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
-  --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
-  --link-hover-bg: var(--gray6);
-  --link-hover-fg: var(--gray1);
+  --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6);
+  --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5);
+  --link-hover-bg: var(--fg-plus-2);
+  --link-hover-fg: var(--bg-minus);
 
-  --heading: var(--fg-plus);
+  --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 1fc24f9..d86a484 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,14 +1,36 @@
 .c-nav {
-    margin-bottom: $line-height * 2rem;
+    background-color: var(--nav-bg);
+    //border-bottom: 1px solid var(--bg-plus);
 
-    &::before {
-        content: "//\\";
-        color: var(--page-item-prefix-fg);
+    &__items {
+        display: flex;
+        align-items: baseline;
+    }
+
+    &__logo {
+        display: inline-block;
+        color: var(--nav-logo-fg);
+        text-decoration: none;
+
+        &:link:hover {
+            background-color: transparent;
+            color: var(--nav-item-hover-fg);
+            font-weight: bold;
+        }
     }
 
     &__item {
-        margin-left: 2ch;
-        color: var(--fg);
+        display: inline-block;
+        padding: 1rem 1ch calc(1rem - 2px);
+        margin: 0 -1ch 0 3ch;
+        color: var(--nav-item-idle-fg);
         text-decoration: none;
+        border-bottom: 2px solid transparent;
+
+        &:hover {
+            background-color: transparent;
+            color: var(--nav-item-hover-fg);
+            font-weight: bold;
+        }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..9159f5a
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,20 @@
+.l-container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    &--narrow {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: $content-width;
+    }
+
+    &--pad-v {
+        padding-top: $line-height * 2rem;
+        padding-bottom: $line-height * 2rem;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index cf7673c..4a97b79 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,6 +1,10 @@
 .s-page {
   padding-left: $page-item-prefix-width;
 
+  > :first-child {
+    margin-top: 0;
+  }
+
   h1,
   h2,
   h3,
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 7383ac4..2ca4cd4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -6,6 +6,8 @@
 @import "components/nav";
 @import "components/page-header";
 
+@import "layouts/container";
+
 @import "scopes/page";
 
 @import "utils";
diff --git a/content/favicon.ico b/content/favicon.ico
index 39895e5..b1b98ec 100644
--- a/content/favicon.ico
+++ b/content/favicon.ico
diff --git a/content/index.md b/content/index.md
index 64c3e77..403eab5 100644
--- a/content/index.md
+++ b/content/index.md
@@ -2,7 +2,7 @@
 id: "home"
 title: "Home"
 
-ismain: true
+isHome: true
 ---
 
 # Volpeon's Den
diff --git a/content/projects/index.md b/content/projects/index.md
new file mode 100644
index 0000000..bc6204f
--- /dev/null
+++ b/content/projects/index.md
@@ -0,0 +1,6 @@
+---
+id: "projects"
+title: "Projects"
+---
+
+# Projects
diff --git a/metadata/metadata.json b/metadata/metadata.json
index dce6192..b53ac32 100644
--- a/metadata/metadata.json
+++ b/metadata/metadata.json
@@ -1,5 +1,8 @@
 {
-    "sitetitle": "Volpeon's Den",
+    "site": {
+        "title": "Volpeon's Den",
+        "logo": "\\\\\\\\/"
+    },
     "menus": {
         "main": [
             {
@@ -10,7 +13,12 @@
             {
                 "id": "blog",
                 "label": "Blog",
-                "url": "/blog"
+                "url": "/blog/"
+            },
+            {
+                "id": "projects",
+                "label": "Projects",
+                "url": "/projects/"
             }
         ]
     }
diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh
index 8c795ec..11c01db 100755
--- a/scripts/build_fonts.sh
+++ b/scripts/build_fonts.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-echo "[COMPILE] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
+echo "[MINIFY ] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
 
 pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
     --text-file='assets/fonts/glyphs.txt' \
@@ -8,7 +8,7 @@ pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
     --flavor='woff2' \
     --output-file='output/iosevka-term-ss09-regular.woff2'
 
-echo "[COMPILE] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
+echo "[MINIFY ] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
 
 pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \
     --text-file='assets/fonts/glyphs.txt' \
diff --git a/templates/base.html b/templates/base.html
index cc05840..96dd4ff 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,38 +15,42 @@
     $if(keywords)$
     <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
     $endif$
-    <title>$if(ismain)$$else$$title$ – $endif$$sitetitle$</title>
+    <title>$if(isHome)$$else$$title$ – $endif$$site.title$</title>
     <link rel="stylesheet" href="/style.css" />
     $if(id)$
     <style>
         .c-nav__item--$id$ {
             font-weight: bold;
-            color: var(--fg-plus);
+            color: var(--nav-item-active-fg);
+            border-bottom-color: var(--nav-item-active-fg);
         }
     </style>
     $endif$
 </head>
 
 <body>
-    <main class="s-page">
-        <nav class="c-nav">
+    <nav class="c-nav">
+        <div class="c-nav__items l-container">
+            <span class="c-nav__logo">$site.logo$</span>
             $for(menus.main)$
             <a class="c-nav__item c-nav__item--$it.id$" href="$it.url$">$it.label$</a>
             $endfor$
-        </nav>
+        </div>
+    </nav>
         
-        <header class="c-page-header" role="presentation">
-            $if(ismain)$
+    <main class="l-container l-container--narrow l-container--pad-v">
+        <div class="s-page">
+            $if(isHome)$
+                <header class="c-page-header" role="presentation">
 ${pageHeader()}
-            $else$
-${pageHeaderSm()}
+                </header>
             $endif$
-        </header>
 
-        $body$
+            $body$
+        </div>
     </main>
 
-    $if(ismain)$
+    $if(isHome)$
     <template id="header-sm">
 ${pageHeaderSm()}
     </template>
diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html
index 9386b8c..e673a73 100644
--- a/templates/pageHeaderSm.html
+++ b/templates/pageHeaderSm.html
@@ -4,7 +4,7 @@
  '|    .´  ,~'\ ).,__,)/,,"         ' . '     |  | |          '  .' 
   |_   `~´   (/\\,   (/\\,         _'   '_   _| '  |_        _'   '_
 -->
-<pre class="$if(ismain)$u-hidden@sm-up$endif$">
+<pre class="$if(isHome)$u-hidden@sm-up$endif$">
  .|    <strong>                  //\__</strong>      '  .'     |  . |          ' . ' 
   |    <strong>   _.~-"""-----~``  ,-´</strong>      '   '     |'   |          '   ' 
  '|    <strong>.´  ,~'\ ).,__,)/,,"   </strong>      ' . '     |  | |          '  .'