Adding logo to navigation

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;
   }

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;
   }

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">

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);
   }

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;
   }

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,18 +30,22 @@
   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;
   align-items: center;
   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 {

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);
   }

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);

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);
   }