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 // Colors
  58 .amber-800 {
  59         color: $amber-800;
  60 }
  61
  62 // Fonts
  63 h1 {
  64         line-height: 3rem;
  65 }
  66
  67 h2 {
  68         line-height: 2.75rem;
  69 }
  70
  71 h3 {
  72         line-height: 2rem;
  73         @include media-breakpoint-down(sm) {
  74                 font-size: 1em;
  75         }
  76 }
  77
  78 h4 {
  79         font-weight: 500;
  80         line-height: 1.75rem;
  81         @include media-breakpoint-down(sm) {
  82                 font-size: 1em;
  83         }
  84 }
  85
  86 h5 {
  87         line-height: 1.5rem;
  88 }
  89
  90 p {
  91         line-height: 1.5rem;
  92         @include media-breakpoint-down(sm) {
  93                 font-size: .85em;
  94         }
  95         &.lead {
  96                 line-height: 2rem;
  97                 @include media-breakpoint-down(md) {
  98                         font-size: 1.5rem;
  99                         line-height: 2rem;
 100                 }
 101                 @include media-breakpoint-down(sm) {
 102                         font-size: 1rem;
 103                         line-height: 1.5rem;
 104                 }
 105         }
 106 }
 107
 108 .display-2 {
 109         margin-bottom: 4rem;
 110         @include media-breakpoint-down(md) {
 111                 font-size: 2.5rem;
 112                 line-height: 3.5rem;
 113                 margin-bottom: 3rem;
 114         }
 115         @include media-breakpoint-down(sm) {
 116                 font-size: 2rem;
 117                 line-height: 2.75rem;
 118         }
 119 }
 120
 121 .display-4 {
 122         @include media-breakpoint-down(xs) {
 123                 font-size: .875rem;
 124                 line-height: 1.25rem;
 125         }
 126 }
 127
 128 small {
 129         line-height: 1rem;
 130         @include media-breakpoint-down(sm) {
 131                 font-size: .75em;
 132         }
 133 }
 134
 135 .truncate {
 136   width: 100%;
 137   white-space: nowrap;
 138   overflow: hidden;
 139   text-overflow: ellipsis;
 140 }
 141
 142 // Images
 143 img {
 144         &.img-fluid {
 145                 width: 100%;
 146                 max-width: 100%;
 147                 height: auto;
 148         }
 149 }
 150
 151 // Icons
 152 .icon {
 153         width: 1.5rem;
 154         height: 1.5rem;
 155         fill: currentColor;
 156         vertical-align: -.15rem;
 157         overflow: hidden;
 158         margin-right: .5rem;
 159 }
 160
 161 .i_arrow_down {
 162         margin: 0;
 163         position: absolute;
 164         left: .75rem;
 165         top: -.25rem;
 166         animation: scroll 1.5s ease-in-out infinite;
 167         @include media-breakpoint-down(xs) {
 168                 width: 1.75rem !important;
 169                 height: 1.75rem !important;
 170                 left: .25rem;
 171                 top: -.5rem;
 172         }
 173 }
 174
 175 .i_lg {
 176         width: 2.5rem;
 177         height: 2.5rem;
 178         margin: 0;
 179         transform: translateY(-.35rem);
 180         fill: $red_900;
 181 }
 182
 183 .i_sm {
 184         vertical-align: top;
 185         transform: translateY(-.10rem);
 186 }
 187
 188 footer {
 189         .btn-toolbar .icon {
 190                 height: 2.25rem;
 191                 width: 2.25rem;
 192                 fill: rgba($blue-grey-900, .6);
 193         }
 194         .i_heart {
 195                 vertical-align: top;
 196                 transform: translateY(-.15rem);
 197                 @include media-breakpoint-down(sm) {
 198                         transform: translateY(-.75rem);
 199                 }
 200         }
 201 }
 202
 203 // Buttons
 204 .btn-red900 {
 205   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 206 }
 207 .btn-white {
 208   @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
 209 }
 210 .btn-bluegrey900 {
 211   @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
 212 }
 213
 214 button.navbar-toggler div {
 215         font-family: 'Ubuntu', sans-serif;
 216         font-size: 1rem;
 217         display: inline-block;
 218         position: relative;
 219         top: -4px;
 220 }
 221
 222 .btn {
 223         height: 36px;
 224         text-transform: uppercase;
 225         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
 226         transition: box-shadow .25s ease-in-out;
 227         &:hover {
 228                 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
 229                 transition: box-shadow .25s ease-in-out;
 230         }
 231         @include media-breakpoint-down(sm) {
 232                 font-size: .875rem;
 233         }
 234 }
 235
 236 .btn-outline-primary,
 237 .btn-outline-secondary {
 238         transition: background-color .25s ease-in-out;
 239         &:hover {
 240                 transition: background-color .25s ease-in-out;
 241         }
 242 }
 243
 244 .btn-lg {
 245         height: 48px;
 246         margin: 0 24px;
 247         @include media-breakpoint-down(sm) {
 248                 height: 36px;
 249                 margin: 0 8px;
 250                 padding: 1rem;
 251                 font-size: .875rem;
 252                 line-height: 0;
 253         }
 254 }
 255
 256 .btn-md {
 257         font-size: 0.875rem;
 258         line-height: 1.25rem;
 259         padding: .4rem 1rem .5rem 1rem;
 260 }
 261
 262 .btn-block {
 263         margin: 0 0 1.5rem 0;
 264         @include media-breakpoint-up(md) {
 265                 margin: 0 0 2rem 0;
 266         }
 267         @include media-breakpoint-down(xs) {
 268                 font-size: .875rem;
 269                 line-height: 0;
 270         }
 271 }
 272
 273 button:focus {
 274         outline: none;
 275 }
 276
 277 // Top Navigation
 278 .fixed-top {
 279         transition: background-color 700ms linear;
 280         .navbar {
 281                 width: 100%;
 282                 @include media-breakpoint-down(md) {
 283                         padding: .5rem 0;
 284                 }
 285                 .navbar-toggler-left {
 286                         left: -1rem;
 287                 }
 288         }
 289         .navbar-brand {
 290                 opacity: 0;
 291                 transition: opacity 700ms linear;
 292                 @include media-breakpoint-up(lg) {
 293                         opacity: 1;
 294                 }
 295         }
 296 }
 297
 298 .scrolled {
 299         background-color: rgba(255, 255, 255, .96);
 300         .navbar-brand {
 301                 opacity: 1;
 302                 transition: opacity 700ms linear;
 303         }
 304 }
 305
 306 .menu-text.hidden {
 307         display: none;
 308         visibility: hidden;
 309 }
 310
 311 .navbar {
 312         a {
 313                 color: $blue-grey-900;
 314         }
 315         .btn {
 316                 margin-top: .15rem;
 317         }
 318 }
 319
 320 a.nav-link {
 321         padding-bottom: 30px;
 322         display: block;
 323         position: relative;
 324         &:after {
 325                 content: "";
 326                 border-bottom: 2px solid $red_900;
 327                 position: absolute;
 328                 transform: scaleX(0);
 329                 width: 100%;
 330                 left: 0;
 331                 padding: inherit;
 332                 transition: transform .3s ease-out, color .3s ease-out;
 333         }
 334 }
 335
 336 a.nav-link:hover {
 337         color: $red_900;
 338 }
 339
 340 a.nav-link:hover:after {
 341         transform: scaleX(1);
 342 }
 343
 344 .navbar-brand {
 345         font-size: 1.25rem;
 346         @include media-breakpoint-up(sm) {
 347                 font-size: 2rem;
 348         }
 349         font-weight: 300;
 350         strong {
 351                 font-weight: 900;
 352         }
 353         img {
 354                 margin-right: 1rem;
 355                 transform: translateY(-5px);
 356         }
 357 }
 358
 359 // Sections
 360 section.intro {
 361         min-height: 100vh;
 362         background-image: url('../img/header-background.jpg');
 363         background-size: cover;
 364         background-attachment: fixed;
 365         background-position: center top;
 366         position: relative;
 367         .branding {
 368                 padding-top: 6rem;
 369                 @include media-breakpoint-up(sm) {
 370                         padding-top: 192px;
 371                 }
 372                 margin-bottom: 64px;
 373                 text-align: center;
 374                 color: $blue-grey-600;
 375                 h1 {
 376                         font-weight: 300 !important;
 377                         color: $blue-grey-900;
 378                         @include media-breakpoint-down(xs) {
 379                                 font-size: 4.5rem;
 380                         }
 381                         strong {
 382                                 font-weight: 700 !important;
 383                         }
 384                 }
 385                 h1:before {
 386                         content: "";
 387                         height: 60px;
 388                         width: 76px;
 389                         background-image: url('../img/ipfire-tux.png');
 390                         background-repeat: no-repeat;
 391                         background-position: center center;
 392                         background-size: contain;
 393                         display: inline-block;
 394                         position: relative;
 395                         top: 4px;
 396                         @include media-breakpoint-up(sm) {
 397                                 height: 120px;
 398                                 width: 93px;
 399                                 margin-right: 32px;
 400                                 top: 8px;
 401                         }
 402                 }
 403         }
 404         .page-scroll {
 405                 position: absolute;
 406                 bottom: 48px;
 407                 left: 50%;
 408                 transform: translateX(-50%);
 409                 .btn {
 410                         width: 36px;
 411                         height: 36px;
 412                         fill: $red_900;
 413                         @include media-breakpoint-up(sm) {
 414                                 width: 64px;
 415                                 height: 64px;
 416                         }
 417                         &:hover .i_arrow_down {
 418                                 fill: white;
 419                         }
 420                 }
 421         }
 422 }
 423
 424 section.content-section {
 425         padding: 3rem 0;
 426         @include media-breakpoint-up(sm) {
 427                 padding: 72px 0;
 428         }
 429 }
 430
 431 .feature_icons {
 432         width: 40px;
 433         height: 100%;
 434         float: left;
 435         margin-right: .75rem;
 436 }
 437
 438 section#news,
 439 footer {
 440         background-color: rgba($blue-grey-900, .06);
 441 }
 442
 443 section#news {
 444         color: rgba($blue-grey-900, .6);
 445         h2 {
 446                 color: $blue-grey-900;
 447         }
 448 }
 449
 450 section#wishlist {
 451         background-image: url('../img/wishlist-background.jpg');
 452         background-size: cover;
 453         background-position: center center;
 454 }
 455
 456 .progress {
 457         background-color: rgba(255, 255, 255, .2);
 458 }
 459
 460 .bg-progress {
 461         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 462 }
 463
 464 section#fireinfo {
 465         border-bottom: 1px solid rgba($blue-grey-900, .2);
 466 }
 467
 468 .circle {
 469         position: relative;
 470         p.lead {
 471                 color: $blue-grey-600;
 472                 position: absolute;
 473                 top: calc(50% - 1.25rem);
 474                 width: 100%;
 475                 font-size: 1.25em;
 476         }
 477 }
 478
 479 section#appliances {
 480         padding-bottom: 48px;
 481 }
 482
 483 footer {
 484         padding: 3rem 0 0 0;
 485         @include media-breakpoint-down(md) {
 486                 padding-top: 31px;
 487         }
 488         h4 {
 489                 margin-bottom: 1.25rem;
 490                 color: rgba($blue-grey-900, .6);
 491         }
 492         ul {
 493                 li {
 494                         font-size: $small-font-size;
 495                         margin-bottom: .75rem;
 496                         a {
 497                                 color: rgba($blue-grey-900, .6);
 498                                 text-decoration: none;
 499                                 &:hover {
 500                                         color: $blue-grey-900;
 501                                         text-decoration: underline;
 502                                 }
 503                         }
 504                 }
 505         }
 506         .btn-lg {
 507                 margin-bottom: 2.75rem;
 508         }
 509         .btn-sm {
 510                 box-shadow: none;
 511                 &:hover {
 512                         box-shadow: none;
 513                 }
 514         }
 515 }
 516
 517 #copyright {
 518         background-color: rgba($blue-grey-900, .06);
 519         padding: 1rem 0;
 520 }
 521
 522 // Animation
 523 @keyframes scroll {
 524   0%, 100%   { transform: translateY(30%); }
 525   50% { transform: translateY(50%); }
 526 }