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