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