From 0490fbdd6e865f9d4cc743f47ab104d4944cc183 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Thu, 2 Apr 2020 19:44:04 +0000
Subject: [PATCH] add styling for mobile navigation menu

---
 site/layouts/partials/header.html |  8 +++---
 src/css/main.css                  | 41 +++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 4d0dcf9..eca40fb 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,13 +1,13 @@
 <header class="header">
   <div class="l-underlay body-bg header-bg"></div>
   <div class="l-wrapper">
-    <nav class="nav">
-      <ul class="l-flex-list-row">
+    <nav class="nav site-nav">
+      <ul class="l-flex-list-row site-nav__title">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
-      <label class="c-menu-toggle" for="menu-toggle">Menu</label>
+      <label class="c-menu-toggle site-nav__menu-btn" for="menu-toggle"><span class="site-nav__menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
       <input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
-      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-menu">
+      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-nav__nav-list">
         <li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
         <li><a class="nav__link nav-link" href="#about">About</a></li>
         <li><a class="nav__link nav-link" href="#services">Services</a></li>
diff --git a/src/css/main.css b/src/css/main.css
index 9d8dc77..42d190d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -65,6 +65,47 @@ html.is-animating .transition-fade {
   }
 }
 
+.site-nav {
+  &__title {
+  }
+
+  &__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: #fff;
+    }
+  }
+}
+
+.menu-text {
+  margin-right: 0.5rem;
+}
+
+.menu-icon {
+  display: block;
+  height: 1.1em;
+  width: 1.1em;
+
+  border-radius: 3px;
+  background-color: blue;
+  opacity: 0.5;
+}
+
 // footer
 
 .footer {