3 // Core variables and mixins
4 @import "../bootstrap/scss/functions";
5 @import "../bootstrap/scss/variables";
6 @import "../bootstrap/scss/mixins";
7 @import "../bootstrap/scss/reboot";
9 // @import "../bootstrap/scss/print";
12 @import "../bootstrap/scss/type";
13 //@import "../bootstrap/scss/images";
14 // @import "../bootstrap/scss/code";
15 @import "../bootstrap/scss/grid";
16 @import "../bootstrap/scss/tables";
17 @import "../bootstrap/scss/forms";
18 @import "../bootstrap/scss/buttons";
21 @import "../bootstrap/scss/transitions";
22 //@import "../bootstrap/scss/dropdown";
23 @import "../bootstrap/scss/button-group";
24 //@import "../bootstrap/scss/input-group";
25 //@import "../bootstrap/scss/custom-forms";
26 @import "../bootstrap/scss/nav";
27 @import "../bootstrap/scss/navbar";
28 //@import "../bootstrap/scss/card";
29 // @import "../bootstrap/scss/breadcrumb";
30 // @import "../bootstrap/scss/pagination";
31 @import "../bootstrap/scss/badge";
32 // @import "../bootstrap/scss/jumbotron";
33 // @import "../bootstrap/scss/alert";
34 @import "../bootstrap/scss/progress";
35 @import "../bootstrap/scss/media";
36 @import "../bootstrap/scss/list-group";
37 // @import "../bootstrap/scss/responsive-embed";
38 // @import "../bootstrap/scss/close";
40 // Components w/ JavaScript
41 // @import "../bootstrap/scss/modal";
42 // @import "../bootstrap/scss/tooltip";
43 // @import "../bootstrap/scss/popover";
44 // @import "../bootstrap/scss/carousel";
47 @import "../bootstrap/scss/utilities";
50 @import "photoswipe/main";
51 @import "photoswipe/default-skin/default-skin";
59 flex-direction: column;
77 border-color: $amber-800;
82 border-color: $green-600;
87 border-color: $red_900;
92 border-color: $blue-700;
96 color: $blue_grey_300;
100 background-color: $blue-grey-900;
104 background-color: $blue-grey-50;
121 fill: rgba($blue-grey-900, .6);
125 transform: translateY(-.15rem);
126 @include media-breakpoint-down(sm) {
127 transform: translateY(-.75rem);
136 background-image: url('img/header-background.jpg');
137 background-size: cover;
138 background-attachment: fixed;
139 background-position: center top;
143 @include media-breakpoint-up(sm) {
148 color: $blue-grey-600;
150 font-weight: 300 !important;
151 color: $blue-grey-900;
152 @include media-breakpoint-down(xs) {
158 font-weight: 700 !important;
165 background-image: url('img/ipfire-tux.png');
166 background-repeat: no-repeat;
167 background-position: center center;
168 background-size: contain;
169 display: inline-block;
172 @include media-breakpoint-up(sm) {
188 transform: translateX(-50%);
193 @include media-breakpoint-up(sm) {
197 &:hover .i_arrow_down {
203 section.content-section {
205 @include media-breakpoint-up(sm) {
214 margin-right: .75rem;
220 background-color: rgba($blue-grey-900, .06);
224 color: rgba($blue-grey-900, .6);
226 color: $blue-grey-900;
231 background-color: rgba(255, 255, 255, .2);
235 background-image: linear-gradient(to right, $yellow-700, $amber-800);
239 border-bottom: 1px solid rgba($blue-grey-900, .2);
245 color: $blue-grey-600;
247 top: calc(50% - 18px);
253 padding-bottom: 48px;
257 .fixed-top + .blog-content {
260 @include media-breakpoint-up(lg) {
266 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
280 background-image: linear-gradient(to right, $red-900, $orange-a400);
281 margin: 40px auto 24px auto;
282 @include media-breakpoint-up(sm) {
283 margin: 56px auto 40px auto;
289 @include media-breakpoint-down(md) {
293 margin-bottom: 1.25rem;
294 color: rgba($blue-grey-900, .6);
301 margin-bottom: .75rem;
303 color: rgba($blue-grey-900, .6);
304 text-decoration: none;
306 color: $blue-grey-900;
307 text-decoration: underline;
313 margin-bottom: 2.75rem;
324 background-color: rgba($blue-grey-900, .06);
334 0%, 100% { transform: translateY(30%); }
335 50% { transform: translateY(50%); }