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 .btn {
  57         text-transform: uppercase;
  58 }
  59
  60 .btn-lg {
  61         margin: 0 24px;
  62 }
  63
  64 .fixed-top {
  65         transition: background-color 700ms linear;
  66 }
  67
  68 .scrolled {
  69         background-color: rgba(255, 255, 255, .96);
  70 }
  71
  72 .navbar {
  73         a {
  74                 color: $blue-grey-900;
  75         }
  76 }
  77
  78 .navbar-brand {
  79         font-size: 2rem;
  80         font-weight: 300;
  81         img {
  82                 margin-right: 1rem;
  83                 transform: translateY(-5px);
  84         }
  85 }
  86
  87
  88 section.intro {
  89         min-height: 100vh;
  90         background-image: url('../img/header-background.jpg');
  91         background-size: cover;
  92         background-attachment: fixed;
  93         background-position: center top;
  94         position: relative;
  95         .branding {
  96                 padding-top: 192px;
  97                 margin-bottom: 64px;
  98                 text-align: center;
  99                 color: $blue-grey-600;
 100                 h1 {
 101                         font-weight: 300 !important;
 102                         color: $blue-grey-900;
 103                         strong {
 104                                 font-weight: 700 !important;
 105                         }
 106                 }
 107                 h1:before {
 108                         content: "";
 109                         height: 120px;
 110                         width: 93px;
 111                         background-image: url('../img/ipfire-tux.png');
 112                         background-repeat: no-repeat;
 113                         background-position: center center;
 114                         background-size: contain;
 115                         margin-right: 32px;
 116                         display: inline-block;
 117                         position: relative;
 118                         top: 8px;
 119                 }
 120         }
 121         .page-scroll {
 122                 position: absolute;
 123                 bottom: 48px;
 124                 width: 66px;
 125                 left: 50%;
 126                 transform: translateX(-50%);
 127                 .btn {
 128                         width: 64px;
 129                         height: 64px;
 130                         fill: $red_900;
 131                         &:hover {
 132                                 fill: white;
 133                         }
 134                         svg {
 135                                 width: 24px;
 136                                 height: auto;
 137                                 position: absolute;
 138                                 top: 50%;
 139                                 transform: translate(-50%, -50%);
 140                         }
 141                 }
 142         }
 143 }
 144
 145 section.content-section {
 146         padding: 96px 0;
 147 }
 148
 149 section#features,
 150 section#appliances {
 151         background-color: $blue-grey-50;
 152 }
 153
 154 section#news {
 155         background-color: rgba($blue-grey-900, .2);
 156 }
 157
 158 section#wishlist {
 159         background-image: url('../img/wishlist-background.jpg');
 160         background-size: cover;
 161         background-position: center center;
 162 }