]>
Commit | Line | Data |
---|---|---|
b2051dd7 S |
1 | /*! |
2 | * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) | |
3 | * Copyright 2011-2017 The Bootstrap Authors | |
4 | * Copyright 2011-2017 Twitter, Inc. | |
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
6 | */ | |
7 | ||
8 | // Core variables and mixins | |
9 | @import "bootstrap-4.0.0-alpha.6/scss/variables"; | |
10 | @import "bootstrap-4.0.0-alpha.6/scss/mixins"; | |
11 | @import "bootstrap-4.0.0-alpha.6/scss/custom"; | |
12 | ||
13 | // Reset and dependencies | |
14 | @import "bootstrap-4.0.0-alpha.6/scss/normalize"; | |
15 | // @import "bootstrap-4.0.0-alpha.6/scss/print"; | |
16 | ||
17 | // Core CSS | |
18 | @import "bootstrap-4.0.0-alpha.6/scss/reboot"; | |
19 | @import "bootstrap-4.0.0-alpha.6/scss/type"; | |
22cfab2d | 20 | //@import "bootstrap-4.0.0-alpha.6/scss/images"; |
b2051dd7 S |
21 | // @import "bootstrap-4.0.0-alpha.6/scss/code"; |
22 | @import "bootstrap-4.0.0-alpha.6/scss/grid"; | |
23 | // @import "bootstrap-4.0.0-alpha.6/scss/tables"; | |
24 | // @import "bootstrap-4.0.0-alpha.6/scss/forms"; | |
25 | @import "bootstrap-4.0.0-alpha.6/scss/buttons"; | |
26 | ||
27 | // Components | |
28 | @import "bootstrap-4.0.0-alpha.6/scss/transitions"; | |
b6d1f3b7 | 29 | //@import "bootstrap-4.0.0-alpha.6/scss/dropdown"; |
b2051dd7 | 30 | @import "bootstrap-4.0.0-alpha.6/scss/button-group"; |
b6d1f3b7 S |
31 | //@import "bootstrap-4.0.0-alpha.6/scss/input-group"; |
32 | //@import "bootstrap-4.0.0-alpha.6/scss/custom-forms"; | |
b2051dd7 S |
33 | @import "bootstrap-4.0.0-alpha.6/scss/nav"; |
34 | @import "bootstrap-4.0.0-alpha.6/scss/navbar"; | |
b6d1f3b7 | 35 | //@import "bootstrap-4.0.0-alpha.6/scss/card"; |
b2051dd7 S |
36 | // @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb"; |
37 | // @import "bootstrap-4.0.0-alpha.6/scss/pagination"; | |
38 | // @import "bootstrap-4.0.0-alpha.6/scss/badge"; | |
39 | // @import "bootstrap-4.0.0-alpha.6/scss/jumbotron"; | |
97ed546d | 40 | // @import "bootstrap-4.0.0-alpha.6/scss/alert"; |
b2051dd7 S |
41 | @import "bootstrap-4.0.0-alpha.6/scss/progress"; |
42 | @import "bootstrap-4.0.0-alpha.6/scss/media"; | |
43 | @import "bootstrap-4.0.0-alpha.6/scss/list-group"; | |
97ed546d S |
44 | // @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed"; |
45 | // @import "bootstrap-4.0.0-alpha.6/scss/close"; | |
b2051dd7 S |
46 | |
47 | // Components w/ JavaScript | |
48 | // @import "bootstrap-4.0.0-alpha.6/scss/modal"; | |
49 | // @import "bootstrap-4.0.0-alpha.6/scss/tooltip"; | |
50 | // @import "bootstrap-4.0.0-alpha.6/scss/popover"; | |
51 | // @import "bootstrap-4.0.0-alpha.6/scss/carousel"; | |
52 | ||
53 | // Utility classes | |
97ed546d S |
54 | @import "bootstrap-4.0.0-alpha.6/scss/utilities"; |
55 | ||
22cfab2d | 56 | |
a6a4d1cf | 57 | // Colors |
a6a4d1cf S |
58 | .amber-800 { |
59 | color: $amber-800; | |
60 | } | |
61 | ||
22cfab2d | 62 | // Fonts |
22cfab2d S |
63 | h1 { |
64 | line-height: 3rem; | |
65 | } | |
66 | ||
67 | h2 { | |
68 | line-height: 2.75rem; | |
69 | } | |
70 | ||
71 | h3 { | |
72 | line-height: 2rem; | |
7a9f7ff6 S |
73 | @include media-breakpoint-down(sm) { |
74 | font-size: 1em; | |
75 | } | |
22cfab2d S |
76 | } |
77 | ||
ccd81281 | 78 | h4 { |
32efbb1f | 79 | font-weight: 500; |
22cfab2d | 80 | line-height: 1.75rem; |
32efbb1f S |
81 | @include media-breakpoint-down(sm) { |
82 | font-size: 1em; | |
83 | } | |
22cfab2d S |
84 | } |
85 | ||
86 | h5 { | |
87 | line-height: 1.5rem; | |
88 | } | |
89 | ||
90 | p { | |
91 | line-height: 1.5rem; | |
7a9f7ff6 S |
92 | @include media-breakpoint-down(sm) { |
93 | font-size: .85em; | |
94 | } | |
22cfab2d S |
95 | &.lead { |
96 | line-height: 2rem; | |
97 | @include media-breakpoint-down(md) { | |
98 | font-size: 1.5rem; | |
99 | line-height: 2rem; | |
100 | } | |
101 | @include media-breakpoint-down(sm) { | |
102 | font-size: 1rem; | |
103 | line-height: 1.5rem; | |
104 | } | |
105 | } | |
106 | } | |
107 | ||
108 | .display-2 { | |
109 | margin-bottom: 4rem; | |
110 | @include media-breakpoint-down(md) { | |
111 | font-size: 2.5rem; | |
112 | line-height: 3.5rem; | |
113 | margin-bottom: 3rem; | |
114 | } | |
115 | @include media-breakpoint-down(sm) { | |
116 | font-size: 2rem; | |
117 | line-height: 2.75rem; | |
118 | } | |
119 | } | |
120 | ||
121 | .display-4 { | |
7a9f7ff6 | 122 | @include media-breakpoint-down(xs) { |
22cfab2d S |
123 | font-size: .875rem; |
124 | line-height: 1.25rem; | |
125 | } | |
126 | } | |
127 | ||
128 | small { | |
129 | line-height: 1rem; | |
7a9f7ff6 S |
130 | @include media-breakpoint-down(sm) { |
131 | font-size: .75em; | |
132 | } | |
22cfab2d S |
133 | } |
134 | ||
135 | .truncate { | |
136 | width: 100%; | |
137 | white-space: nowrap; | |
138 | overflow: hidden; | |
139 | text-overflow: ellipsis; | |
140 | } | |
141 | ||
142 | // Images | |
143 | img { | |
144 | &.img-fluid { | |
145 | width: 100%; | |
146 | max-width: 100%; | |
147 | height: auto; | |
148 | } | |
149 | } | |
150 | ||
151 | // Icons | |
22cfab2d S |
152 | .icon { |
153 | width: 1.5rem; | |
154 | height: 1.5rem; | |
155 | fill: currentColor; | |
156 | vertical-align: -.15rem; | |
157 | overflow: hidden; | |
158 | margin-right: .5rem; | |
159 | } | |
160 | ||
161 | .i_arrow_down { | |
162 | margin: 0; | |
efb8b657 S |
163 | position: absolute; |
164 | left: .75rem; | |
165 | top: -.25rem; | |
eafb8738 | 166 | animation: scroll 1.5s ease-in-out infinite; |
7a9f7ff6 | 167 | @include media-breakpoint-down(xs) { |
32efbb1f S |
168 | width: 1.75rem !important; |
169 | height: 1.75rem !important; | |
170 | left: .25rem; | |
171 | top: -.5rem; | |
efb8b657 | 172 | } |
22cfab2d S |
173 | } |
174 | ||
175 | .i_lg { | |
176 | width: 2.5rem; | |
177 | height: 2.5rem; | |
178 | margin: 0; | |
efb8b657 | 179 | transform: translateY(-.35rem); |
22cfab2d S |
180 | fill: $red_900; |
181 | } | |
182 | ||
183 | .i_sm { | |
efb8b657 S |
184 | vertical-align: top; |
185 | transform: translateY(-.10rem); | |
22cfab2d S |
186 | } |
187 | ||
188 | footer { | |
189 | .btn-toolbar .icon { | |
efb8b657 S |
190 | height: 2.25rem; |
191 | width: 2.25rem; | |
22cfab2d S |
192 | fill: rgba($blue-grey-900, .6); |
193 | } | |
194 | .i_heart { | |
efb8b657 S |
195 | vertical-align: top; |
196 | transform: translateY(-.15rem); | |
197 | @include media-breakpoint-down(sm) { | |
198 | transform: translateY(-.75rem); | |
199 | } | |
22cfab2d S |
200 | } |
201 | } | |
202 | ||
203 | // Buttons | |
22cfab2d S |
204 | .btn-red900 { |
205 | @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border); | |
206 | } | |
207 | .btn-white { | |
208 | @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border); | |
209 | } | |
210 | .btn-bluegrey900 { | |
211 | @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border); | |
ccd81281 S |
212 | } |
213 | ||
214 | button.navbar-toggler div { | |
215 | font-family: 'Ubuntu', sans-serif; | |
216 | font-size: 1rem; | |
217 | display: inline-block; | |
b3af5d9b S |
218 | position: relative; |
219 | top: -4px; | |
ccd81281 S |
220 | } |
221 | ||
97ed546d | 222 | .btn { |
22cfab2d | 223 | height: 36px; |
97ed546d | 224 | text-transform: uppercase; |
9ce2074c S |
225 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25); |
226 | transition: box-shadow .25s ease-in-out; | |
227 | &:hover { | |
228 | box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25); | |
229 | transition: box-shadow .25s ease-in-out; | |
230 | } | |
22cfab2d S |
231 | @include media-breakpoint-down(sm) { |
232 | font-size: .875rem; | |
9ce2074c | 233 | } |
97ed546d S |
234 | } |
235 | ||
69a9b33d S |
236 | .btn-outline-primary, |
237 | .btn-outline-secondary { | |
238 | transition: background-color .25s ease-in-out; | |
239 | &:hover { | |
240 | transition: background-color .25s ease-in-out; | |
241 | } | |
242 | } | |
243 | ||
1e5bc9c9 | 244 | .btn-lg { |
22cfab2d | 245 | height: 48px; |
1e5bc9c9 | 246 | margin: 0 24px; |
22cfab2d S |
247 | @include media-breakpoint-down(sm) { |
248 | height: 36px; | |
69a9b33d | 249 | margin: 0 8px; |
22cfab2d S |
250 | padding: 1rem; |
251 | font-size: .875rem; | |
252 | line-height: 0; | |
69a9b33d S |
253 | } |
254 | } | |
255 | ||
efb8b657 S |
256 | .btn-md { |
257 | font-size: 0.875rem; | |
258 | line-height: 1.25rem; | |
259 | padding: .4rem 1rem .5rem 1rem; | |
260 | } | |
261 | ||
b6d1f3b7 | 262 | .btn-block { |
22cfab2d | 263 | margin: 0 0 1.5rem 0; |
ccd81281 | 264 | @include media-breakpoint-up(md) { |
22cfab2d S |
265 | margin: 0 0 2rem 0; |
266 | } | |
7a9f7ff6 | 267 | @include media-breakpoint-down(xs) { |
22cfab2d S |
268 | font-size: .875rem; |
269 | line-height: 0; | |
ccd81281 | 270 | } |
b6d1f3b7 S |
271 | } |
272 | ||
848a7d41 S |
273 | button:focus { |
274 | outline: none; | |
275 | } | |
276 | ||
22cfab2d | 277 | // Top Navigation |
1e5bc9c9 S |
278 | .fixed-top { |
279 | transition: background-color 700ms linear; | |
69a9b33d S |
280 | .navbar { |
281 | width: 100%; | |
22cfab2d S |
282 | @include media-breakpoint-down(md) { |
283 | padding: .5rem 0; | |
284 | } | |
285 | .navbar-toggler-left { | |
286 | left: -1rem; | |
287 | } | |
69a9b33d S |
288 | } |
289 | .navbar-brand { | |
290 | opacity: 0; | |
291 | transition: opacity 700ms linear; | |
292 | @include media-breakpoint-up(lg) { | |
293 | opacity: 1; | |
294 | } | |
295 | } | |
1e5bc9c9 S |
296 | } |
297 | ||
298 | .scrolled { | |
299 | background-color: rgba(255, 255, 255, .96); | |
69a9b33d S |
300 | .navbar-brand { |
301 | opacity: 1; | |
302 | transition: opacity 700ms linear; | |
303 | } | |
1e5bc9c9 S |
304 | } |
305 | ||
ccd81281 S |
306 | .menu-text.hidden { |
307 | display: none; | |
308 | visibility: hidden; | |
309 | } | |
310 | ||
1e5bc9c9 S |
311 | .navbar { |
312 | a { | |
313 | color: $blue-grey-900; | |
314 | } | |
b6d1f3b7 S |
315 | .btn { |
316 | margin-top: .15rem; | |
317 | } | |
1e5bc9c9 S |
318 | } |
319 | ||
c60d28da S |
320 | a.nav-link { |
321 | padding-bottom: 30px; | |
322 | display: block; | |
323 | position: relative; | |
324 | &:after { | |
325 | content: ""; | |
326 | border-bottom: 2px solid $red_900; | |
327 | position: absolute; | |
328 | transform: scaleX(0); | |
329 | width: 100%; | |
330 | left: 0; | |
331 | padding: inherit; | |
81747382 | 332 | transition: transform .3s ease-out, color .3s ease-out; |
c60d28da S |
333 | } |
334 | } | |
335 | ||
81747382 S |
336 | a.nav-link:hover { |
337 | color: $red_900; | |
338 | } | |
339 | ||
c60d28da S |
340 | a.nav-link:hover:after { |
341 | transform: scaleX(1); | |
342 | } | |
343 | ||
97ed546d | 344 | .navbar-brand { |
ccd81281 S |
345 | font-size: 1.25rem; |
346 | @include media-breakpoint-up(sm) { | |
347 | font-size: 2rem; | |
348 | } | |
97ed546d | 349 | font-weight: 300; |
22cfab2d S |
350 | strong { |
351 | font-weight: 900; | |
352 | } | |
97ed546d S |
353 | img { |
354 | margin-right: 1rem; | |
355 | transform: translateY(-5px); | |
356 | } | |
357 | } | |
358 | ||
22cfab2d | 359 | // Sections |
97ed546d S |
360 | section.intro { |
361 | min-height: 100vh; | |
362 | background-image: url('../img/header-background.jpg'); | |
363 | background-size: cover; | |
364 | background-attachment: fixed; | |
365 | background-position: center top; | |
366 | position: relative; | |
367 | .branding { | |
69a9b33d | 368 | padding-top: 6rem; |
7a9f7ff6 | 369 | @include media-breakpoint-up(sm) { |
69a9b33d S |
370 | padding-top: 192px; |
371 | } | |
97ed546d S |
372 | margin-bottom: 64px; |
373 | text-align: center; | |
374 | color: $blue-grey-600; | |
375 | h1 { | |
376 | font-weight: 300 !important; | |
377 | color: $blue-grey-900; | |
7a9f7ff6 | 378 | @include media-breakpoint-down(xs) { |
69a9b33d S |
379 | font-size: 4.5rem; |
380 | } | |
97ed546d S |
381 | strong { |
382 | font-weight: 700 !important; | |
383 | } | |
384 | } | |
385 | h1:before { | |
386 | content: ""; | |
69a9b33d S |
387 | height: 60px; |
388 | width: 76px; | |
97ed546d S |
389 | background-image: url('../img/ipfire-tux.png'); |
390 | background-repeat: no-repeat; | |
391 | background-position: center center; | |
392 | background-size: contain; | |
97ed546d S |
393 | display: inline-block; |
394 | position: relative; | |
69a9b33d | 395 | top: 4px; |
7a9f7ff6 | 396 | @include media-breakpoint-up(sm) { |
69a9b33d S |
397 | height: 120px; |
398 | width: 93px; | |
399 | margin-right: 32px; | |
400 | top: 8px; | |
401 | } | |
97ed546d S |
402 | } |
403 | } | |
97ed546d S |
404 | .page-scroll { |
405 | position: absolute; | |
406 | bottom: 48px; | |
97ed546d S |
407 | left: 50%; |
408 | transform: translateX(-50%); | |
409 | .btn { | |
ac8ab589 S |
410 | width: 36px; |
411 | height: 36px; | |
97ed546d | 412 | fill: $red_900; |
7a9f7ff6 | 413 | @include media-breakpoint-up(sm) { |
69a9b33d S |
414 | width: 64px; |
415 | height: 64px; | |
416 | } | |
a6a4d1cf S |
417 | &:hover .i_arrow_down { |
418 | fill: white; | |
419 | } | |
97ed546d S |
420 | } |
421 | } | |
1e5bc9c9 S |
422 | } |
423 | ||
424 | section.content-section { | |
6a63d20a | 425 | padding: 3rem 0; |
7a9f7ff6 | 426 | @include media-breakpoint-up(sm) { |
22cfab2d | 427 | padding: 72px 0; |
ccd81281 | 428 | } |
1e5bc9c9 S |
429 | } |
430 | ||
22cfab2d S |
431 | .feature_icons { |
432 | width: 40px; | |
433 | height: 100%; | |
434 | float: left; | |
435 | margin-right: .75rem; | |
1e5bc9c9 S |
436 | } |
437 | ||
b6d1f3b7 S |
438 | section#news, |
439 | footer { | |
22cfab2d S |
440 | background-color: rgba($blue-grey-900, .06); |
441 | } | |
442 | ||
443 | section#news { | |
444 | color: rgba($blue-grey-900, .6); | |
445 | h2 { | |
446 | color: $blue-grey-900; | |
447 | } | |
1e5bc9c9 S |
448 | } |
449 | ||
450 | section#wishlist { | |
451 | background-image: url('../img/wishlist-background.jpg'); | |
452 | background-size: cover; | |
453 | background-position: center center; | |
b6d1f3b7 S |
454 | } |
455 | ||
3d770ad7 S |
456 | .progress { |
457 | background-color: rgba(255, 255, 255, .2); | |
458 | } | |
459 | ||
22cfab2d S |
460 | .bg-progress { |
461 | background-image: linear-gradient(to right, $yellow-700, $amber-800); | |
462 | } | |
463 | ||
b6d1f3b7 S |
464 | section#fireinfo { |
465 | border-bottom: 1px solid rgba($blue-grey-900, .2); | |
466 | } | |
467 | ||
22cfab2d S |
468 | .circle { |
469 | position: relative; | |
470 | p.lead { | |
471 | color: $blue-grey-600; | |
472 | position: absolute; | |
473 | top: calc(50% - 1.25rem); | |
474 | width: 100%; | |
32efbb1f | 475 | font-size: 1.25em; |
22cfab2d | 476 | } |
b6d1f3b7 S |
477 | } |
478 | ||
7a9f7ff6 S |
479 | section#appliances { |
480 | padding-bottom: 48px; | |
481 | } | |
482 | ||
b6d1f3b7 S |
483 | footer { |
484 | padding: 3rem 0 0 0; | |
7a9f7ff6 S |
485 | @include media-breakpoint-down(md) { |
486 | padding-top: 31px; | |
487 | } | |
9ce2074c S |
488 | h4 { |
489 | margin-bottom: 1.25rem; | |
22cfab2d | 490 | color: rgba($blue-grey-900, .6); |
9ce2074c S |
491 | } |
492 | ul { | |
493 | li { | |
494 | font-size: $small-font-size; | |
495 | margin-bottom: .75rem; | |
496 | a { | |
22cfab2d | 497 | color: rgba($blue-grey-900, .6); |
9ce2074c S |
498 | text-decoration: none; |
499 | &:hover { | |
22cfab2d | 500 | color: $blue-grey-900; |
9ce2074c S |
501 | text-decoration: underline; |
502 | } | |
503 | } | |
504 | } | |
505 | } | |
506 | .btn-lg { | |
507 | margin-bottom: 2.75rem; | |
9ce2074c S |
508 | } |
509 | .btn-sm { | |
510 | box-shadow: none; | |
511 | &:hover { | |
512 | box-shadow: none; | |
513 | } | |
9ce2074c | 514 | } |
b6d1f3b7 S |
515 | } |
516 | ||
22cfab2d S |
517 | #copyright { |
518 | background-color: rgba($blue-grey-900, .06); | |
519 | padding: 1rem 0; | |
b6eb5162 S |
520 | } |
521 | ||
22cfab2d | 522 | // Animation |
22cfab2d | 523 | @keyframes scroll { |
eafb8738 | 524 | 0%, 100% { transform: translateY(30%); } |
efb8b657 | 525 | 50% { transform: translateY(50%); } |
97ed546d | 526 | } |