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 .progress {
 240         background-color: rgba(255, 255, 255, .2);
 241 }
 242
 243 .bg-progress {
 244         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 245 }
 246
 247 section#fireinfo {
 248         border-bottom: 1px solid rgba($blue-grey-900, .2);
 249 }
 250
 251 .circle {
 252         position: relative;
 253         p.fireinfo_per {
 254                 color: $blue-grey-600;
 255                 position: absolute;
 256                 top: calc(50% - 18px);
 257                 width: 100%;
 258         }
 259 }
 260
 261 section#appliances {
 262         padding-bottom: 48px;
 263 }
 264
 265 .features-content,
 266 .fixed-top + .blog-content {
 267         padding-top: 88px;
 268         margin-bottom: 40px;
 269         @include media-breakpoint-up(lg) {
 270                 padding-top: 161px;
 271         }
 272         .content {
 273                 background: white;
 274                 border-radius: 4px;
 275                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 276                 padding: 40px 24px;
 277                 position: relative;
 278         }
 279 }
 280
 281 .blog-content {
 282         margin-bottom: 80px;
 283 }
 284
 285 .divider {
 286         width: 128px;
 287         height: 4px;
 288         border-radius: 2px;
 289         background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
 290         margin: 40px auto 24px auto;
 291         @include media-breakpoint-up(sm) {
 292                 margin: 56px auto 40px auto;
 293         }
 294 }
 295
 296 footer {
 297         padding: 3rem 0 0 0;
 298         @include media-breakpoint-down(md) {
 299                 padding-top: 31px;
 300         }
 301         h4 {
 302                 margin-bottom: 1.25rem;
 303                 color: rgba($blue-grey-900, .6);
 304                 font-size: 20px;
 305                 line-height: 28px;
 306         }
 307         ul {
 308                 li {
 309                         font-size: 14px;
 310                         margin-bottom: .75rem;
 311                         a {
 312                                 color: rgba($blue-grey-900, .6);
 313                                 text-decoration: none;
 314                                 &:hover {
 315                                         color: $blue-grey-900;
 316                                         text-decoration: underline;
 317                                 }
 318                         }
 319                 }
 320         }
 321         .btn-lg {
 322                 margin-bottom: 2.75rem;
 323         }
 324         .btn-sm {
 325                 box-shadow: none;
 326                 &:hover {
 327                         box-shadow: none;
 328                 }
 329         }
 330 }
 331
 332 #copyright {
 333         background-color: rgba($blue-grey-900, .06);
 334         padding: 1rem 0;
 335         p {
 336                 font-size: 12px;
 337                 line-height: 16px;
 338         }
 339 }
 340
 341 // Animation
 342 @keyframes scroll {
 343   0%, 100%   { transform: translateY(30%); }
 344   50% { transform: translateY(50%); }
 345 }