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 .btn-block {
  65         margin: 0 0 2rem 0;
  66 }
  67
  68 .fixed-top {
  69         transition: background-color 700ms linear;
  70 }
  71
  72 .scrolled {
  73         background-color: rgba(255, 255, 255, .96);
  74 }
  75
  76 .navbar {
  77         a {
  78                 color: $blue-grey-900;
  79         }
  80         .btn {
  81                 margin-top: .15rem;
  82         }
  83 }
  84
  85 .navbar-brand {
  86         font-size: 2rem;
  87         font-weight: 300;
  88         img {
  89                 margin-right: 1rem;
  90                 transform: translateY(-5px);
  91         }
  92 }
  93
  94 .display-2 {
  95         margin-bottom: 4rem;
  96 }
  97
  98 .bg-progress {
  99         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 100 }
 101
 102 section.intro {
 103         min-height: 100vh;
 104         background-image: url('../img/header-background.jpg');
 105         background-size: cover;
 106         background-attachment: fixed;
 107         background-position: center top;
 108         position: relative;
 109         .branding {
 110                 padding-top: 192px;
 111                 margin-bottom: 64px;
 112                 text-align: center;
 113                 color: $blue-grey-600;
 114                 h1 {
 115                         font-weight: 300 !important;
 116                         color: $blue-grey-900;
 117                         strong {
 118                                 font-weight: 700 !important;
 119                         }
 120                 }
 121                 h1:before {
 122                         content: "";
 123                         height: 120px;
 124                         width: 93px;
 125                         background-image: url('../img/ipfire-tux.png');
 126                         background-repeat: no-repeat;
 127                         background-position: center center;
 128                         background-size: contain;
 129                         margin-right: 32px;
 130                         display: inline-block;
 131                         position: relative;
 132                         top: 8px;
 133                 }
 134         }
 135         .page-scroll {
 136                 position: absolute;
 137                 bottom: 48px;
 138                 width: 66px;
 139                 left: 50%;
 140                 transform: translateX(-50%);
 141                 .btn {
 142                         width: 64px;
 143                         height: 64px;
 144                         fill: $red_900;
 145                         &:hover {
 146                                 fill: white;
 147                         }
 148                         svg {
 149                                 width: 24px;
 150                                 height: auto;
 151                                 position: absolute;
 152                                 top: 50%;
 153                                 transform: translate(-50%, -60%);
 154                                 animation: scroll 3s infinite;
 155                         }
 156                 }
 157         }
 158 }
 159
 160 section.content-section {
 161         padding: 96px 0;
 162 }
 163
 164 section#features,
 165 section#appliances,
 166 section#fireinfo {
 167         background-color: $blue-grey-50;
 168 }
 169
 170 section#news,
 171 footer {
 172         background-color: rgba($blue-grey-900, .2);
 173 }
 174
 175 section#wishlist {
 176         background-image: url('../img/wishlist-background.jpg');
 177         background-size: cover;
 178         background-position: center center;
 179 }
 180
 181 section#fireinfo {
 182         border-bottom: 1px solid rgba($blue-grey-900, .2);
 183 }
 184
 185 #copyright {
 186         background-color: rgba($blue-grey-900, .3);
 187         padding: 1rem 0;
 188 }
 189
 190 footer {
 191         padding: 3rem 0 0 0;
 192 }
 193
 194 .feature_icons {
 195         width: 40px;
 196         height: 100%;
 197         float: left;
 198         margin-right: .5rem;
 199         svg {
 200                 width: 32px;
 201                 height: auto;
 202                 transform: translateY(-4px);
 203                 fill: $red_900;
 204         }
 205 }
 206
 207 @keyframes scroll {
 208   0%   { transform: translate(-50%, -60%); }
 209   50% { transform: translate(-50%, -30%); }
 210   100% { transform: translate(-50%, -60%); }
 211 }
 212
 213 .donate small {
 214         display: inline-block;
 215         transform: translateY(-2px);
 216         &:before {
 217                 content: "";
 218                 width: 20px;
 219                 height: 19px;
 220                 margin-right: 8px;
 221                 display: inline-block;
 222                 background-image: url('../img/icons/icon-heart-filled-white.svg');
 223                 background-size: cover;
 224                 transform: translateY(5px);
 225         }
 226 }
 227
 228 .btn-red900 {
 229   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 230 }