]>
Commit | Line | Data |
---|---|---|
91e44d91 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"; | |
c2cbe16d | 20 | //@import "bootstrap-4.0.0-alpha.6/scss/images"; |
91e44d91 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"; | |
20df8773 | 29 | //@import "bootstrap-4.0.0-alpha.6/scss/dropdown"; |
91e44d91 | 30 | @import "bootstrap-4.0.0-alpha.6/scss/button-group"; |
20df8773 S |
31 | //@import "bootstrap-4.0.0-alpha.6/scss/input-group"; |
32 | //@import "bootstrap-4.0.0-alpha.6/scss/custom-forms"; | |
91e44d91 S |
33 | @import "bootstrap-4.0.0-alpha.6/scss/nav"; |
34 | @import "bootstrap-4.0.0-alpha.6/scss/navbar"; | |
20df8773 | 35 | //@import "bootstrap-4.0.0-alpha.6/scss/card"; |
91e44d91 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"; | |
1423222c | 40 | // @import "bootstrap-4.0.0-alpha.6/scss/alert"; |
91e44d91 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"; | |
1423222c S |
44 | // @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed"; |
45 | // @import "bootstrap-4.0.0-alpha.6/scss/close"; | |
91e44d91 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 | |
1423222c S |
54 | @import "bootstrap-4.0.0-alpha.6/scss/utilities"; |
55 | ||
5236a99a S |
56 | // Custom stuff |
57 | @import '_custom_nav'; | |
58 | @import '_buttons'; | |
59 | ||
c2cbe16d | 60 | |
8ef25aa4 | 61 | // Colors |
8ef25aa4 S |
62 | .amber-800 { |
63 | color: $amber-800; | |
64 | } | |
65 | ||
c2cbe16d | 66 | // Fonts |
c2cbe16d S |
67 | h1 { |
68 | line-height: 3rem; | |
69 | } | |
70 | ||
71 | h2 { | |
72 | line-height: 2.75rem; | |
73 | } | |
74 | ||
75 | h3 { | |
76 | line-height: 2rem; | |
8e18ac98 S |
77 | @include media-breakpoint-down(sm) { |
78 | font-size: 1em; | |
79 | } | |
c2cbe16d S |
80 | } |
81 | ||
d8c9a4d4 | 82 | h4 { |
609474e4 | 83 | font-weight: 500; |
c2cbe16d | 84 | line-height: 1.75rem; |
609474e4 S |
85 | @include media-breakpoint-down(sm) { |
86 | font-size: 1em; | |
87 | } | |
c2cbe16d S |
88 | } |
89 | ||
90 | h5 { | |
91 | line-height: 1.5rem; | |
92 | } | |
93 | ||
94 | p { | |
95 | line-height: 1.5rem; | |
8e18ac98 S |
96 | @include media-breakpoint-down(sm) { |
97 | font-size: .85em; | |
98 | } | |
c2cbe16d S |
99 | &.lead { |
100 | line-height: 2rem; | |
101 | @include media-breakpoint-down(md) { | |
102 | font-size: 1.5rem; | |
103 | line-height: 2rem; | |
104 | } | |
105 | @include media-breakpoint-down(sm) { | |
106 | font-size: 1rem; | |
107 | line-height: 1.5rem; | |
108 | } | |
109 | } | |
110 | } | |
111 | ||
112 | .display-2 { | |
113 | margin-bottom: 4rem; | |
114 | @include media-breakpoint-down(md) { | |
115 | font-size: 2.5rem; | |
116 | line-height: 3.5rem; | |
117 | margin-bottom: 3rem; | |
118 | } | |
119 | @include media-breakpoint-down(sm) { | |
120 | font-size: 2rem; | |
121 | line-height: 2.75rem; | |
122 | } | |
123 | } | |
124 | ||
125 | .display-4 { | |
8e18ac98 | 126 | @include media-breakpoint-down(xs) { |
c2cbe16d S |
127 | font-size: .875rem; |
128 | line-height: 1.25rem; | |
129 | } | |
130 | } | |
131 | ||
132 | small { | |
133 | line-height: 1rem; | |
8e18ac98 S |
134 | @include media-breakpoint-down(sm) { |
135 | font-size: .75em; | |
136 | } | |
c2cbe16d S |
137 | } |
138 | ||
139 | .truncate { | |
140 | width: 100%; | |
141 | white-space: nowrap; | |
142 | overflow: hidden; | |
143 | text-overflow: ellipsis; | |
144 | } | |
145 | ||
146 | // Images | |
147 | img { | |
148 | &.img-fluid { | |
149 | width: 100%; | |
150 | max-width: 100%; | |
151 | height: auto; | |
152 | } | |
153 | } | |
154 | ||
155 | // Icons | |
c2cbe16d S |
156 | .icon { |
157 | width: 1.5rem; | |
158 | height: 1.5rem; | |
159 | fill: currentColor; | |
160 | vertical-align: -.15rem; | |
161 | overflow: hidden; | |
162 | margin-right: .5rem; | |
163 | } | |
164 | ||
165 | .i_arrow_down { | |
166 | margin: 0; | |
fdae1aac S |
167 | position: absolute; |
168 | left: .75rem; | |
169 | top: -.25rem; | |
61eaa9b2 | 170 | animation: scroll 1.5s ease-in-out infinite; |
8e18ac98 | 171 | @include media-breakpoint-down(xs) { |
609474e4 S |
172 | width: 1.75rem !important; |
173 | height: 1.75rem !important; | |
174 | left: .25rem; | |
175 | top: -.5rem; | |
fdae1aac | 176 | } |
c2cbe16d S |
177 | } |
178 | ||
179 | .i_lg { | |
180 | width: 2.5rem; | |
181 | height: 2.5rem; | |
182 | margin: 0; | |
fdae1aac | 183 | transform: translateY(-.35rem); |
c2cbe16d S |
184 | fill: $red_900; |
185 | } | |
186 | ||
187 | .i_sm { | |
fdae1aac S |
188 | vertical-align: top; |
189 | transform: translateY(-.10rem); | |
c2cbe16d S |
190 | } |
191 | ||
192 | footer { | |
193 | .btn-toolbar .icon { | |
fdae1aac S |
194 | height: 2.25rem; |
195 | width: 2.25rem; | |
c2cbe16d S |
196 | fill: rgba($blue-grey-900, .6); |
197 | } | |
198 | .i_heart { | |
fdae1aac S |
199 | vertical-align: top; |
200 | transform: translateY(-.15rem); | |
201 | @include media-breakpoint-down(sm) { | |
202 | transform: translateY(-.75rem); | |
203 | } | |
c2cbe16d S |
204 | } |
205 | } | |
206 | ||
1423222c | 207 | |
c2cbe16d | 208 | // Sections |
1423222c S |
209 | section.intro { |
210 | min-height: 100vh; | |
211 | background-image: url('../img/header-background.jpg'); | |
212 | background-size: cover; | |
213 | background-attachment: fixed; | |
214 | background-position: center top; | |
215 | position: relative; | |
216 | .branding { | |
82468973 | 217 | padding-top: 6rem; |
8e18ac98 | 218 | @include media-breakpoint-up(sm) { |
82468973 S |
219 | padding-top: 192px; |
220 | } | |
1423222c S |
221 | margin-bottom: 64px; |
222 | text-align: center; | |
223 | color: $blue-grey-600; | |
224 | h1 { | |
225 | font-weight: 300 !important; | |
226 | color: $blue-grey-900; | |
8e18ac98 | 227 | @include media-breakpoint-down(xs) { |
82468973 S |
228 | font-size: 4.5rem; |
229 | } | |
1423222c S |
230 | strong { |
231 | font-weight: 700 !important; | |
232 | } | |
233 | } | |
234 | h1:before { | |
235 | content: ""; | |
82468973 S |
236 | height: 60px; |
237 | width: 76px; | |
1423222c S |
238 | background-image: url('../img/ipfire-tux.png'); |
239 | background-repeat: no-repeat; | |
240 | background-position: center center; | |
241 | background-size: contain; | |
1423222c S |
242 | display: inline-block; |
243 | position: relative; | |
82468973 | 244 | top: 4px; |
8e18ac98 | 245 | @include media-breakpoint-up(sm) { |
82468973 S |
246 | height: 120px; |
247 | width: 93px; | |
248 | margin-right: 32px; | |
249 | top: 8px; | |
250 | } | |
1423222c S |
251 | } |
252 | } | |
1423222c S |
253 | .page-scroll { |
254 | position: absolute; | |
255 | bottom: 48px; | |
1423222c S |
256 | left: 50%; |
257 | transform: translateX(-50%); | |
258 | .btn { | |
f5d7f117 S |
259 | width: 36px; |
260 | height: 36px; | |
1423222c | 261 | fill: $red_900; |
8e18ac98 | 262 | @include media-breakpoint-up(sm) { |
82468973 S |
263 | width: 64px; |
264 | height: 64px; | |
265 | } | |
8ef25aa4 S |
266 | &:hover .i_arrow_down { |
267 | fill: white; | |
268 | } | |
1423222c S |
269 | } |
270 | } | |
4b4334da S |
271 | } |
272 | ||
273 | section.content-section { | |
e2d13261 | 274 | padding: 3rem 0; |
8e18ac98 | 275 | @include media-breakpoint-up(sm) { |
c2cbe16d | 276 | padding: 72px 0; |
d8c9a4d4 | 277 | } |
4b4334da S |
278 | } |
279 | ||
c2cbe16d S |
280 | .feature_icons { |
281 | width: 40px; | |
282 | height: 100%; | |
283 | float: left; | |
284 | margin-right: .75rem; | |
4b4334da S |
285 | } |
286 | ||
20df8773 S |
287 | section#news, |
288 | footer { | |
c2cbe16d S |
289 | background-color: rgba($blue-grey-900, .06); |
290 | } | |
291 | ||
292 | section#news { | |
293 | color: rgba($blue-grey-900, .6); | |
294 | h2 { | |
295 | color: $blue-grey-900; | |
296 | } | |
4b4334da S |
297 | } |
298 | ||
299 | section#wishlist { | |
300 | background-image: url('../img/wishlist-background.jpg'); | |
301 | background-size: cover; | |
302 | background-position: center center; | |
20df8773 S |
303 | } |
304 | ||
61975d93 S |
305 | .progress { |
306 | background-color: rgba(255, 255, 255, .2); | |
307 | } | |
308 | ||
c2cbe16d S |
309 | .bg-progress { |
310 | background-image: linear-gradient(to right, $yellow-700, $amber-800); | |
311 | } | |
312 | ||
20df8773 S |
313 | section#fireinfo { |
314 | border-bottom: 1px solid rgba($blue-grey-900, .2); | |
315 | } | |
316 | ||
c2cbe16d S |
317 | .circle { |
318 | position: relative; | |
319 | p.lead { | |
320 | color: $blue-grey-600; | |
321 | position: absolute; | |
322 | top: calc(50% - 1.25rem); | |
323 | width: 100%; | |
609474e4 | 324 | font-size: 1.25em; |
c2cbe16d | 325 | } |
20df8773 S |
326 | } |
327 | ||
8e18ac98 S |
328 | section#appliances { |
329 | padding-bottom: 48px; | |
330 | } | |
331 | ||
20df8773 S |
332 | footer { |
333 | padding: 3rem 0 0 0; | |
8e18ac98 S |
334 | @include media-breakpoint-down(md) { |
335 | padding-top: 31px; | |
336 | } | |
6aa3b1ec S |
337 | h4 { |
338 | margin-bottom: 1.25rem; | |
c2cbe16d | 339 | color: rgba($blue-grey-900, .6); |
6aa3b1ec S |
340 | } |
341 | ul { | |
342 | li { | |
343 | font-size: $small-font-size; | |
344 | margin-bottom: .75rem; | |
345 | a { | |
c2cbe16d | 346 | color: rgba($blue-grey-900, .6); |
6aa3b1ec S |
347 | text-decoration: none; |
348 | &:hover { | |
c2cbe16d | 349 | color: $blue-grey-900; |
6aa3b1ec S |
350 | text-decoration: underline; |
351 | } | |
352 | } | |
353 | } | |
354 | } | |
355 | .btn-lg { | |
356 | margin-bottom: 2.75rem; | |
6aa3b1ec S |
357 | } |
358 | .btn-sm { | |
359 | box-shadow: none; | |
360 | &:hover { | |
361 | box-shadow: none; | |
362 | } | |
6aa3b1ec | 363 | } |
20df8773 S |
364 | } |
365 | ||
c2cbe16d S |
366 | #copyright { |
367 | background-color: rgba($blue-grey-900, .06); | |
368 | padding: 1rem 0; | |
ac7f3ec6 S |
369 | } |
370 | ||
c2cbe16d | 371 | // Animation |
c2cbe16d | 372 | @keyframes scroll { |
61eaa9b2 | 373 | 0%, 100% { transform: translateY(30%); } |
fdae1aac | 374 | 50% { transform: translateY(50%); } |
1423222c | 375 | } |