3 // Use all Bootstrap modules that we want
4 @import "../bootstrap/scss/functions";
5 @import "../bootstrap/scss/variables";
6 @import "../bootstrap/scss/mixins";
7 @import "../bootstrap/scss/root";
8 @import "../bootstrap/scss/reboot";
9 @import "../bootstrap/scss/type";
10 @import "../bootstrap/scss/images";
11 @import "../bootstrap/scss/code";
12 @import "../bootstrap/scss/grid";
13 @import "../bootstrap/scss/tables";
14 @import "../bootstrap/scss/forms";
15 @import "../bootstrap/scss/buttons";
16 @import "../bootstrap/scss/transitions";
17 @import "../bootstrap/scss/dropdown";
18 @import "../bootstrap/scss/button-group";
19 @import "../bootstrap/scss/input-group";
20 @import "../bootstrap/scss/nav";
21 @import "../bootstrap/scss/navbar";
22 @import "../bootstrap/scss/card";
23 @import "../bootstrap/scss/pagination";
24 @import "../bootstrap/scss/badge";
25 @import "../bootstrap/scss/alert";
26 @import "../bootstrap/scss/progress";
27 @import "../bootstrap/scss/media";
28 @import "../bootstrap/scss/list-group";
29 @import "../bootstrap/scss/close";
30 @import "../bootstrap/scss/modal";
31 @import "../bootstrap/scss/utilities";
32 @import "../bootstrap/scss/print";
48 background-image: url("img/header-background.jpg");
49 background-position: center top;
50 background-repeat: no-repeat;
51 background-size: contain;
57 text-transform: uppercase;
88 box-shadow: $shadow-1;
93 color: $blue-grey-900;
97 border-left: 2px solid $link-color;
104 background-color: white;
105 box-shadow: $shadow-2;
107 transition: background-color 200ms linear;
112 color: $blue-grey-900;
115 border-bottom: 2px solid $link-color;
125 fill: rgba($blue-grey-900, .6);
129 transform: translateY(-.15rem);
130 @include media-breakpoint-down(sm) {
131 transform: translateY(-.75rem);
142 @include media-breakpoint-up(sm) {
159 @include media-breakpoint-down(xs) {
168 @include media-breakpoint-down(xs) {
178 background-image: url('img/ipfire-tux.png');
179 background-repeat: no-repeat;
180 background-position: center center;
181 background-size: contain;
182 display: inline-block;
186 @include media-breakpoint-up(sm) {
195 color: $blue-grey-600;
197 @include media-breakpoint-down(xs) {
205 section#news, section#support, footer {
206 background-color: rgba($blue-grey-900, .06);
210 color: rgba($blue-grey-900, .6);
214 border-bottom: 1px solid rgba($blue-grey-900, .2);
218 padding-bottom: 48px;
229 &.lightning-wire-labs {
230 h5:first-of-type a, a {
236 // Sidebar navigation
248 transform: translateX(-50%);
253 @include media-breakpoint-up(sm) {
257 &:hover .i_arrow_down {
267 margin-right: .75rem;
271 background-color: rgba(255, 255, 255, .2);
277 color: $blue-grey-600;
279 top: calc(50% - 18px);
284 .fixed-top + .blog-content {
287 @include media-breakpoint-up(lg) {
293 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
307 background-image: linear-gradient(to right, $red-900, $orange-a400);
308 margin: 40px auto 24px auto;
309 @include media-breakpoint-up(sm) {
310 margin: 56px auto 40px auto;
316 @include media-breakpoint-down(md) {
320 margin-bottom: 1.25rem;
321 color: rgba($blue-grey-900, .6);
328 margin-bottom: .75rem;
330 color: rgba($blue-grey-900, .6);
331 text-decoration: none;
333 color: $blue-grey-900;
334 text-decoration: underline;
340 margin-bottom: 2.75rem;
351 background-color: rgba($blue-grey-900, .06);
361 0%, 100% { transform: translateY(30%); }
362 50% { transform: translateY(50%); }