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