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