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 |
b8ef5fe0 |
16 | background-color: _palette(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 |
30 | \r |
31 | .logo {\r |
32 | border: 0;\r |
33 | display: inline-block;\r |
34 | font-size: 0.8em;\r |
35 | height: inherit;\r |
36 | line-height: inherit;\r |
37 | padding: 0 1.5em;\r |
38 | \r |
39 | strong {\r |
40 | @include vendor('transition', (\r |
41 | 'background-color #{_duration(transition)} ease-in-out',\r |
42 | 'color #{_duration(transition)} ease-in-out'\r |
43 | ));\r |
44 | background-color: _palette(fg-bold);\r |
45 | color: _palette(bg);\r |
46 | display: inline-block;\r |
47 | line-height: 1.65em;\r |
48 | margin-right: 0.325em;\r |
49 | padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);\r |
50 | }\r |
51 | \r |
52 | &:hover {\r |
53 | strong {\r |
54 | background-color: _palette(highlight);\r |
55 | }\r |
56 | }\r |
57 | \r |
58 | &:active {\r |
59 | strong {\r |
60 | background-color: desaturate(darken(_palette(highlight), 15), 5);\r |
61 | }\r |
62 | }\r |
63 | }\r |
64 | \r |
65 | nav {\r |
66 | @include vendor('display', 'flex');\r |
67 | @include vendor('justify-content', 'flex-end');\r |
68 | @include vendor('flex-grow', '1');\r |
69 | height: inherit;\r |
70 | line-height: inherit;\r |
71 | \r |
72 | a {\r |
73 | border: 0;\r |
74 | display: block;\r |
75 | font-size: 0.8em;\r |
76 | height: inherit;\r |
77 | line-height: inherit;\r |
78 | padding: 0 0.75em;\r |
79 | position: relative;\r |
80 | vertical-align: middle;\r |
81 | \r |
82 | &:last-child {\r |
83 | padding-right: 1.5em;\r |
84 | }\r |
85 | \r |
86 | &[href="#menu"] {\r |
87 | padding-right: 3.325em !important;\r |
88 | \r |
89 | &:before, &:after {\r |
90 | 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(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 |
91 | background-position: center;\r |
92 | background-repeat: no-repeat;\r |
93 | background-size: 24px 32px;\r |
94 | content: '';\r |
95 | display: block;\r |
96 | height: 100%;\r |
97 | position: absolute;\r |
98 | right: 1.5em;\r |
99 | top: 0;\r |
100 | vertical-align: middle;\r |
101 | width: 24px;\r |
102 | }\r |
103 | \r |
104 | &:after {\r |
105 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r |
106 | 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(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 |
107 | opacity: 0;\r |
108 | z-index: 1;\r |
109 | }\r |
110 | \r |
111 | &:hover, &:active {\r |
112 | &:after {\r |
113 | opacity: 1;\r |
114 | }\r |
115 | }\r |
116 | \r |
117 | &:last-child {\r |
118 | padding-right: 3.875em !important;\r |
119 | \r |
120 | &:before, &:after {\r |
121 | right: 2em;\r |
122 | }\r |
123 | }\r |
124 | }\r |
125 | }\r |
126 | }\r |
127 | \r |
128 | &.reveal {\r |
129 | @include vendor('animation', 'reveal-header 0.35s ease');\r |
130 | }\r |
131 | \r |
132 | &.alt {\r |
133 | @include vendor('transition', 'opacity #{_duration(banner)} ease');\r |
134 | @include vendor('transition-delay', '0.75s');\r |
135 | @include vendor('animation', 'none');\r |
136 | background-color: transparent;\r |
137 | box-shadow: none;\r |
138 | position: absolute;\r |
139 | \r |
140 | &.style1 { .logo { strong { color: _palette(accent1); } } }\r |
141 | &.style2 { .logo { strong { color: _palette(accent2); } } }\r |
142 | &.style3 { .logo { strong { color: _palette(accent3); } } }\r |
143 | &.style4 { .logo { strong { color: _palette(accent4); } } }\r |
144 | &.style5 { .logo { strong { color: _palette(accent5); } } }\r |
145 | &.style6 { .logo { strong { color: _palette(accent6); } } }\r |
146 | }\r |
147 | \r |
148 | body.is-preload & {\r |
149 | &.alt {\r |
150 | opacity: 0;\r |
151 | }\r |
152 | }\r |
153 | \r |
154 | @include breakpoint('<=xlarge') {\r |
155 | nav {\r |
156 | a {\r |
157 | &[href="#menu"] {\r |
158 | padding-right: 3.75em !important;\r |
159 | \r |
160 | &:last-child {\r |
161 | padding-right: 4.25em !important;\r |
162 | }\r |
163 | }\r |
164 | }\r |
165 | }\r |
166 | }\r |
167 | \r |
168 | @include breakpoint('<=large') {\r |
169 | nav {\r |
170 | a {\r |
171 | &[href="#menu"] {\r |
172 | padding-right: 4em !important;\r |
173 | \r |
174 | &:last-child {\r |
175 | padding-right: 4.5em !important;\r |
176 | }\r |
177 | }\r |
178 | }\r |
179 | }\r |
180 | }\r |
181 | \r |
182 | @include breakpoint('<=small') {\r |
183 | height: 2.75em;\r |
184 | line-height: 2.75em;\r |
185 | \r |
186 | .logo {\r |
187 | padding: 0 1em;\r |
188 | }\r |
189 | \r |
190 | nav {\r |
191 | a {\r |
192 | padding: 0 0.5em;\r |
193 | \r |
194 | &:last-child {\r |
195 | padding-right: 1em;\r |
196 | }\r |
197 | \r |
198 | &[href="#menu"] {\r |
199 | padding-right: 3.25em !important;\r |
200 | \r |
201 | &:before, &:after {\r |
202 | right: 0.75em;\r |
203 | }\r |
204 | \r |
205 | &:last-child {\r |
206 | padding-right: 4em !important;\r |
207 | \r |
208 | &:before, &:after {\r |
209 | right: 1.5em;\r |
210 | }\r |
211 | }\r |
212 | }\r |
213 | }\r |
214 | }\r |
215 | }\r |
216 | \r |
217 | @include breakpoint('<=xsmall') {\r |
218 | .logo {\r |
219 | span {\r |
220 | display: none;\r |
221 | }\r |
222 | }\r |
223 | \r |
224 | nav {\r |
225 | a {\r |
226 | &[href="#menu"] {\r |
227 | overflow: hidden;\r |
228 | padding-right: 0 !important;\r |
229 | text-indent: 5em;\r |
230 | white-space: nowrap;\r |
231 | width: 5em;\r |
232 | \r |
233 | &:before, &:after {\r |
234 | right: 0;\r |
235 | width: inherit;\r |
236 | }\r |
237 | \r |
238 | &:last-child {\r |
239 | &:before, &:after {\r |
240 | width: 4em;\r |
241 | right: 0;\r |
242 | }\r |
243 | }\r |
244 | }\r |
245 | }\r |
246 | }\r |
247 | }\r |
248 | } |