Shopinmenu

src/_data/homepage.yml

@@ -3,7 +3,7 @@ preamble: Providing emergency response to all of San Juan Island, including Town
   of Friday Harbor, as well as Brown, Henry, Johns, Pearl, Spieden, and Stuart
   Islands.
 number_news_stories: "4"
-header_image_transform: /h_520,q_auto:eco,b_rgb:21262d/e_art:incognito/o_20/e_gradient_fade:symmetric_pad,x_0.1/
+header_image_transform: /h_520,q_auto:eco,b_rgb:334155/e_art:incognito/o_30/e_gradient_fade:symmetric_pad,x_0.1/
 header_image_source:
   - alldeptphoto2022_washout.jpg
   - deptvehicles_washout.jpg

src/_data/site.json

@@ -1,7 +1,7 @@
 {
   "prodUrl": "https://www.sjifire.org",
   "rootUrl": "https://sjifire.netlify.app",
-  "cloudinaryRootUrl": "https://res.cloudinary.com/san-juan-fire-district-3",
+  "cloudinaryRootUrl": "https://res.cloudinary.com/san-juan-fire-district-3/",
   "site_name": "San Juan Island Fire and Rescue",
   "site_desc": "San Juan Island Fire and Rescue provides fire, medical, rescue, and marine emergency services to Friday Harbor and multiple islands within San Juan County, WA.",
   "formal_site_name": "San Juan County Fire District #3",

src/_includes/header.njk

@@ -34,6 +34,9 @@
         <li class="subitem"><a href="/services/knoxbox/">KnoxBox</a></li>
         <li class="subitem"><a href="/services/fire-alarms/">Smoke and CO Alarms</a></li>
       </ul>
+    <li class="item item--shop">
+      <a href="{# TODO: SHOP URL #}">Shop</a>
+    </li>
     <li class="item{{ ' active' if page.url.includes('/contact/') }}">
       <a href="/contact">Contact</a>
     </li>

src/_includes/site.css

@@ -70,9 +70,10 @@ select {
     "Helvetica Neue", "Helvetica", sans-serif;
   --dk-gray: #21262d;
   --black: #161b22;
+  --home_header_bg: #334155;
   --yellow: #f2c700;
   --bright-red: #c42414;
-  --dk-red: #72150c;
+  --dk-red: #72150C;
   --md-gray: #515559;
   --muted-gray: #919599;
   --btn-gray: #e1e5e9;
@@ -97,7 +98,7 @@ body {
 }
 
 .site-header {
-  background-color: var(--dk-gray);
+  background-color: var(--home_header_bg);
 }
 
 .site-header--home {
@@ -139,17 +140,18 @@ body {
   padding: 0;
 }
 
-.logo img {
-  max-width: 120px;
-  height: auto;
+.logo a {
+  display: block;
 }
 
-.item {
-  padding: 10px;
+.logo img {
+  display: block;
+  max-width: 150px;
+  height: auto;
 }
 
 .item:not(:last-child) {
-  margin-right: 8px;
+  margin-right: 12px;
 }
 
 .item a {
@@ -167,6 +169,17 @@ body {
   color: white;
 }
 
+.item--shop a {
+  color: black;
+  background-color: var(--yellow);
+}
+
+.item--shop a:hover,
+.item--shop a:focus,
+.item--shop a:active {
+  background-color: var(--bright-red);
+}
+
 /* Mobile menu */
 .menu {
   display: flex;
@@ -178,7 +191,8 @@ body {
 
 .menu li:not(.logo) a {
   display: block;
-  padding: 0 10px;
+  padding: 6px 10px;
+  border-radius: 0.15rem;
 }
 
 .menu li.subitem a {
@@ -287,7 +301,7 @@ body {
     display: block;
     position: absolute;
     right: 0;
-    top: 44px;
+    top: 36px;
     z-index: 10;
     background: var(--black);
   }
@@ -299,7 +313,6 @@ body {
 
 .page-header {
   padding-bottom: 40px;
-  /* background-color: var(--dk-gray); */
   color: #fff;
 }