sfc-utils 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/nav.css +62 -0
- package/nav2.js +10 -9
- package/package.json +1 -1
package/css/nav.css
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.nav2-container {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
width: 100%;
|
|
5
|
+
left: 0;
|
|
6
|
+
height: 37px;
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
align-items: center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.nav2-container.invert {
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.nav2-left, .nav2-right {
|
|
17
|
+
display: flex;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.nav2-left {
|
|
21
|
+
justify-content: flex-start;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.nav2-right {
|
|
25
|
+
justify-content: flex-end;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
#nav2-sub-box {
|
|
29
|
+
border: 1px solid var(--brand-color);
|
|
30
|
+
border-radius: 3px;
|
|
31
|
+
color: var(--brand-color);
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
letter-spacing: 0.05em;
|
|
34
|
+
margin-right: 10px;
|
|
35
|
+
padding: 3px 8px 2px;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
text-transform: uppercase;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.nav2-desk-logo, .nav2-mobile-logo {
|
|
41
|
+
max-height: 20px;
|
|
42
|
+
margin-left: 0.335rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.nav2-mobile-logo {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
@media (max-width: 490px){
|
|
49
|
+
.nav2-mobile-logo {
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
.nav2-desk-logo {
|
|
53
|
+
display: none;
|
|
54
|
+
}
|
|
55
|
+
.nav2-left {
|
|
56
|
+
order: 1;
|
|
57
|
+
}
|
|
58
|
+
.nav2-right {
|
|
59
|
+
flex: 25 1;
|
|
60
|
+
order: 2;
|
|
61
|
+
}
|
|
62
|
+
}
|
package/nav2.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import './css/nav.css'
|
|
1
2
|
let { getBrands } = require("./brands");
|
|
2
3
|
|
|
3
4
|
// Handle nav for various markets and include nav options for other links
|
|
@@ -129,8 +130,8 @@ let getNav2 = function (
|
|
|
129
130
|
if (navLink) {
|
|
130
131
|
navLinkInsert = `
|
|
131
132
|
<a
|
|
132
|
-
class="
|
|
133
|
-
id="
|
|
133
|
+
class="nav2-title"
|
|
134
|
+
id="nav2-title"
|
|
134
135
|
href="${navLink.url}"
|
|
135
136
|
target="${navLink.target || "_blank"}"
|
|
136
137
|
>
|
|
@@ -140,17 +141,17 @@ let getNav2 = function (
|
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
let rightBlock = `
|
|
143
|
-
<a
|
|
144
|
+
<a id="nav2-sub-box" href="${subscribeLink}" target="_blank">
|
|
144
145
|
<div>Subscribe</div>
|
|
145
146
|
</a>
|
|
146
147
|
`;
|
|
147
148
|
|
|
148
149
|
|
|
149
|
-
let navHTML = `<nav class="
|
|
150
|
-
<div class="
|
|
150
|
+
let navHTML = `<nav class="nav2-container ${invertClass}">
|
|
151
|
+
<div class="nav2-left">
|
|
151
152
|
${navLinkInsert}
|
|
152
153
|
</div>
|
|
153
|
-
<div class="
|
|
154
|
+
<div class="nav2-center">
|
|
154
155
|
<a
|
|
155
156
|
href="/"
|
|
156
157
|
target="_blank"
|
|
@@ -158,19 +159,19 @@ let getNav2 = function (
|
|
|
158
159
|
>
|
|
159
160
|
<div>
|
|
160
161
|
<img
|
|
161
|
-
class="
|
|
162
|
+
class="nav2-desk-logo"
|
|
162
163
|
alt="Logo"
|
|
163
164
|
src="https://files.sfchronicle.com/static-assets/logos/${marketPrefix}-${color}.png"
|
|
164
165
|
></img>
|
|
165
166
|
<img
|
|
166
|
-
class="
|
|
167
|
+
class="nav2-mobile-logo"
|
|
167
168
|
alt="Logo"
|
|
168
169
|
src="https://files.sfchronicle.com/static-assets/logos/${marketPrefix}-square-${color}.png"
|
|
169
170
|
></img>
|
|
170
171
|
</div>
|
|
171
172
|
</a>
|
|
172
173
|
</div>
|
|
173
|
-
<div class="
|
|
174
|
+
<div class="nav2-right">
|
|
174
175
|
${rightBlock}
|
|
175
176
|
</div>
|
|
176
177
|
${subnav}
|