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