From 94e30b971e93669810d8a4889d60340900ad60f3 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 24 Dec 2020 22:07:49 +0100
Subject: Various improvements: CSS classes, favicon, design

---
 assets/css/_basics.scss            | 19 +++++--------------
 assets/css/_vars.scss              | 27 +++++++++++++++++++--------
 assets/css/components/_nav.scss    | 34 ++++++++++++++++++++++++++++------
 assets/css/layouts/_container.scss | 20 ++++++++++++++++++++
 assets/css/scopes/_page.scss       |  4 ++++
 assets/css/style.scss              |  2 ++
 6 files changed, 78 insertions(+), 28 deletions(-)
 create mode 100644 assets/css/layouts/_container.scss

(limited to 'assets/css')

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";
-- 
cgit v1.2.3-70-g09d2