From cc3696f77d8aa9cb1cc8d7ad79330eed2a69788e Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Mon, 20 Apr 2020 17:03:18 +0000
Subject: [PATCH] add header styles

---
 src/css/imports/header.scss | 75 +++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/css/imports/header.scss

diff --git a/src/css/imports/header.scss b/src/css/imports/header.scss
new file mode 100644
index 0000000..ffce01c
--- /dev/null
+++ b/src/css/imports/header.scss
@@ -0,0 +1,75 @@
+.header-bg {
+  opacity: 0.6;
+}
+
+.header {
+  z-index: $z-index__header;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+.nav__item {
+  margin: 0;
+}
+
+.nav__link {
+  display: block;
+  padding: 0.6em 1.5em;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.site-nav {
+  &__menu-btn {
+    @media (max-width: $bp-s) {
+      margin: 0;
+      padding: 6px 0 6px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__nav-list {
+    @media (max-width: $bp-s) {
+      position: fixed;
+      top: 4rem;
+      bottom: 2rem;
+      left: 2rem;
+      right: 2rem;
+
+      background-color: rgba(pink, 0.5);
+    }
+  }
+}
+
+.menu-text {
+  margin-right: 0.5rem;
+}
+
+.menu-icon {
+  display: block;
+  height: 1.1em;
+  width: 1.1em;
+
+  border-radius: 3px;
+  background-color: pink;
+  opacity: 0.5;
+}
+