Add navigation header

1 files changed, 34 insertions, 16 deletions

diff --git a/css/main.scss b/css/main.scss
index 367f2d7..61787b5 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -6,6 +6,7 @@ $text-faint:     mix(hsl(210, 100%, 95%), $background, 40%);
 $text-plus:      #fff;
 $link-idle:      $text-plus;
 $link-visited:   $text;
+$border:         mix(hsl(210, 100%, 95%), $background, 16%);
 $sel-background: rgba($accent, .996);
 $sel-text:       #000;
 
@@ -30,22 +31,6 @@ body {
     color:            $text;
 }
 
-.wrap {
-    text-align: center;
-}
-
-.content {
-    display:     inline-block;
-    min-width:   50em;
-    min-width:   5ch + 80;
-    margin:      0;
-    padding:     2em 1em;
-    text-align:  left;
-    font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
-    font-size:   1 / 16 * 17em;
-    line-height: 1.5;
-}
-
 ::selection {
     color:            $sel-text;
     background-color: $sel-background;
@@ -65,6 +50,39 @@ body {
 //     }
 // }
 
+.header {
+    padding:       1em;
+    border-bottom: 1px solid $border;
+    font-family:   'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
+    font-size:     1 / 16 * 17em;
+    line-height:   1.1;
+    color:         $text-faint;
+}
+
+.header__uripart {
+    color: $text-minus;
+}
+
+.header__uripart--last {
+    color: $text-plus;
+}
+
+.wrap {
+    text-align: center;
+}
+
+.content {
+    display:     inline-block;
+    min-width:   50em;
+    min-width:   5ch + 80;
+    margin:      0;
+    padding:     2em 1em;
+    text-align:  left;
+    font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
+    font-size:   1 / 16 * 17em;
+    line-height: 1.5;
+}
+
 .link-type {
     color: $text-minus;
 }