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