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