sfc-utils 1.3.0 → 1.3.3

package/css/nav.css

@@ -0,0 +1,62 @@
+.nav2-container {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  left: 0;
+  height: 37px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav2-container.invert {
+  background-color: #fff;
+}
+
+.nav2-left, .nav2-right {
+  display: flex;
+}
+
+.nav2-left {
+  justify-content: flex-start;
+}
+
+.nav2-right {
+  justify-content: flex-end;
+}
+
+#nav2-sub-box {
+  border: 1px solid var(--brand-color);
+  border-radius: 3px;
+  color: var(--brand-color);
+  font-size: 14px;
+  letter-spacing: 0.05em;
+  margin-right: 10px;
+  padding: 3px 8px 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.nav2-desk-logo, .nav2-mobile-logo {
+  max-height: 20px;
+  margin-left: 0.335rem;
+}
+
+.nav2-mobile-logo {
+  display: none;
+}
+@media (max-width: 490px){
+  .nav2-mobile-logo {
+    display: block;
+  }
+  .nav2-desk-logo {
+    display: none;
+  }
+  .nav2-left {
+    order: 1;
+  }
+  .nav2-right {
+    flex: 25 1;
+    order: 2;
+  }
+}

package/index.js

@@ -246,7 +246,7 @@ let blendHDN = function(meta){
 let { getBrands } = require('./brands')
 let { getSettings } = require('./settings')
 let { getNav } = require('./nav')
-let { getNav2 } = require('./nav-updated')
+let { getNav2 } = require('./nav2')
 let { getSpecialNav } = require('./specialnav')
 let { getFooter } = require('./footer')
 let { getTopper } = require('./topper')

package/nav2.js

@@ -1,4 +1,5 @@
 let { getBrands } = require("./brands");
+require('./css/nav.css');
 
 // Handle nav for various markets and include nav options for other links
 let getNav2 = function (
@@ -129,8 +130,8 @@ let getNav2 = function (
   if (navLink) {
     navLinkInsert = `
       <a
-        class="topper-nav-title"
-        id="nav-title"
+        class="nav2-title"
+        id="nav2-title"
         href="${navLink.url}"
         target="${navLink.target || "_blank"}"
       >
@@ -140,17 +141,17 @@ let getNav2 = function (
   }
 
   let rightBlock = `
-    <a class="sub-box" href="${subscribeLink}" target="_blank">
+    <a id="nav2-sub-box" href="${subscribeLink}" target="_blank">
       <div>Subscribe</div>
     </a>
   `;
   
 
-  let navHTML = `<nav class="topper-nav-container ${invertClass}">
-    <div class="topper-nav-left">
+  let navHTML = `<nav class="nav2-container ${invertClass}">
+    <div class="nav2-left">
       ${navLinkInsert}
     </div>
-    <div class="topper-nav-center">
+    <div class="nav2-center">
     <a
       href="/"
       target="_blank"
@@ -158,19 +159,19 @@ let getNav2 = function (
     >
       <div>
         <img
-          class="topper-nav-desk-logo"
+          class="nav2-desk-logo"
           alt="Logo"
           src="https://files.sfchronicle.com/static-assets/logos/${marketPrefix}-${color}.png"
         ></img>
         <img
-          class="topper-nav-mobile-logo"
+          class="nav2-mobile-logo"
           alt="Logo"
           src="https://files.sfchronicle.com/static-assets/logos/${marketPrefix}-square-${color}.png"
         ></img>
       </div>
     </a>
     </div>
-    <div class="topper-nav-right">
+    <div class="nav2-right">
       ${rightBlock}
     </div>
     ${subnav}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.0",
+  "version": "1.3.3",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",