/*! * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins @import "bootstrap-4.0.0-alpha.6/scss/variables"; @import "bootstrap-4.0.0-alpha.6/scss/mixins"; @import "bootstrap-4.0.0-alpha.6/scss/custom"; // Reset and dependencies @import "bootstrap-4.0.0-alpha.6/scss/normalize"; // @import "bootstrap-4.0.0-alpha.6/scss/print"; // Core CSS @import "bootstrap-4.0.0-alpha.6/scss/reboot"; @import "bootstrap-4.0.0-alpha.6/scss/type"; @import "bootstrap-4.0.0-alpha.6/scss/images"; // @import "bootstrap-4.0.0-alpha.6/scss/code"; @import "bootstrap-4.0.0-alpha.6/scss/grid"; // @import "bootstrap-4.0.0-alpha.6/scss/tables"; // @import "bootstrap-4.0.0-alpha.6/scss/forms"; @import "bootstrap-4.0.0-alpha.6/scss/buttons"; // Components @import "bootstrap-4.0.0-alpha.6/scss/transitions"; //@import "bootstrap-4.0.0-alpha.6/scss/dropdown"; @import "bootstrap-4.0.0-alpha.6/scss/button-group"; //@import "bootstrap-4.0.0-alpha.6/scss/input-group"; //@import "bootstrap-4.0.0-alpha.6/scss/custom-forms"; @import "bootstrap-4.0.0-alpha.6/scss/nav"; @import "bootstrap-4.0.0-alpha.6/scss/navbar"; //@import "bootstrap-4.0.0-alpha.6/scss/card"; // @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb"; // @import "bootstrap-4.0.0-alpha.6/scss/pagination"; // @import "bootstrap-4.0.0-alpha.6/scss/badge"; // @import "bootstrap-4.0.0-alpha.6/scss/jumbotron"; // @import "bootstrap-4.0.0-alpha.6/scss/alert"; @import "bootstrap-4.0.0-alpha.6/scss/progress"; @import "bootstrap-4.0.0-alpha.6/scss/media"; @import "bootstrap-4.0.0-alpha.6/scss/list-group"; // @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed"; // @import "bootstrap-4.0.0-alpha.6/scss/close"; // Components w/ JavaScript // @import "bootstrap-4.0.0-alpha.6/scss/modal"; // @import "bootstrap-4.0.0-alpha.6/scss/tooltip"; // @import "bootstrap-4.0.0-alpha.6/scss/popover"; // @import "bootstrap-4.0.0-alpha.6/scss/carousel"; // Utility classes @import "bootstrap-4.0.0-alpha.6/scss/utilities"; .btn { text-transform: uppercase; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25); transition: box-shadow .25s ease-in-out; &:hover { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25); transition: box-shadow .25s ease-in-out; } svg { margin-right: .75rem; height: 17px; width: auto; transform: translateY(2px); } } .btn-outline-primary, .btn-outline-secondary { transition: background-color .25s ease-in-out; &:hover { transition: background-color .25s ease-in-out; } } .btn-lg { margin: 0 24px; @include media-breakpoint-down(md) { margin: 0 8px; font-size: 14px; } } .btn-sm small { display: inline-block; transform: translateY(-2px); } .btn-block { margin: 0 0 2rem 0; } .fixed-top { transition: background-color 700ms linear; .navbar { width: 100%; } .navbar-brand { opacity: 0; transition: opacity 700ms linear; @include media-breakpoint-up(lg) { opacity: 1; } } } .scrolled { background-color: rgba(255, 255, 255, .96); .navbar-brand { opacity: 1; transition: opacity 700ms linear; } } .navbar { a { color: $blue-grey-900; } .btn { margin-top: .15rem; } } .navbar-brand { font-size: 2rem; font-weight: 300; img { margin-right: 1rem; transform: translateY(-5px); } } .display-2 { margin-bottom: 4rem; @include media-breakpoint-down(md) { font-size: 32px; } } .display-4 { @include media-breakpoint-down(md) { font-size: 14px; } } .bg-progress { background-image: linear-gradient(to right, $yellow-700, $amber-800); } section.intro { min-height: 100vh; background-image: url('../img/header-background.jpg'); background-size: cover; background-attachment: fixed; background-position: center top; position: relative; .branding { padding-top: 6rem; @include media-breakpoint-up(md) { padding-top: 192px; } margin-bottom: 64px; text-align: center; color: $blue-grey-600; h1 { font-weight: 300 !important; color: $blue-grey-900; @include media-breakpoint-down(md) { font-size: 4.5rem; } strong { font-weight: 700 !important; } } h1:before { content: ""; height: 60px; width: 76px; background-image: url('../img/ipfire-tux.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; display: inline-block; position: relative; top: 4px; @include media-breakpoint-up(md) { height: 120px; width: 93px; margin-right: 32px; top: 8px; } } } .page-scroll { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); .btn { width: 32px; height: 32px; fill: $red_900; @include media-breakpoint-up(md) { width: 64px; height: 64px; } &:hover { fill: white; } svg { width: 12px; height: auto; position: absolute; top: 50%; transform: translate(-50%, -60%); animation: scroll 3s infinite; @include media-breakpoint-up(md) { width: 24px; } } } } } section.content-section { padding: 96px 0; } section#features, section#appliances, section#fireinfo { background-color: $blue-grey-50; } section#news, footer { background-color: rgba($blue-grey-900, .2); } section#wishlist { background-image: url('../img/wishlist-background.jpg'); background-size: cover; background-position: center center; } section#fireinfo { border-bottom: 1px solid rgba($blue-grey-900, .2); } #copyright { background-color: rgba($blue-grey-900, .3); padding: 1rem 0; } footer { padding: 3rem 0 0 0; h4 { margin-bottom: 1.25rem; } ul { li { font-size: $small-font-size; margin-bottom: .75rem; a { color: $blue-grey-900; text-decoration: none; &:hover { color: $blue-grey-600; text-decoration: underline; } } } } .btn-lg { margin-bottom: 2.75rem; svg { width: 20px; height: auto; margin-right: 1.125rem; transform: translateY(2px); } } .btn-sm { box-shadow: none; &:hover { box-shadow: none; } svg { width: auto; height: 28px; } } } .feature_icons { width: 40px; height: 100%; float: left; margin-right: .5rem; svg { width: 32px; height: auto; transform: translateY(-4px); fill: $red_900; } } @keyframes scroll { 0% { transform: translate(-50%, -60%); } 50% { transform: translate(-50%, -30%); } 100% { transform: translate(-50%, -60%); } } .btn-red900 { @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border); } .btn-white { @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border); } .btn-bluegrey900 { @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border); } p.lead { @include media-breakpoint-down(md) { font-size: 1rem; } }