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 h4 {
  57         font-weight: 600;
  58 }
  59
  60 button.navbar-toggler div {
  61         font-family: 'Ubuntu', sans-serif;
  62         font-size: 1rem;
  63         display: inline-block;
  64         margin-left: 12px;
  65 }
  66
  67 .btn {
  68         text-transform: uppercase;
  69         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
  70         transition: box-shadow .25s ease-in-out;
  71         &:hover {
  72                 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
  73                 transition: box-shadow .25s ease-in-out;
  74         }
  75         svg {
  76                 margin-right: .75rem;
  77                 height: 17px;
  78                 width: auto;
  79                 transform: translateY(2px);
  80         }
  81 }
  82
  83 .btn-outline-primary,
  84 .btn-outline-secondary {
  85         transition: background-color .25s ease-in-out;
  86         &:hover {
  87                 transition: background-color .25s ease-in-out;
  88         }
  89 }
  90
  91 .btn-lg {
  92         margin: 0 24px;
  93         @include media-breakpoint-down(md) {
  94                 margin: 0 8px;
  95                 font-size: 14px;
  96         }
  97 }
  98
  99 .btn-sm small {
 100         display: inline-block;
 101         transform: translateY(-2px);
 102 }
 103
 104 .btn-block {
 105                 margin: 0 0 1.5rem 0;
 106         @include media-breakpoint-up(md) {
 107                 margin: 0 0 2rem 0;
 108         }
 109 }
 110
 111 .fixed-top {
 112         transition: background-color 700ms linear;
 113         .navbar {
 114                 width: 100%;
 115         }
 116         .navbar-brand {
 117                 opacity: 0;
 118                 transition: opacity 700ms linear;
 119                 @include media-breakpoint-up(lg) {
 120                         opacity: 1;
 121                 }
 122         }
 123 }
 124
 125 .scrolled {
 126         background-color: rgba(255, 255, 255, .96);
 127         .navbar-brand {
 128                 opacity: 1;
 129                 transition: opacity 700ms linear;
 130         }
 131 }
 132
 133 .menu-text.hidden {
 134         display: none;
 135         visibility: hidden;
 136 }
 137
 138 .navbar {
 139         a {
 140                 color: $blue-grey-900;
 141         }
 142         .btn {
 143                 margin-top: .15rem;
 144         }
 145 }
 146
 147 .navbar-brand {
 148         font-size: 1.25rem;
 149         @include media-breakpoint-up(sm) {
 150                 font-size: 2rem;
 151         }
 152         font-weight: 300;
 153         img {
 154                 margin-right: 1rem;
 155                 transform: translateY(-5px);
 156         }
 157 }
 158
 159 .display-2 {
 160         margin-bottom: 4rem;
 161         @include media-breakpoint-down(md) {
 162                 font-size: 32px;
 163         }
 164 }
 165
 166 .display-4 {
 167         @include media-breakpoint-down(md) {
 168                 font-size: 14px;
 169         }
 170 }
 171
 172 .bg-progress {
 173         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 174 }
 175
 176 section.intro {
 177         min-height: 100vh;
 178         background-image: url('../img/header-background.jpg');
 179         background-size: cover;
 180         background-attachment: fixed;
 181         background-position: center top;
 182         position: relative;
 183         .branding {
 184                 padding-top: 6rem;
 185                 @include media-breakpoint-up(md) {
 186                         padding-top: 192px;
 187                 }
 188                 margin-bottom: 64px;
 189                 text-align: center;
 190                 color: $blue-grey-600;
 191                 h1 {
 192                         font-weight: 300 !important;
 193                         color: $blue-grey-900;
 194                         @include media-breakpoint-down(md) {
 195                                 font-size: 4.5rem;
 196                         }
 197                         strong {
 198                                 font-weight: 700 !important;
 199                         }
 200                 }
 201                 h1:before {
 202                         content: "";
 203                         height: 60px;
 204                         width: 76px;
 205                         background-image: url('../img/ipfire-tux.png');
 206                         background-repeat: no-repeat;
 207                         background-position: center center;
 208                         background-size: contain;
 209                         display: inline-block;
 210                         position: relative;
 211                         top: 4px;
 212                         @include media-breakpoint-up(md) {
 213                                 height: 120px;
 214                                 width: 93px;
 215                                 margin-right: 32px;
 216                                 top: 8px;
 217                         }
 218                 }
 219         }
 220         .page-scroll {
 221                 position: absolute;
 222                 bottom: 48px;
 223                 left: 50%;
 224                 transform: translateX(-50%);
 225                 .btn {
 226                         width: 32px;
 227                         height: 32px;
 228                         fill: $red_900;
 229                         @include media-breakpoint-up(md) {
 230                                 width: 64px;
 231                                 height: 64px;
 232                         }
 233                         &:hover {
 234                                 fill: white;
 235                         }
 236                         svg {
 237                                 width: 12px;
 238                                 height: auto;
 239                                 position: absolute;
 240                                 top: 50%;
 241                                 transform: translate(-50%, -60%);
 242                                 animation: scroll 3s infinite;
 243                                 @include media-breakpoint-up(md) {
 244                                         width: 24px;
 245                                 }
 246                         }
 247                 }
 248         }
 249 }
 250
 251 section.content-section {
 252                 padding: 3rem 0;
 253         @include media-breakpoint-up(md) {
 254                 padding: 96px 0;
 255         }
 256 }
 257
 258 section#features,
 259 section#appliances,
 260 section#fireinfo {
 261         background-color: $blue-grey-50;
 262 }
 263
 264 section#news,
 265 footer {
 266         background-color: rgba($blue-grey-900, .2);
 267 }
 268
 269 section#wishlist {
 270         background-image: url('../img/wishlist-background.jpg');
 271         background-size: cover;
 272         background-position: center center;
 273 }
 274
 275 section#fireinfo {
 276         border-bottom: 1px solid rgba($blue-grey-900, .2);
 277 }
 278
 279 #copyright {
 280         background-color: rgba($blue-grey-900, .3);
 281         padding: 1rem 0;
 282 }
 283
 284 footer {
 285         padding: 3rem 0 0 0;
 286         h4 {
 287                 margin-bottom: 1.25rem;
 288         }
 289         ul {
 290                 li {
 291                         font-size: $small-font-size;
 292                         margin-bottom: .75rem;
 293                         a {
 294                                 color: $blue-grey-900;
 295                                 text-decoration: none;
 296                                 &:hover {
 297                                         color: $blue-grey-600;
 298                                         text-decoration: underline;
 299                                 }
 300                         }
 301                 }
 302         }
 303         .btn-lg {
 304                 margin-bottom: 2.75rem;
 305                 svg {
 306                         width: 20px;
 307                         height: auto;
 308                         margin-right: 1.125rem;
 309                         transform: translateY(2px);
 310                 }
 311         }
 312         .btn-sm {
 313                 box-shadow: none;
 314                 &:hover {
 315                         box-shadow: none;
 316                 }
 317                 svg {
 318                         width: auto;
 319                         height: 28px;
 320                 }
 321         }
 322 }
 323
 324 .feature_icons {
 325         width: 40px;
 326         height: 100%;
 327         float: left;
 328         margin-right: .5rem;
 329         svg {
 330                 width: 32px;
 331                 height: auto;
 332                 transform: translateY(-4px);
 333                 fill: $red_900;
 334         }
 335 }
 336
 337 @keyframes scroll {
 338   0%   { transform: translate(-50%, -60%); }
 339   50% { transform: translate(-50%, -30%); }
 340   100% { transform: translate(-50%, -60%); }
 341 }
 342
 343 .btn-red900 {
 344   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 345 }
 346 .btn-white {
 347   @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
 348 }
 349 .btn-bluegrey900 {
 350   @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
 351 }
 352
 353 p.lead {
 354         @include media-breakpoint-down(md) {
 355                 font-size: 1rem;
 356         }
 357 }
 358
 359 .circle {
 360         position: relative;
 361         p.lead {
 362                 color: $blue-grey-600;
 363                 position: absolute;
 364                 top: calc(50% - 1.25rem);
 365                 width: 100%;
 366         }
 367 }
 368
 369 .truncate {
 370   width: 100%;
 371   white-space: nowrap;
 372   overflow: hidden;
 373   text-overflow: ellipsis;
 374 }