From 3c0139a2e7bbb7138c0837bfe62ff87892c31812 Mon Sep 17 00:00:00 2001
From: Matt Gaunt <matt@gauntface.co.uk>
Date: Thu, 13 Jul 2017 09:15:52 -0700
Subject: [PATCH] Adding logo to navigation

---
 src/styles/examples-index.css                 |  2 +-
 src/styles/index.css                          |  2 +-
 .../images/workbox-logo-white-small.min.svg   |  1 +
 .../_includes/components/navigation.html      | 10 +++-
 src/themes/styles/components/callout.css      |  2 +-
 src/themes/styles/components/footer.css       |  2 +-
 src/themes/styles/components/navigation.css   | 49 ++++++++++++++-----
 src/themes/styles/components/page-header.css  |  2 +-
 .../styles/components/primary-header.css      |  2 +-
 src/themes/styles/main.css                    |  2 +-
 10 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 src/themes/images/workbox-logo-white-small.min.svg

diff --git a/src/styles/examples-index.css b/src/styles/examples-index.css
index fde53b6..08ee3fd 100644
--- a/src/styles/examples-index.css
+++ b/src/styles/examples-index.css
@@ -44,7 +44,7 @@
   border-color: var(--btn-bg-color);
 }
 
-@media (max-width: 700px) {
+@media (max-width: 780px) {
   #content-and-messages {
     flex-direction: column;
   }
diff --git a/src/styles/index.css b/src/styles/index.css
index f7c7b23..66f722f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -99,7 +99,7 @@
   margin-left: calc(-2 * var(--horizontal-spacing));
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   .index__install-options {
     flex-direction: row;
   }
diff --git a/src/themes/images/workbox-logo-white-small.min.svg b/src/themes/images/workbox-logo-white-small.min.svg
new file mode 100644
index 0000000..bfe28af
--- /dev/null
+++ b/src/themes/images/workbox-logo-white-small.min.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 173.2 149">&gt;<path fill="#fff" d="M23.6 23.2l-1 81.3-6.5-2-.5-75.5L0 34.5v80L71.7 149V0L50.9 10l-.8 102.5-7.9-2.4-.4-95.6z" class="st0"/><g fill="#f57c00"><path d="M80.7 2.8v66.8l92.5 1.6V31.3L80.7 2.8zm20.7 33l56.7 10.9v6.4l-56.7-7V35.8zM80.7 79.4v66.9l92.5-28.6V77.8l-92.5 1.6zm20.7 23l56.7-6.6v6.4l-56.7 10.5v-10.3z" class="st1"/></g></svg>
\ No newline at end of file
diff --git a/src/themes/jekyll/_includes/components/navigation.html b/src/themes/jekyll/_includes/components/navigation.html
index d4e0466..e536900 100644
--- a/src/themes/jekyll/_includes/components/navigation.html
+++ b/src/themes/jekyll/_includes/components/navigation.html
@@ -10,8 +10,14 @@
 
   <nav class="navigation-links content-sizing js-nav-drawer">
       <!-- Logo Header at Top of Nav Drawer -->
-      <section class="nav-drawer-header">
-        <img class="nav-drawer-header__logo" src="{{ site.theme_location }}/themes/images/workbox-logo-grey-small.min.svg" alt="Small Workbox Logo" />
+      <section class="nav-drawer-header-desktop">
+        <a class="nav-drawer-header-desktop__link" href="/">
+          <img class="nav-drawer-header-desktop__logo" src="{{ site.theme_location }}/themes/images/workbox-logo-white-small.min.svg" alt="Small Workbox Logo" />
+        </a>
+      </section>
+
+      <section class="nav-drawer-header-mobile">
+        <img class="nav-drawer-header-mobile__logo" src="{{ site.theme_location }}/themes/images/workbox-logo-grey-small.min.svg" alt="Small Workbox Logo" />
 
         <button class="svg-btn navigation-close-btn js-menu-close-btn" aria-label="Close Menu">
           <svg height="30" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/themes/styles/components/callout.css b/src/themes/styles/components/callout.css
index fb962c7..0a6884d 100644
--- a/src/themes/styles/components/callout.css
+++ b/src/themes/styles/components/callout.css
@@ -26,7 +26,7 @@
   color: white;
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   .callout {
     padding: calc(var(--vertical-spacing) * 9) calc(var(--horizontal-spacing) * 4);
   }
diff --git a/src/themes/styles/components/footer.css b/src/themes/styles/components/footer.css
index 2cfbba2..c2dc61d 100644
--- a/src/themes/styles/components/footer.css
+++ b/src/themes/styles/components/footer.css
@@ -50,7 +50,7 @@ footer {
   max-height: calc(var(--vertical-spacing) * 7);
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   .footer__inner-section {
     flex-direction: row;
   }
diff --git a/src/themes/styles/components/navigation.css b/src/themes/styles/components/navigation.css
index b32f826..130b663 100644
--- a/src/themes/styles/components/navigation.css
+++ b/src/themes/styles/components/navigation.css
@@ -3,9 +3,10 @@
 @import "../variables/z-index.css";
 
 :root {
-  --top-level-horizontal-padding: calc(var(--horizontal-spacing) * 2);
+  --top-level-horizontal-padding-mobile: 0;
+  --top-level-horizontal-padding-desktop: calc(var(--horizontal-spacing) * 2);
   --top-level-vertical-padding: calc(var(--horizontal-spacing) * 2);
-  --nested-horizontal-padding: calc(var(--horizontal-spacing) * 3);
+  --nested-horizontal-padding: calc(var(--horizontal-spacing) * 2);
 }
 
 .navigation-container {
@@ -29,7 +30,11 @@
   fill: var(--menu-close-btn-color);
 }
 
-.nav-drawer-header {
+.nav-drawer-header-desktop {
+  display: none;
+}
+
+.nav-drawer-header-mobile {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -37,10 +42,10 @@
   border-bottom: solid;
   border-bottom-width: 1px;
   border-bottom-color: var(--hr-color);
-  margin: 0 calc(var(--horizontal-spacing) * 2);
+  margin: 0 var(--top-level-horizontal-padding-mobile);
 }
 
-.nav-drawer-header__logo {
+.nav-drawer-header-mobile__logo {
   height: calc(var(--horizontal-spacing) * 4);
 }
 
@@ -88,7 +93,7 @@
 
 .navigation-links ul li > *:first-child {
   display: block;
-  padding: calc(var(--vertical-spacing) * 2.5) var(--top-level-horizontal-padding);
+  padding: calc(var(--vertical-spacing) * 1.5) var(--nested-horizontal-padding);
 }
 
 .navigation-links > ul > li > *:first-child {
@@ -97,7 +102,7 @@
   font-size: var(--navigation-font-size-mobile);
   font-weight: 700;
   color: var(--dark-grey);
-  padding: calc(var(--vertical-spacing) * 2.5) var(--top-level-horizontal-padding);
+  padding: calc(var(--vertical-spacing) * 2.5) var(--top-level-horizontal-padding-mobile);
 }
 
 .navigation-drop-down-btn {
@@ -110,7 +115,7 @@
   content: '';
   display: block;
   position: absolute;
-  right: var(--top-level-horizontal-padding);
+  right: var(--top-level-horizontal-padding-mobile);
   top: var(--top-level-vertical-padding);
   width: 20px;
   height: 20px;
@@ -130,7 +135,7 @@
 }
 
 .navigation-container ul.drop-down-list {
-  padding-left: var(--top-level-horizontal-padding);
+  padding-left: var(--top-level-horizontal-padding-mobile);
 }
 
 .nav-backdrop {
@@ -153,7 +158,7 @@
   touch-action: none;
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   .navigation-open-btn {
     display: none;
   }
@@ -169,10 +174,29 @@
     justify-content: flex-end;
   }
 
-  .nav-drawer-header {
+  .nav-drawer-header-desktop {
+    display: block;
+  }
+
+  .nav-drawer-header-desktop__link {
+    display: inline-block;
+  }
+
+  .nav-drawer-header-desktop__logo {
+    height: calc(var(--horizontal-spacing) * 4);
+  }
+
+  .nav-drawer-header-mobile {
     display: none;
   }
 
+  .navigation-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .navigation-links, .navigation-links.is-open {
     overflow-y: visible;
     position: relative;
@@ -186,6 +210,7 @@
     display: inline-block;
     font-size: var(--navigation-font-size-desktop);
     color: var(--nav-unselected-color-desktop);
+    padding: calc(var(--vertical-spacing) * 2.5) var(--top-level-horizontal-padding-desktop);
   }
 
   .navigation-links > ul > li > *:first-child:hover, .navigation-links > ul > .drop-down-container:hover > .navigation-drop-down-btn, .drop-down-list a:hover {
@@ -237,7 +262,7 @@
   .navigation-links .drop-down-container .drop-down-container .drop-down-list {
     position: relative;
     box-shadow: none;
-    padding-left: var(--top-level-horizontal-padding);
+    padding-left: var(--top-level-horizontal-padding-desktop);
   }
 
   .navigation-links > ul > .drop-down-container > .navigation-drop-down-btn:after {
diff --git a/src/themes/styles/components/page-header.css b/src/themes/styles/components/page-header.css
index 49eb3f6..c7675d8 100644
--- a/src/themes/styles/components/page-header.css
+++ b/src/themes/styles/components/page-header.css
@@ -14,7 +14,7 @@
   margin: 0 auto;
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   .page-header h1 {
     font-size: var(--base-font-size-desktop);
   }
diff --git a/src/themes/styles/components/primary-header.css b/src/themes/styles/components/primary-header.css
index 4f8f03c..9f4749a 100644
--- a/src/themes/styles/components/primary-header.css
+++ b/src/themes/styles/components/primary-header.css
@@ -70,7 +70,7 @@
   background-position: center;
 }**/
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   /** .primary-header__inner-section {
     height: calc(var(--vertical-spacing) * 15);
     margin: calc(var(--vertical-spacing) * 12) calc(var(--horizontal-spacing) * 4);
diff --git a/src/themes/styles/main.css b/src/themes/styles/main.css
index f09f5ad..840bdbc 100644
--- a/src/themes/styles/main.css
+++ b/src/themes/styles/main.css
@@ -183,7 +183,7 @@ figure pre {
   background-color: var(--btn-bg-color-hover);
 }
 
-@media (min-width: 700px) {
+@media (min-width: 780px) {
   body {
     font-size: var(--base-font-size-desktop);
   }