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