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