new donation page with basic styling.
[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 .bg-blue-grey-900 {
105         background-color: $blue-grey-900;
106 }
107
108 .bg-blue-grey-50 {
109         background-color: $blue-grey-50;
110 }
111
112 // Images
113 img {
114         &.img-fluid {
115                 width: 100%;
116                 max-width: 100%;
117                 height: auto;
118         }
119 }
120
121
122 footer {
123         .btn-toolbar .icon {
124                 height: 2.25rem;
125                 width: 2.25rem;
126                 fill: rgba($blue-grey-900, .6);
127         }
128         .i_heart {
129                 vertical-align: top;
130                 transform: translateY(-.15rem);
131                 @include media-breakpoint-down(sm) {
132                         transform: translateY(-.75rem);
133                 }
134         }
135 }
136
137
138 // Sections
139 section.intro {
140         min-height: 100vh;
141         background-image: url('../img/header-background.jpg');
142         background-size: cover;
143         background-attachment: fixed;
144         background-position: center top;
145         position: relative;
146         .branding {
147                 padding-top: 6rem;
148                 @include media-breakpoint-up(sm) {
149                         padding-top: 192px;
150                 }
151                 margin-bottom: 64px;
152                 text-align: center;
153                 color: $blue-grey-600;
154                 h1 {
155                         font-weight: 300 !important;
156                         color: $blue-grey-900;
157                         @include media-breakpoint-down(xs) {
158                                 font-size: 72px;
159                                 line-height: 88px;
160                                 margin-bottom: 0;
161                         }
162                         strong {
163                                 font-weight: 700 !important;
164                         }
165                 }
166                 h1:before {
167                         content: "";
168                         height: 60px;
169                         width: 76px;
170                         background-image: url('../img/ipfire-tux.png');
171                         background-repeat: no-repeat;
172                         background-position: center center;
173                         background-size: contain;
174                         display: inline-block;
175                         position: relative;
176                         top: 4px;
177                         @include media-breakpoint-up(sm) {
178                                 height: 120px;
179                                 width: 93px;
180                                 margin-right: 32px;
181                                 top: 8px;
182                         }
183                 }
184         }
185 }
186
187 .page-scroll {
188         display: block;
189         visibility: visible;
190         position: absolute;
191         bottom: 48px;
192         left: 50%;
193         transform: translateX(-50%);
194         .btn {
195                 width: 36px;
196                 height: 36px;
197                 fill: $red_900;
198                 @include media-breakpoint-up(sm) {
199                         width: 64px;
200                         height: 64px;
201                 }
202                 &:hover .i_arrow_down {
203                         fill: white;
204                 }
205         }
206 }
207
208 section.content-section {
209         padding: 3rem 0;
210         @include media-breakpoint-up(sm) {
211                 padding: 72px 0;
212         }
213 }
214
215 .feature_icons {
216         width: 40px;
217         height: 100%;
218         float: left;
219         margin-right: .75rem;
220 }
221
222 section#news,
223 section#support,
224 footer {
225         background-color: rgba($blue-grey-900, .06);
226 }
227
228 section#news {
229         color: rgba($blue-grey-900, .6);
230         h2 {
231                 color: $blue-grey-900;
232         }
233 }
234
235 section#wishlist {
236         background-image: url('../img/wishlist-background.jpg');
237         background-size: cover;
238         background-position: center center;
239 }
240
241 .progress {
242         background-color: rgba(255, 255, 255, .2);
243 }
244
245 .bg-progress {
246         background-image: linear-gradient(to right, $yellow-700, $amber-800);
247 }
248
249 section#fireinfo {
250         border-bottom: 1px solid rgba($blue-grey-900, .2);
251 }
252
253 .circle {
254         position: relative;
255         p.fireinfo_per {
256                 color: $blue-grey-600;
257                 position: absolute;
258                 top: calc(50% - 18px);
259                 width: 100%;
260         }
261 }
262
263 section#appliances {
264         padding-bottom: 48px;
265 }
266
267 .features-content {
268         padding-top: 88px;
269         margin-bottom: 40px;
270         @include media-breakpoint-up(lg) {
271                 padding-top: 161px;
272         }
273         .content {
274                 background: white;
275                 border-radius: 4px;
276                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
277                 padding: 40px 24px;
278                 position: relative;
279         }
280 }
281
282 .divider {
283         width: 128px;
284         height: 4px;
285         border-radius: 2px;
286         background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
287         margin: 40px auto 24px auto;
288         @include media-breakpoint-up(sm) {
289                 margin: 56px auto 40px auto;
290         }
291 }
292
293 footer {
294         padding: 3rem 0 0 0;
295         @include media-breakpoint-down(md) {
296                 padding-top: 31px;
297         }
298         h4 {
299                 margin-bottom: 1.25rem;
300                 color: rgba($blue-grey-900, .6);
301                 font-size: 20px;
302                 line-height: 28px;
303         }
304         ul {
305                 li {
306                         font-size: 14px;
307                         margin-bottom: .75rem;
308                         a {
309                                 color: rgba($blue-grey-900, .6);
310                                 text-decoration: none;
311                                 &:hover {
312                                         color: $blue-grey-900;
313                                         text-decoration: underline;
314                                 }
315                         }
316                 }
317         }
318         .btn-lg {
319                 margin-bottom: 2.75rem;
320         }
321         .btn-sm {
322                 box-shadow: none;
323                 &:hover {
324                         box-shadow: none;
325                 }
326         }
327 }
328
329 #copyright {
330         background-color: rgba($blue-grey-900, .06);
331         padding: 1rem 0;
332         p {
333                 font-size: 12px;
334                 line-height: 16px;
335         }
336 }
337
338 // Animation
339 @keyframes scroll {
340   0%, 100%   { transform: translateY(30%); }
341   50% { transform: translateY(50%); }
342 }