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