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