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