Create the header block

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard"]
-}
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "media-feature-range-notation": null
+  }
+}

best-cigars-guide/blocks/columns/columns.css

@@ -19,7 +19,7 @@
   display: block;
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;

best-cigars-guide/blocks/footer/footer.css

@@ -5,7 +5,7 @@ footer {
 }
 
 footer .footer {
-  max-width: 1200px;
+  max-width: var(--content-width);
   margin: auto;
 }
 

best-cigars-guide/blocks/footer/footer.js

@@ -8,7 +8,7 @@ import { loadFragment } from '../fragment/fragment.js';
 export default async function decorate(block) {
   // load footer as fragment
   const footerMeta = getMetadata('footer');
-  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
+  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/best-cigars-guide/footer';
   const fragment = await loadFragment(footerPath);
 
   // decorate footer DOM

best-cigars-guide/blocks/header/header.css

@@ -1,6 +1,6 @@
 /* header and nav layout */
 header .nav-wrapper {
-  background-color: var(--background-color);
+  background-color: var(--header-background-color);
   width: 100%;
   z-index: 2;
   position: fixed;
@@ -11,14 +11,12 @@ header nav {
   display: grid;
   grid-template:
     'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
+    'sections sections sections' 1fr / auto 1fr 30%;
   align-items: center;
-  gap: 0 2em;
   margin: auto;
-  max-width: 1264px;
+  max-width: var(--content-width);
   height: var(--nav-height);
   padding: 0 1rem;
-  font-family: var(--body-font-family);
 }
 
 header nav[aria-expanded="true"] {
@@ -30,18 +28,27 @@ header nav[aria-expanded="true"] {
   min-height: 100vh;
 }
 
-@media (width >= 600px) {
+@media (max-width: 600px) {
   header nav {
-    padding: 0 2rem;
+    grid-template:
+      'brand' auto
+      'tools' auto
   }
-}
 
-@media (width >= 900px) {
-  header nav {
-    display: flex;
-    justify-content: space-between;
+  header nav p {
+    font-size: 0.8em;
   }
 
+  header nav .brand-logo {
+    flex-flow: column;
+  }
+
+  header nav .nav-brand img {
+    padding: 0.5em 0;
+  }
+}
+
+@media (min-width: 900px) {
   header nav[aria-expanded="true"] {
     min-height: 0;
     overflow: visible;
@@ -51,6 +58,7 @@ header nav[aria-expanded="true"] {
 header nav p {
   margin: 0;
   line-height: 1;
+  color: #FFF;
 }
 
 header nav a:any-link {
@@ -131,7 +139,7 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
   transform: rotate(-45deg);
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   header nav .nav-hamburger {
     display: none;
     visibility: hidden;
@@ -141,9 +149,8 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
 /* brand */
 header .nav-brand {
   grid-area: brand;
-  flex-basis: 128px;
-  font-size: var(--heading-font-size-s);
-  font-weight: 700;
+  font-size: var(--heading-font-size-m);
+  font-weight: 500;
   line-height: 1;
 }
 
@@ -152,13 +159,58 @@ header nav .nav-brand img {
   height: auto;
 }
 
+header nav .brand-logo {
+  display: flex;
+  align-items: center;
+}
+
+header nav .brand-logo div {
+  color: #FFF;
+  padding: 0 1em;
+}
+
+header nav .search-header {
+  position: relative;
+  padding: 0;
+}
+
+header nav .search-header label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+header nav .search-header input {
+  position: relative;
+  border: none;
+  padding: 9px 12px;
+  width: 100%;
+  background: var(--background-color);
+  outline: none;
+}
+
+header nav .search-header button {
+  position: absolute;
+  top: 0.5em;
+  bottom: 0;
+  right: 4px;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 /* sections */
 header nav .nav-sections {
   grid-area: sections;
   flex: 1 1 auto;
   display: none;
   visibility: hidden;
-  background-color: var(--overlay-color);
 }
 
 header nav[aria-expanded="true"] .nav-sections {
@@ -186,7 +238,7 @@ header nav .nav-sections ul > li > ul > li {
   font-weight: 500;
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   header nav .nav-sections {
     display: block;
     visibility: visible;

best-cigars-guide/blocks/header/header.js

@@ -93,7 +93,7 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
 export default async function decorate(block) {
   // load nav as fragment
   const navMeta = getMetadata('nav');
-  const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav';
+  const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/best-cigars-guide/nav';
   const fragment = await loadFragment(navPath);
 
   // decorate nav DOM
@@ -108,15 +108,19 @@ export default async function decorate(block) {
     if (section) section.classList.add(`nav-${c}`);
   });
 
+  // Famous Smoke Shop logo
   const navBrand = nav.querySelector('.nav-brand');
-  const brandLink = navBrand.querySelector('.button');
-  if (brandLink) {
-    brandLink.className = '';
-    brandLink.closest('.button-container').className = '';
-  }
+  const navText = navBrand.innerHTML;
+  navBrand.innerHTML = `
+  <a href="/best-cigars-guide" rel="home" class="brand-logo" title="Best Cigars Guide Homepage">
+    <img src="/best-cigars-guide/icons/famous-smoke-shop-logo.svg" alt="Famous Smoke Shop Logo">
+    ${navText}
+  </a>
+  `;
 
+  // Build submenu links (if they exist)
   const navSections = nav.querySelector('.nav-sections');
-  if (navSections) {
+  if (navSections && navSections.length > 0) {
     navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
       if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
       navSection.addEventListener('click', () => {
@@ -127,21 +131,37 @@ export default async function decorate(block) {
         }
       });
     });
-  }
 
-  // hamburger for mobile
-  const hamburger = document.createElement('div');
-  hamburger.classList.add('nav-hamburger');
-  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
+    const hamburger = document.createElement('div');
+    hamburger.classList.add('nav-hamburger');
+    hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
       <span class="nav-hamburger-icon"></span>
     </button>`;
-  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
-  nav.prepend(hamburger);
-  nav.setAttribute('aria-expanded', 'false');
-  // prevent mobile nav behavior on window resize
-  toggleMenu(nav, navSections, isDesktop.matches);
-  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+    hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
+    nav.prepend(hamburger);
+    nav.setAttribute('aria-expanded', 'false');
+    // prevent mobile nav behavior on window resize
+    toggleMenu(nav, navSections, isDesktop.matches);
+    isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+  }
+
+  // Site search box
+  const navTools = nav.querySelector('.nav-tools');
+  const searchBox = document.createElement('div');
+  searchBox.id = 'site-search';
+  searchBox.className = 'site-search';
+  searchBox.innerHTML = `
+  <form role="search" action="/best-cigars-guide/search" class="search search-header">
+    <label for="header-search-term">Search</label>
+    <input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="s" autocomplete="off">
+    <button type="submit" class="search-submit" value="Submit" title="Submit">
+      <span class="icon icon-search"><img data-icon-name="search" src="/best-cigars-guide/icons/search.svg" alt="Search" title="Search" loading="lazy"></span>
+    </button>
+  </form>
+  `;
+  navTools.innerHTML = searchBox.innerHTML;
 
+  // Wrap it up!
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);

best-cigars-guide/blocks/hero/hero.css

@@ -1,7 +1,7 @@
 main .hero-container > div {
   max-width: unset;
 }
-  
+
 main .hero-container {
   padding: 0;
 }
@@ -13,10 +13,12 @@ main .hero-container {
 }
 
 .hero h1 {
-  max-width: 1200px;
+  max-width: var(--content-width);
   margin-left: auto;
   margin-right: auto;
   color: white;
+  text-align: center;
+  font-size: var(--heading-font-size-xl);
 }
 
 .hero picture {