]>
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 S |
57 | // Colors |
58 | ||
59 | .amber-800 { | |
60 | color: $amber-800; | |
61 | } | |
62 | ||
22cfab2d S |
63 | // Fonts |
64 | ||
65 | h1 { | |
66 | line-height: 3rem; | |
67 | } | |
68 | ||
69 | h2 { | |
70 | line-height: 2.75rem; | |
71 | } | |
72 | ||
73 | h3 { | |
74 | line-height: 2rem; | |
75 | } | |
76 | ||
ccd81281 S |
77 | h4 { |
78 | font-weight: 600; | |
22cfab2d S |
79 | line-height: 1.75rem; |
80 | } | |
81 | ||
82 | h5 { | |
83 | line-height: 1.5rem; | |
84 | } | |
85 | ||
86 | p { | |
87 | line-height: 1.5rem; | |
88 | &.lead { | |
89 | line-height: 2rem; | |
90 | @include media-breakpoint-down(md) { | |
91 | font-size: 1.5rem; | |
92 | line-height: 2rem; | |
93 | } | |
94 | @include media-breakpoint-down(sm) { | |
95 | font-size: 1rem; | |
96 | line-height: 1.5rem; | |
97 | } | |
98 | } | |
99 | } | |
100 | ||
101 | .display-2 { | |
102 | margin-bottom: 4rem; | |
103 | @include media-breakpoint-down(md) { | |
104 | font-size: 2.5rem; | |
105 | line-height: 3.5rem; | |
106 | margin-bottom: 3rem; | |
107 | } | |
108 | @include media-breakpoint-down(sm) { | |
109 | font-size: 2rem; | |
110 | line-height: 2.75rem; | |
111 | } | |
112 | } | |
113 | ||
114 | .display-4 { | |
115 | @include media-breakpoint-down(sm) { | |
116 | font-size: .875rem; | |
117 | line-height: 1.25rem; | |
118 | } | |
119 | } | |
120 | ||
121 | small { | |
122 | line-height: 1rem; | |
123 | } | |
124 | ||
125 | .truncate { | |
126 | width: 100%; | |
127 | white-space: nowrap; | |
128 | overflow: hidden; | |
129 | text-overflow: ellipsis; | |
130 | } | |
131 | ||
132 | // Images | |
133 | img { | |
134 | &.img-fluid { | |
135 | width: 100%; | |
136 | max-width: 100%; | |
137 | height: auto; | |
138 | } | |
139 | } | |
140 | ||
141 | // Icons | |
142 | ||
143 | .icon { | |
144 | width: 1.5rem; | |
145 | height: 1.5rem; | |
146 | fill: currentColor; | |
147 | vertical-align: -.15rem; | |
148 | overflow: hidden; | |
149 | margin-right: .5rem; | |
150 | } | |
151 | ||
152 | .i_arrow_down { | |
153 | margin: 0; | |
efb8b657 S |
154 | position: absolute; |
155 | left: .75rem; | |
156 | top: -.25rem; | |
22cfab2d | 157 | animation: scroll 3s infinite; |
efb8b657 S |
158 | @include media-breakpoint-down(sm) { |
159 | width: 2rem !important; | |
160 | height: 2rem !important; | |
161 | left: .15rem; | |
162 | top: -.75rem; | |
163 | } | |
22cfab2d S |
164 | } |
165 | ||
166 | .i_lg { | |
167 | width: 2.5rem; | |
168 | height: 2.5rem; | |
169 | margin: 0; | |
efb8b657 | 170 | transform: translateY(-.35rem); |
22cfab2d S |
171 | fill: $red_900; |
172 | } | |
173 | ||
174 | .i_sm { | |
efb8b657 S |
175 | vertical-align: top; |
176 | transform: translateY(-.10rem); | |
22cfab2d S |
177 | } |
178 | ||
179 | footer { | |
180 | .btn-toolbar .icon { | |
efb8b657 S |
181 | height: 2.25rem; |
182 | width: 2.25rem; | |
22cfab2d S |
183 | fill: rgba($blue-grey-900, .6); |
184 | } | |
185 | .i_heart { | |
efb8b657 S |
186 | vertical-align: top; |
187 | transform: translateY(-.15rem); | |
188 | @include media-breakpoint-down(sm) { | |
189 | transform: translateY(-.75rem); | |
190 | } | |
22cfab2d S |
191 | } |
192 | } | |
193 | ||
194 | // Buttons | |
195 | ||
196 | .btn-red900 { | |
197 | @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border); | |
198 | } | |
199 | .btn-white { | |
200 | @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border); | |
201 | } | |
202 | .btn-bluegrey900 { | |
203 | @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border); | |
ccd81281 S |
204 | } |
205 | ||
206 | button.navbar-toggler div { | |
207 | font-family: 'Ubuntu', sans-serif; | |
208 | font-size: 1rem; | |
209 | display: inline-block; | |
210 | margin-left: 12px; | |
211 | } | |
212 | ||
97ed546d | 213 | .btn { |
22cfab2d | 214 | height: 36px; |
97ed546d | 215 | text-transform: uppercase; |
9ce2074c S |
216 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25); |
217 | transition: box-shadow .25s ease-in-out; | |
218 | &:hover { | |
219 | box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25); | |
220 | transition: box-shadow .25s ease-in-out; | |
221 | } | |
22cfab2d S |
222 | @include media-breakpoint-down(sm) { |
223 | font-size: .875rem; | |
9ce2074c | 224 | } |
97ed546d S |
225 | } |
226 | ||
69a9b33d S |
227 | .btn-outline-primary, |
228 | .btn-outline-secondary { | |
229 | transition: background-color .25s ease-in-out; | |
230 | &:hover { | |
231 | transition: background-color .25s ease-in-out; | |
232 | } | |
233 | } | |
234 | ||
1e5bc9c9 | 235 | .btn-lg { |
22cfab2d | 236 | height: 48px; |
1e5bc9c9 | 237 | margin: 0 24px; |
22cfab2d S |
238 | @include media-breakpoint-down(sm) { |
239 | height: 36px; | |
69a9b33d | 240 | margin: 0 8px; |
22cfab2d S |
241 | padding: 1rem; |
242 | font-size: .875rem; | |
243 | line-height: 0; | |
69a9b33d S |
244 | } |
245 | } | |
246 | ||
efb8b657 S |
247 | .btn-md { |
248 | font-size: 0.875rem; | |
249 | line-height: 1.25rem; | |
250 | padding: .4rem 1rem .5rem 1rem; | |
251 | } | |
252 | ||
b6d1f3b7 | 253 | .btn-block { |
22cfab2d | 254 | margin: 0 0 1.5rem 0; |
ccd81281 | 255 | @include media-breakpoint-up(md) { |
22cfab2d S |
256 | margin: 0 0 2rem 0; |
257 | } | |
258 | @include media-breakpoint-down(sm) { | |
259 | font-size: .875rem; | |
260 | line-height: 0; | |
ccd81281 | 261 | } |
b6d1f3b7 S |
262 | } |
263 | ||
22cfab2d S |
264 | // Top Navigation |
265 | ||
1e5bc9c9 S |
266 | .fixed-top { |
267 | transition: background-color 700ms linear; | |
69a9b33d S |
268 | .navbar { |
269 | width: 100%; | |
22cfab2d S |
270 | @include media-breakpoint-down(md) { |
271 | padding: .5rem 0; | |
272 | } | |
273 | .navbar-toggler-left { | |
274 | left: -1rem; | |
275 | } | |
69a9b33d S |
276 | } |
277 | .navbar-brand { | |
278 | opacity: 0; | |
279 | transition: opacity 700ms linear; | |
280 | @include media-breakpoint-up(lg) { | |
281 | opacity: 1; | |
282 | } | |
283 | } | |
1e5bc9c9 S |
284 | } |
285 | ||
286 | .scrolled { | |
287 | background-color: rgba(255, 255, 255, .96); | |
69a9b33d S |
288 | .navbar-brand { |
289 | opacity: 1; | |
290 | transition: opacity 700ms linear; | |
291 | } | |
1e5bc9c9 S |
292 | } |
293 | ||
ccd81281 S |
294 | .menu-text.hidden { |
295 | display: none; | |
296 | visibility: hidden; | |
297 | } | |
298 | ||
1e5bc9c9 S |
299 | .navbar { |
300 | a { | |
301 | color: $blue-grey-900; | |
302 | } | |
b6d1f3b7 S |
303 | .btn { |
304 | margin-top: .15rem; | |
305 | } | |
1e5bc9c9 S |
306 | } |
307 | ||
97ed546d | 308 | .navbar-brand { |
ccd81281 S |
309 | font-size: 1.25rem; |
310 | @include media-breakpoint-up(sm) { | |
311 | font-size: 2rem; | |
312 | } | |
97ed546d | 313 | font-weight: 300; |
22cfab2d S |
314 | strong { |
315 | font-weight: 900; | |
316 | } | |
97ed546d S |
317 | img { |
318 | margin-right: 1rem; | |
319 | transform: translateY(-5px); | |
320 | } | |
321 | } | |
322 | ||
22cfab2d | 323 | // Sections |
97ed546d S |
324 | |
325 | section.intro { | |
326 | min-height: 100vh; | |
327 | background-image: url('../img/header-background.jpg'); | |
328 | background-size: cover; | |
329 | background-attachment: fixed; | |
330 | background-position: center top; | |
331 | position: relative; | |
332 | .branding { | |
69a9b33d S |
333 | padding-top: 6rem; |
334 | @include media-breakpoint-up(md) { | |
335 | padding-top: 192px; | |
336 | } | |
97ed546d S |
337 | margin-bottom: 64px; |
338 | text-align: center; | |
339 | color: $blue-grey-600; | |
340 | h1 { | |
341 | font-weight: 300 !important; | |
342 | color: $blue-grey-900; | |
22cfab2d | 343 | @include media-breakpoint-down(sm) { |
69a9b33d S |
344 | font-size: 4.5rem; |
345 | } | |
97ed546d S |
346 | strong { |
347 | font-weight: 700 !important; | |
348 | } | |
349 | } | |
350 | h1:before { | |
351 | content: ""; | |
69a9b33d S |
352 | height: 60px; |
353 | width: 76px; | |
97ed546d S |
354 | background-image: url('../img/ipfire-tux.png'); |
355 | background-repeat: no-repeat; | |
356 | background-position: center center; | |
357 | background-size: contain; | |
97ed546d S |
358 | display: inline-block; |
359 | position: relative; | |
69a9b33d S |
360 | top: 4px; |
361 | @include media-breakpoint-up(md) { | |
362 | height: 120px; | |
363 | width: 93px; | |
364 | margin-right: 32px; | |
365 | top: 8px; | |
366 | } | |
97ed546d S |
367 | } |
368 | } | |
97ed546d S |
369 | .page-scroll { |
370 | position: absolute; | |
371 | bottom: 48px; | |
97ed546d S |
372 | left: 50%; |
373 | transform: translateX(-50%); | |
374 | .btn { | |
69a9b33d S |
375 | width: 32px; |
376 | height: 32px; | |
97ed546d | 377 | fill: $red_900; |
69a9b33d S |
378 | @include media-breakpoint-up(md) { |
379 | width: 64px; | |
380 | height: 64px; | |
381 | } | |
a6a4d1cf S |
382 | &:hover .i_arrow_down { |
383 | fill: white; | |
384 | } | |
97ed546d S |
385 | } |
386 | } | |
1e5bc9c9 S |
387 | } |
388 | ||
389 | section.content-section { | |
6a63d20a | 390 | padding: 3rem 0; |
ccd81281 | 391 | @include media-breakpoint-up(md) { |
22cfab2d | 392 | padding: 72px 0; |
ccd81281 | 393 | } |
1e5bc9c9 S |
394 | } |
395 | ||
22cfab2d S |
396 | .feature_icons { |
397 | width: 40px; | |
398 | height: 100%; | |
399 | float: left; | |
400 | margin-right: .75rem; | |
1e5bc9c9 S |
401 | } |
402 | ||
b6d1f3b7 S |
403 | section#news, |
404 | footer { | |
22cfab2d S |
405 | background-color: rgba($blue-grey-900, .06); |
406 | } | |
407 | ||
408 | section#news { | |
409 | color: rgba($blue-grey-900, .6); | |
410 | h2 { | |
411 | color: $blue-grey-900; | |
412 | } | |
1e5bc9c9 S |
413 | } |
414 | ||
415 | section#wishlist { | |
416 | background-image: url('../img/wishlist-background.jpg'); | |
417 | background-size: cover; | |
418 | background-position: center center; | |
b6d1f3b7 S |
419 | } |
420 | ||
22cfab2d S |
421 | .bg-progress { |
422 | background-image: linear-gradient(to right, $yellow-700, $amber-800); | |
423 | } | |
424 | ||
b6d1f3b7 S |
425 | section#fireinfo { |
426 | border-bottom: 1px solid rgba($blue-grey-900, .2); | |
427 | } | |
428 | ||
22cfab2d S |
429 | .circle { |
430 | position: relative; | |
431 | p.lead { | |
432 | color: $blue-grey-600; | |
433 | position: absolute; | |
434 | top: calc(50% - 1.25rem); | |
435 | width: 100%; | |
436 | } | |
b6d1f3b7 S |
437 | } |
438 | ||
439 | footer { | |
440 | padding: 3rem 0 0 0; | |
9ce2074c S |
441 | h4 { |
442 | margin-bottom: 1.25rem; | |
22cfab2d | 443 | color: rgba($blue-grey-900, .6); |
9ce2074c S |
444 | } |
445 | ul { | |
446 | li { | |
447 | font-size: $small-font-size; | |
448 | margin-bottom: .75rem; | |
449 | a { | |
22cfab2d | 450 | color: rgba($blue-grey-900, .6); |
9ce2074c S |
451 | text-decoration: none; |
452 | &:hover { | |
22cfab2d | 453 | color: $blue-grey-900; |
9ce2074c S |
454 | text-decoration: underline; |
455 | } | |
456 | } | |
457 | } | |
458 | } | |
459 | .btn-lg { | |
460 | margin-bottom: 2.75rem; | |
9ce2074c S |
461 | } |
462 | .btn-sm { | |
463 | box-shadow: none; | |
464 | &:hover { | |
465 | box-shadow: none; | |
466 | } | |
9ce2074c | 467 | } |
b6d1f3b7 S |
468 | } |
469 | ||
22cfab2d S |
470 | #copyright { |
471 | background-color: rgba($blue-grey-900, .06); | |
472 | padding: 1rem 0; | |
b6eb5162 S |
473 | } |
474 | ||
22cfab2d | 475 | // Animation |
b6eb5162 | 476 | |
22cfab2d | 477 | @keyframes scroll { |
efb8b657 S |
478 | 0% { transform: translateY(30%); } |
479 | 50% { transform: translateY(50%); } | |
480 | 100% { transform: translateY(30%); } | |
97ed546d | 481 | } |