1eb92eb843024ea4ef5e4e852b8689bd72647533
[people/shoehn/ipfire.org.git] / static / scss / style.scss
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";
20 //@import "bootstrap-4.0.0-alpha.6/scss/images";
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";
29 //@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
30 @import "bootstrap-4.0.0-alpha.6/scss/button-group";
31 //@import "bootstrap-4.0.0-alpha.6/scss/input-group";
32 //@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
33 @import "bootstrap-4.0.0-alpha.6/scss/nav";
34 @import "bootstrap-4.0.0-alpha.6/scss/navbar";
35 //@import "bootstrap-4.0.0-alpha.6/scss/card";
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";
40 // @import "bootstrap-4.0.0-alpha.6/scss/alert";
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";
44 // @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
45 // @import "bootstrap-4.0.0-alpha.6/scss/close";
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
54 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
55
56 // Lightbox
57 @import "photoswipe/main";
58 @import "photoswipe/default-skin/default-skin";
59
60 // Donation Box
61 @import "_donation";
62
63 body {
64         min-height: 100vh;
65         display: flex;
66         flex-direction: column;
67 }
68
69 .container {
70         width: 100%;
71         max-width: 1200px;
72         flex: 1;
73 }
74
75 // Custom stuff
76 @import '_fonts';
77 @import '_nav';
78 @import '_buttons';
79 @import '_icons';
80
81
82
83 // Colors
84 .amber-800 {
85         color: $amber-800;
86         border-color: $amber-800;
87 }
88
89 .green-600 {
90         color: $green-600;
91         border-color: $green-600;
92 }
93
94 .red-900 {
95         color: $red_900;
96         border-color: $red_900;
97 }
98
99 .blue-700{
100         color: $blue-700;
101         border-color: $blue-700;
102 }
103
104 .blue_grey_300 {
105         color: $blue_grey_300;
106 }
107
108 .bg-blue-grey-900 {
109         background-color: $blue-grey-900;
110 }
111
112 .bg-blue-grey-50 {
113         background-color: $blue-grey-50;
114 }
115
116 // Images
117 img {
118         &.img-fluid {
119                 width: 100%;
120                 max-width: 100%;
121                 height: auto;
122         }
123 }
124
125
126 footer {
127         .btn-toolbar .icon {
128                 height: 2.25rem;
129                 width: 2.25rem;
130                 fill: rgba($blue-grey-900, .6);
131         }
132         .i_heart {
133                 vertical-align: top;
134                 transform: translateY(-.15rem);
135                 @include media-breakpoint-down(sm) {
136                         transform: translateY(-.75rem);
137                 }
138         }
139 }
140
141
142 // Sections
143 section.intro {
144         min-height: 100vh;
145         background-image: url('../img/header-background.jpg');
146         background-size: cover;
147         background-attachment: fixed;
148         background-position: center top;
149         position: relative;
150         .branding {
151                 padding-top: 6rem;
152                 @include media-breakpoint-up(sm) {
153                         padding-top: 192px;
154                 }
155                 margin-bottom: 64px;
156                 text-align: center;
157                 color: $blue-grey-600;
158                 h1 {
159                         font-weight: 300 !important;
160                         color: $blue-grey-900;
161                         @include media-breakpoint-down(xs) {
162                                 font-size: 72px;
163                                 line-height: 88px;
164                                 margin-bottom: 0;
165                         }
166                         strong {
167                                 font-weight: 700 !important;
168                         }
169                 }
170                 h1:before {
171                         content: "";
172                         height: 60px;
173                         width: 76px;
174                         background-image: url('../img/ipfire-tux.png');
175                         background-repeat: no-repeat;
176                         background-position: center center;
177                         background-size: contain;
178                         display: inline-block;
179                         position: relative;
180                         top: 4px;
181                         @include media-breakpoint-up(sm) {
182                                 height: 120px;
183                                 width: 93px;
184                                 margin-right: 32px;
185                                 top: 8px;
186                         }
187                 }
188         }
189 }
190
191 .page-scroll {
192         display: block;
193         visibility: visible;
194         position: absolute;
195         bottom: 48px;
196         left: 50%;
197         transform: translateX(-50%);
198         .btn {
199                 width: 36px;
200                 height: 36px;
201                 fill: $red_900;
202                 @include media-breakpoint-up(sm) {
203                         width: 64px;
204                         height: 64px;
205                 }
206                 &:hover .i_arrow_down {
207                         fill: white;
208                 }
209         }
210 }
211
212 section.content-section {
213         padding: 3rem 0;
214         @include media-breakpoint-up(sm) {
215                 padding: 72px 0;
216         }
217 }
218
219 .feature_icons {
220         width: 40px;
221         height: 100%;
222         float: left;
223         margin-right: .75rem;
224 }
225
226 section#news,
227 section#support,
228 footer {
229         background-color: rgba($blue-grey-900, .06);
230 }
231
232 section#news {
233         color: rgba($blue-grey-900, .6);
234         h2 {
235                 color: $blue-grey-900;
236         }
237 }
238
239 section#wishlist {
240         background-image: url('../img/wishlist-background.jpg');
241         background-size: cover;
242         background-position: center center;
243 }
244
245 .progress {
246         background-color: rgba(255, 255, 255, .2);
247 }
248
249 .bg-progress {
250         background-image: linear-gradient(to right, $yellow-700, $amber-800);
251 }
252
253 section#fireinfo {
254         border-bottom: 1px solid rgba($blue-grey-900, .2);
255 }
256
257 .circle {
258         position: relative;
259         p.fireinfo_per {
260                 color: $blue-grey-600;
261                 position: absolute;
262                 top: calc(50% - 18px);
263                 width: 100%;
264         }
265 }
266
267 section#appliances {
268         padding-bottom: 48px;
269 }
270
271 .features-content {
272         padding-top: 88px;
273         margin-bottom: 40px;
274         @include media-breakpoint-up(lg) {
275                 padding-top: 161px;
276         }
277         .content {
278                 background: white;
279                 border-radius: 4px;
280                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
281                 padding: 40px 24px;
282                 position: relative;
283         }
284 }
285
286 .divider {
287         width: 128px;
288         height: 4px;
289         border-radius: 2px;
290         background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
291         margin: 40px auto 24px auto;
292         @include media-breakpoint-up(sm) {
293                 margin: 56px auto 40px auto;
294         }
295 }
296
297 footer {
298         padding: 3rem 0 0 0;
299         @include media-breakpoint-down(md) {
300                 padding-top: 31px;
301         }
302         h4 {
303                 margin-bottom: 1.25rem;
304                 color: rgba($blue-grey-900, .6);
305                 font-size: 20px;
306                 line-height: 28px;
307         }
308         ul {
309                 li {
310                         font-size: 14px;
311                         margin-bottom: .75rem;
312                         a {
313                                 color: rgba($blue-grey-900, .6);
314                                 text-decoration: none;
315                                 &:hover {
316                                         color: $blue-grey-900;
317                                         text-decoration: underline;
318                                 }
319                         }
320                 }
321         }
322         .btn-lg {
323                 margin-bottom: 2.75rem;
324         }
325         .btn-sm {
326                 box-shadow: none;
327                 &:hover {
328                         box-shadow: none;
329                 }
330         }
331 }
332
333 #copyright {
334         background-color: rgba($blue-grey-900, .06);
335         padding: 1rem 0;
336         p {
337                 font-size: 12px;
338                 line-height: 16px;
339         }
340 }
341
342 // Animation
343 @keyframes scroll {
344   0%, 100%   { transform: translateY(30%); }
345   50% { transform: translateY(50%); }
346 }