748286b5 |
1 | ///\r |
2 | /// Forty by HTML5 UP\r |
3 | /// html5up.net | @ajlkn\r |
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r |
5 | ///\r |
6 | \r |
7 | /* Header */\r |
8 | \r |
9 | @include keyframes('reveal-header') {\r |
10 | 0% { top: -4em; opacity: 0; }\r |
11 | 100% { top: 0; opacity: 1; }\r |
12 | }\r |
13 | \r |
14 | #header {\r |
15 | @include vendor('display', 'flex');\r |
cb4379e1 |
16 | background-color: _palette_light(bg-alt);\r |
748286b5 |
17 | box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);\r |
18 | cursor: default;\r |
19 | font-weight: _font(weight-bold);\r |
20 | height: 3.25em;\r |
21 | left: 0;\r |
22 | letter-spacing: _font(letter-spacing-alt);\r |
23 | line-height: 3.25em;\r |
24 | margin: 0;\r |
25 | position: fixed;\r |
26 | text-transform: uppercase;\r |
27 | top: 0;\r |
28 | width: 100%;\r |
29 | z-index: _misc(z-index-base);\r |
cb4379e1 |
30 | @media screen and (prefers-color-scheme: dark) {\r |
31 | background-color: _palette_dark(bg-alt);\r |
32 | }\r |
748286b5 |
33 | \r |
34 | .logo {\r |
35 | border: 0;\r |
36 | display: inline-block;\r |
37 | font-size: 0.8em;\r |
38 | height: inherit;\r |
39 | line-height: inherit;\r |
40 | padding: 0 1.5em;\r |
41 | \r |
42 | strong {\r |
43 | @include vendor('transition', (\r |
44 | 'background-color #{_duration(transition)} ease-in-out',\r |
45 | 'color #{_duration(transition)} ease-in-out'\r |
46 | ));\r |
cb4379e1 |
47 | background-color: _palette_light(fg-bold);\r |
48 | color: _palette_light(bg);\r |
748286b5 |
49 | display: inline-block;\r |
50 | line-height: 1.65em;\r |
51 | margin-right: 0.325em;\r |
52 | padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);\r |
cb4379e1 |
53 | @media screen and (prefers-color-scheme: dark) {\r |
54 | background-color: _palette_dark(fg-bold);\r |
55 | color: _palette_dark(bg);\r |
56 | }\r |
748286b5 |
57 | }\r |
58 | \r |
59 | &:hover {\r |
60 | strong {\r |
cb4379e1 |
61 | background-color: _palette_light(highlight);\r |
62 | @media screen and (prefers-color-scheme: dark) {\r |
63 | background-color: _palette_dark(highlight);\r |
64 | }\r |
748286b5 |
65 | }\r |
66 | }\r |
67 | \r |
68 | &:active {\r |
69 | strong {\r |
cb4379e1 |
70 | background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r |
71 | @media screen and (prefers-color-scheme: dark) {\r |
72 | background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r |
73 | }\r |
748286b5 |
74 | }\r |
75 | }\r |
76 | }\r |
77 | \r |
78 | nav {\r |
79 | @include vendor('display', 'flex');\r |
80 | @include vendor('justify-content', 'flex-end');\r |
81 | @include vendor('flex-grow', '1');\r |
82 | height: inherit;\r |
83 | line-height: inherit;\r |
84 | \r |
85 | a {\r |
86 | border: 0;\r |
87 | display: block;\r |
88 | font-size: 0.8em;\r |
89 | height: inherit;\r |
90 | line-height: inherit;\r |
91 | padding: 0 0.75em;\r |
92 | position: relative;\r |
93 | vertical-align: middle;\r |
94 | \r |
95 | &:last-child {\r |
96 | padding-right: 1.5em;\r |
97 | }\r |
98 | \r |
99 | &[href="#menu"] {\r |
100 | padding-right: 3.325em !important;\r |
101 | \r |
102 | &:before, &:after {\r |
cb4379e1 |
103 | background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r |
748286b5 |
104 | background-position: center;\r |
105 | background-repeat: no-repeat;\r |
106 | background-size: 24px 32px;\r |
107 | content: '';\r |
108 | display: block;\r |
109 | height: 100%;\r |
110 | position: absolute;\r |
111 | right: 1.5em;\r |
112 | top: 0;\r |
113 | vertical-align: middle;\r |
114 | width: 24px;\r |
cb4379e1 |
115 | @media screen and (prefers-color-scheme: dark) {\r |
116 | background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r |
117 | }\r |
748286b5 |
118 | }\r |
119 | \r |
120 | &:after {\r |
121 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r |
cb4379e1 |
122 | background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r |
748286b5 |
123 | opacity: 0;\r |
124 | z-index: 1;\r |
cb4379e1 |
125 | @media screen and (prefers-color-scheme: dark) {\r |
126 | background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r |
127 | }\r |
748286b5 |
128 | }\r |
129 | \r |
130 | &:hover, &:active {\r |
131 | &:after {\r |
132 | opacity: 1;\r |
133 | }\r |
134 | }\r |
135 | \r |
136 | &:last-child {\r |
137 | padding-right: 3.875em !important;\r |
138 | \r |
139 | &:before, &:after {\r |
140 | right: 2em;\r |
141 | }\r |
142 | }\r |
143 | }\r |
144 | }\r |
145 | }\r |
146 | \r |
147 | &.reveal {\r |
148 | @include vendor('animation', 'reveal-header 0.35s ease');\r |
149 | }\r |
150 | \r |
151 | &.alt {\r |
152 | @include vendor('transition', 'opacity #{_duration(banner)} ease');\r |
153 | @include vendor('transition-delay', '0.75s');\r |
154 | @include vendor('animation', 'none');\r |
155 | background-color: transparent;\r |
156 | box-shadow: none;\r |
157 | position: absolute;\r |
158 | \r |
cb4379e1 |
159 | &.style1 { .logo { strong { color: _palette_light(accent1); } } }\r |
160 | &.style2 { .logo { strong { color: _palette_light(accent2); } } }\r |
161 | &.style3 { .logo { strong { color: _palette_light(accent3); } } }\r |
162 | &.style4 { .logo { strong { color: _palette_light(accent4); } } }\r |
163 | &.style5 { .logo { strong { color: _palette_light(accent5); } } }\r |
164 | &.style6 { .logo { strong { color: _palette_light(accent6); } } }\r |
165 | @media screen and (prefers-color-scheme: dark) {\r |
166 | &.style1 { .logo { strong { color: _palette_dark(accent1); } } }\r |
167 | &.style2 { .logo { strong { color: _palette_dark(accent2); } } }\r |
168 | &.style3 { .logo { strong { color: _palette_dark(accent3); } } }\r |
169 | &.style4 { .logo { strong { color: _palette_dark(accent4); } } }\r |
170 | &.style5 { .logo { strong { color: _palette_dark(accent5); } } }\r |
171 | &.style6 { .logo { strong { color: _palette_dark(accent6); } } }\r |
172 | }\r |
748286b5 |
173 | }\r |
174 | \r |
175 | body.is-preload & {\r |
176 | &.alt {\r |
177 | opacity: 0;\r |
178 | }\r |
179 | }\r |
180 | \r |
181 | @include breakpoint('<=xlarge') {\r |
182 | nav {\r |
183 | a {\r |
184 | &[href="#menu"] {\r |
185 | padding-right: 3.75em !important;\r |
186 | \r |
187 | &:last-child {\r |
188 | padding-right: 4.25em !important;\r |
189 | }\r |
190 | }\r |
191 | }\r |
192 | }\r |
193 | }\r |
194 | \r |
195 | @include breakpoint('<=large') {\r |
196 | nav {\r |
197 | a {\r |
198 | &[href="#menu"] {\r |
199 | padding-right: 4em !important;\r |
200 | \r |
201 | &:last-child {\r |
202 | padding-right: 4.5em !important;\r |
203 | }\r |
204 | }\r |
205 | }\r |
206 | }\r |
207 | }\r |
208 | \r |
209 | @include breakpoint('<=small') {\r |
210 | height: 2.75em;\r |
211 | line-height: 2.75em;\r |
212 | \r |
213 | .logo {\r |
214 | padding: 0 1em;\r |
215 | }\r |
216 | \r |
217 | nav {\r |
218 | a {\r |
219 | padding: 0 0.5em;\r |
220 | \r |
221 | &:last-child {\r |
222 | padding-right: 1em;\r |
223 | }\r |
224 | \r |
225 | &[href="#menu"] {\r |
226 | padding-right: 3.25em !important;\r |
227 | \r |
228 | &:before, &:after {\r |
229 | right: 0.75em;\r |
230 | }\r |
231 | \r |
232 | &:last-child {\r |
233 | padding-right: 4em !important;\r |
234 | \r |
235 | &:before, &:after {\r |
236 | right: 1.5em;\r |
237 | }\r |
238 | }\r |
239 | }\r |
240 | }\r |
241 | }\r |
242 | }\r |
243 | \r |
244 | @include breakpoint('<=xsmall') {\r |
245 | .logo {\r |
246 | span {\r |
247 | display: none;\r |
248 | }\r |
249 | }\r |
250 | \r |
251 | nav {\r |
252 | a {\r |
253 | &[href="#menu"] {\r |
254 | overflow: hidden;\r |
255 | padding-right: 0 !important;\r |
256 | text-indent: 5em;\r |
257 | white-space: nowrap;\r |
258 | width: 5em;\r |
259 | \r |
260 | &:before, &:after {\r |
261 | right: 0;\r |
262 | width: inherit;\r |
263 | }\r |
264 | \r |
265 | &:last-child {\r |
266 | &:before, &:after {\r |
267 | width: 4em;\r |
268 | right: 0;\r |
269 | }\r |
270 | }\r |
271 | }\r |
272 | }\r |
273 | }\r |
274 | }\r |
275 | } |