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