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
 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 3s infinite;
 158         @include media-breakpoint-down(sm) {
 159                 width: 2rem !important;
 160                 height: 2rem !important;
 161                 left: .15rem;
 162                 top: -.75rem;
 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
 196 .btn-red900 {
 197   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 198 }
 199 .btn-white {
 200   @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
 201 }
 202 .btn-bluegrey900 {
 203   @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
 204 }
 205
 206 button.navbar-toggler div {
 207         font-family: 'Ubuntu', sans-serif;
 208         font-size: 1rem;
 209         display: inline-block;
 210         position: relative;
 211         top: -4px;
 212 }
 213
 214 .btn {
 215         height: 36px;
 216         text-transform: uppercase;
 217         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
 218         transition: box-shadow .25s ease-in-out;
 219         &:hover {
 220                 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
 221                 transition: box-shadow .25s ease-in-out;
 222         }
 223         @include media-breakpoint-down(sm) {
 224                 font-size: .875rem;
 225         }
 226 }
 227
 228 .btn-outline-primary,
 229 .btn-outline-secondary {
 230         transition: background-color .25s ease-in-out;
 231         &:hover {
 232                 transition: background-color .25s ease-in-out;
 233         }
 234 }
 235
 236 .btn-lg {
 237         height: 48px;
 238         margin: 0 24px;
 239         @include media-breakpoint-down(sm) {
 240                 height: 36px;
 241                 margin: 0 8px;
 242                 padding: 1rem;
 243                 font-size: .875rem;
 244                 line-height: 0;
 245         }
 246 }
 247
 248 .btn-md {
 249         font-size: 0.875rem;
 250         line-height: 1.25rem;
 251         padding: .4rem 1rem .5rem 1rem;
 252 }
 253
 254 .btn-block {
 255         margin: 0 0 1.5rem 0;
 256         @include media-breakpoint-up(md) {
 257                 margin: 0 0 2rem 0;
 258         }
 259         @include media-breakpoint-down(sm) {
 260                 font-size: .875rem;
 261                 line-height: 0;
 262         }
 263 }
 264
 265 button:focus {
 266         outline: none;
 267 }
 268
 269 // Top Navigation
 270
 271 .fixed-top {
 272         transition: background-color 700ms linear;
 273         .navbar {
 274                 width: 100%;
 275                 @include media-breakpoint-down(md) {
 276                         padding: .5rem 0;
 277                 }
 278                 .navbar-toggler-left {
 279                         left: -1rem;
 280                 }
 281         }
 282         .navbar-brand {
 283                 opacity: 0;
 284                 transition: opacity 700ms linear;
 285                 @include media-breakpoint-up(lg) {
 286                         opacity: 1;
 287                 }
 288         }
 289 }
 290
 291 .scrolled {
 292         background-color: rgba(255, 255, 255, .96);
 293         .navbar-brand {
 294                 opacity: 1;
 295                 transition: opacity 700ms linear;
 296         }
 297 }
 298
 299 .menu-text.hidden {
 300         display: none;
 301         visibility: hidden;
 302 }
 303
 304 .navbar {
 305         a {
 306                 color: $blue-grey-900;
 307         }
 308         .btn {
 309                 margin-top: .15rem;
 310         }
 311 }
 312
 313 .navbar-brand {
 314         font-size: 1.25rem;
 315         @include media-breakpoint-up(sm) {
 316                 font-size: 2rem;
 317         }
 318         font-weight: 300;
 319         strong {
 320                 font-weight: 900;
 321         }
 322         img {
 323                 margin-right: 1rem;
 324                 transform: translateY(-5px);
 325         }
 326 }
 327
 328 // Sections
 329
 330 section.intro {
 331         min-height: 100vh;
 332         background-image: url('../img/header-background.jpg');
 333         background-size: cover;
 334         background-attachment: fixed;
 335         background-position: center top;
 336         position: relative;
 337         .branding {
 338                 padding-top: 6rem;
 339                 @include media-breakpoint-up(md) {
 340                         padding-top: 192px;
 341                 }
 342                 margin-bottom: 64px;
 343                 text-align: center;
 344                 color: $blue-grey-600;
 345                 h1 {
 346                         font-weight: 300 !important;
 347                         color: $blue-grey-900;
 348                         @include media-breakpoint-down(sm) {
 349                                 font-size: 4.5rem;
 350                         }
 351                         strong {
 352                                 font-weight: 700 !important;
 353                         }
 354                 }
 355                 h1:before {
 356                         content: "";
 357                         height: 60px;
 358                         width: 76px;
 359                         background-image: url('../img/ipfire-tux.png');
 360                         background-repeat: no-repeat;
 361                         background-position: center center;
 362                         background-size: contain;
 363                         display: inline-block;
 364                         position: relative;
 365                         top: 4px;
 366                         @include media-breakpoint-up(md) {
 367                                 height: 120px;
 368                                 width: 93px;
 369                                 margin-right: 32px;
 370                                 top: 8px;
 371                         }
 372                 }
 373         }
 374         .page-scroll {
 375                 position: absolute;
 376                 bottom: 48px;
 377                 left: 50%;
 378                 transform: translateX(-50%);
 379                 .btn {
 380                         width: 32px;
 381                         height: 32px;
 382                         fill: $red_900;
 383                         @include media-breakpoint-up(md) {
 384                                 width: 64px;
 385                                 height: 64px;
 386                         }
 387                         &:hover .i_arrow_down {
 388                                 fill: white;
 389                         }
 390                 }
 391         }
 392 }
 393
 394 section.content-section {
 395         padding: 3rem 0;
 396         @include media-breakpoint-up(md) {
 397                 padding: 72px 0;
 398         }
 399 }
 400
 401 .feature_icons {
 402         width: 40px;
 403         height: 100%;
 404         float: left;
 405         margin-right: .75rem;
 406 }
 407
 408 section#news,
 409 footer {
 410         background-color: rgba($blue-grey-900, .06);
 411 }
 412
 413 section#news {
 414         color: rgba($blue-grey-900, .6);
 415         h2 {
 416                 color: $blue-grey-900;
 417         }
 418 }
 419
 420 section#wishlist {
 421         background-image: url('../img/wishlist-background.jpg');
 422         background-size: cover;
 423         background-position: center center;
 424 }
 425
 426 .bg-progress {
 427         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 428 }
 429
 430 section#fireinfo {
 431         border-bottom: 1px solid rgba($blue-grey-900, .2);
 432 }
 433
 434 .circle {
 435         position: relative;
 436         p.lead {
 437                 color: $blue-grey-600;
 438                 position: absolute;
 439                 top: calc(50% - 1.25rem);
 440                 width: 100%;
 441         }
 442 }
 443
 444 footer {
 445         padding: 3rem 0 0 0;
 446         h4 {
 447                 margin-bottom: 1.25rem;
 448                 color: rgba($blue-grey-900, .6);
 449         }
 450         ul {
 451                 li {
 452                         font-size: $small-font-size;
 453                         margin-bottom: .75rem;
 454                         a {
 455                                 color: rgba($blue-grey-900, .6);
 456                                 text-decoration: none;
 457                                 &:hover {
 458                                         color: $blue-grey-900;
 459                                         text-decoration: underline;
 460                                 }
 461                         }
 462                 }
 463         }
 464         .btn-lg {
 465                 margin-bottom: 2.75rem;
 466         }
 467         .btn-sm {
 468                 box-shadow: none;
 469                 &:hover {
 470                         box-shadow: none;
 471                 }
 472         }
 473 }
 474
 475 #copyright {
 476         background-color: rgba($blue-grey-900, .06);
 477         padding: 1rem 0;
 478 }
 479
 480 // Animation
 481
 482 @keyframes scroll {
 483   0%   { transform: translateY(30%); }
 484   50% { transform: translateY(50%); }
 485   100% { transform: translateY(30%); }
 486 }