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 // Lightbox
  57 @import "photoswipe/main";
  58 @import "photoswipe/default-skin/default-skin";
  59
  60 body {
  61         min-height: 100vh;
  62         display: flex;
  63         flex-direction: column;
  64 }
  65
  66 .container {
  67         width: 100%;
  68         max-width: 1200px;
  69         flex: 1;
  70 }
  71
  72 // Custom stuff
  73 @import '_fonts';
  74 @import '_nav';
  75 @import '_buttons';
  76 @import '_icons';
  77
  78
  79
  80 // Colors
  81 .amber-800 {
  82         color: $amber-800;
  83         border-color: $amber-800;
  84 }
  85
  86 .green-600 {
  87         color: $green-600;
  88         border-color: $green-600;
  89 }
  90
  91 .red-900 {
  92         color: $red_900;
  93         border-color: $red_900;
  94 }
  95
  96 .blue-700{
  97         color: $blue-700;
  98         border-color: $blue-700;
  99 }
 100
 101 // Images
 102 img {
 103         &.img-fluid {
 104                 width: 100%;
 105                 max-width: 100%;
 106                 height: auto;
 107         }
 108 }
 109
 110
 111 footer {
 112         .btn-toolbar .icon {
 113                 height: 2.25rem;
 114                 width: 2.25rem;
 115                 fill: rgba($blue-grey-900, .6);
 116         }
 117         .i_heart {
 118                 vertical-align: top;
 119                 transform: translateY(-.15rem);
 120                 @include media-breakpoint-down(sm) {
 121                         transform: translateY(-.75rem);
 122                 }
 123         }
 124 }
 125
 126
 127 // Sections
 128 section.intro {
 129         min-height: 100vh;
 130         background-image: url('../img/header-background.jpg');
 131         background-size: cover;
 132         background-attachment: fixed;
 133         background-position: center top;
 134         position: relative;
 135         .branding {
 136                 padding-top: 6rem;
 137                 @include media-breakpoint-up(sm) {
 138                         padding-top: 192px;
 139                 }
 140                 margin-bottom: 64px;
 141                 text-align: center;
 142                 color: $blue-grey-600;
 143                 h1 {
 144                         font-weight: 300 !important;
 145                         color: $blue-grey-900;
 146                         @include media-breakpoint-down(xs) {
 147                                 font-size: 72px;
 148                                 line-height: 88px;
 149                                 margin-bottom: 0;
 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 }
 175
 176 .page-scroll {
 177         display: block;
 178         visibility: visible;
 179         position: absolute;
 180         bottom: 48px;
 181         left: 50%;
 182         transform: translateX(-50%);
 183         .btn {
 184                 width: 36px;
 185                 height: 36px;
 186                 fill: $red_900;
 187                 @include media-breakpoint-up(sm) {
 188                         width: 64px;
 189                         height: 64px;
 190                 }
 191                 &:hover .i_arrow_down {
 192                         fill: white;
 193                 }
 194         }
 195 }
 196
 197 section.content-section {
 198         padding: 3rem 0;
 199         @include media-breakpoint-up(sm) {
 200                 padding: 72px 0;
 201         }
 202 }
 203
 204 .feature_icons {
 205         width: 40px;
 206         height: 100%;
 207         float: left;
 208         margin-right: .75rem;
 209 }
 210
 211 section#news,
 212 section#support,
 213 footer {
 214         background-color: rgba($blue-grey-900, .06);
 215 }
 216
 217 section#news {
 218         color: rgba($blue-grey-900, .6);
 219         h2 {
 220                 color: $blue-grey-900;
 221         }
 222 }
 223
 224 section#wishlist {
 225         background-image: url('../img/wishlist-background.jpg');
 226         background-size: cover;
 227         background-position: center center;
 228 }
 229
 230 .progress {
 231         background-color: rgba(255, 255, 255, .2);
 232 }
 233
 234 .bg-progress {
 235         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 236 }
 237
 238 section#fireinfo {
 239         border-bottom: 1px solid rgba($blue-grey-900, .2);
 240 }
 241
 242 .circle {
 243         position: relative;
 244         p.fireinfo_per {
 245                 color: $blue-grey-600;
 246                 position: absolute;
 247                 top: calc(50% - 18px);
 248                 width: 100%;
 249         }
 250 }
 251
 252 section#appliances {
 253         padding-bottom: 48px;
 254 }
 255
 256 .features-content {
 257         padding-top: 88px;
 258         margin-bottom: 40px;
 259         @include media-breakpoint-up(lg) {
 260                 padding-top: 161px;
 261         }
 262         .content {
 263                 background: white;
 264                 border-radius: 4px;
 265                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 266                 padding: 40px 24px;
 267                 position: relative;
 268         }
 269 }
 270
 271 .divider {
 272         width: 128px;
 273         height: 4px;
 274         border-radius: 2px;
 275         background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
 276         margin: 40px auto 24px auto;
 277         @include media-breakpoint-up(sm) {
 278                 margin: 56px auto 40px auto;
 279         }
 280 }
 281
 282 footer {
 283         padding: 3rem 0 0 0;
 284         @include media-breakpoint-down(md) {
 285                 padding-top: 31px;
 286         }
 287         h4 {
 288                 margin-bottom: 1.25rem;
 289                 color: rgba($blue-grey-900, .6);
 290                 font-size: 20px;
 291                 line-height: 28px;
 292         }
 293         ul {
 294                 li {
 295                         font-size: 14px;
 296                         margin-bottom: .75rem;
 297                         a {
 298                                 color: rgba($blue-grey-900, .6);
 299                                 text-decoration: none;
 300                                 &:hover {
 301                                         color: $blue-grey-900;
 302                                         text-decoration: underline;
 303                                 }
 304                         }
 305                 }
 306         }
 307         .btn-lg {
 308                 margin-bottom: 2.75rem;
 309         }
 310         .btn-sm {
 311                 box-shadow: none;
 312                 &:hover {
 313                         box-shadow: none;
 314                 }
 315         }
 316 }
 317
 318 #copyright {
 319         background-color: rgba($blue-grey-900, .06);
 320         padding: 1rem 0;
 321         p {
 322                 font-size: 12px;
 323                 line-height: 16px;
 324         }
 325 }
 326
 327 // Animation
 328 @keyframes scroll {
 329   0%, 100%   { transform: translateY(30%); }
 330   50% { transform: translateY(50%); }
 331 }