// 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/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";
// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";
+
+// Colors
+.amber-800 {
+ color: $amber-800;
+}
+
+// Fonts
+h1 {
+ line-height: 3rem;
+}
+
+h2 {
+ line-height: 2.75rem;
+}
+
+h3 {
+ line-height: 2rem;
+}
+
h4 {
- font-weight: 600;
+ font-weight: 500;
+ line-height: 1.75rem;
+ @include media-breakpoint-down(sm) {
+ font-size: 1em;
+ }
+}
+
+h5 {
+ line-height: 1.5rem;
+}
+
+p {
+ line-height: 1.5rem;
+ &.lead {
+ line-height: 2rem;
+ @include media-breakpoint-down(md) {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+ @include media-breakpoint-down(sm) {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+ }
+}
+
+.display-2 {
+ margin-bottom: 4rem;
+ @include media-breakpoint-down(md) {
+ font-size: 2.5rem;
+ line-height: 3.5rem;
+ margin-bottom: 3rem;
+ }
+ @include media-breakpoint-down(sm) {
+ font-size: 2rem;
+ line-height: 2.75rem;
+ }
+}
+
+.display-4 {
+ @include media-breakpoint-down(sm) {
+ font-size: .875rem;
+ line-height: 1.25rem;
+ }
+}
+
+small {
+ line-height: 1rem;
+}
+
+.truncate {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+// Images
+img {
+ &.img-fluid {
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ }
+}
+
+// Icons
+.icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: currentColor;
+ vertical-align: -.15rem;
+ overflow: hidden;
+ margin-right: .5rem;
+}
+
+.i_arrow_down {
+ margin: 0;
+ position: absolute;
+ left: .75rem;
+ top: -.25rem;
+ animation: scroll 1.5s ease-in-out infinite;
+ @include media-breakpoint-down(sm) {
+ width: 1.75rem !important;
+ height: 1.75rem !important;
+ left: .25rem;
+ top: -.5rem;
+ }
+}
+
+.i_lg {
+ width: 2.5rem;
+ height: 2.5rem;
+ margin: 0;
+ transform: translateY(-.35rem);
+ fill: $red_900;
+}
+
+.i_sm {
+ vertical-align: top;
+ transform: translateY(-.10rem);
+}
+
+footer {
+ .btn-toolbar .icon {
+ height: 2.25rem;
+ width: 2.25rem;
+ fill: rgba($blue-grey-900, .6);
+ }
+ .i_heart {
+ vertical-align: top;
+ transform: translateY(-.15rem);
+ @include media-breakpoint-down(sm) {
+ transform: translateY(-.75rem);
+ }
+ }
+}
+
+// Buttons
+.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);
}
button.navbar-toggler div {
font-family: 'Ubuntu', sans-serif;
font-size: 1rem;
display: inline-block;
- margin-left: 12px;
+ position: relative;
+ top: -4px;
}
.btn {
+ height: 36px;
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;
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);
+ @include media-breakpoint-down(sm) {
+ font-size: .875rem;
}
}
}
.btn-lg {
+ height: 48px;
margin: 0 24px;
- @include media-breakpoint-down(md) {
+ @include media-breakpoint-down(sm) {
+ height: 36px;
margin: 0 8px;
- font-size: 14px;
+ padding: 1rem;
+ font-size: .875rem;
+ line-height: 0;
}
}
-.btn-sm small {
- display: inline-block;
- transform: translateY(-2px);
+.btn-md {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ padding: .4rem 1rem .5rem 1rem;
}
.btn-block {
- margin: 0 0 1.5rem 0;
+ margin: 0 0 1.5rem 0;
@include media-breakpoint-up(md) {
- margin: 0 0 2rem 0;
+ margin: 0 0 2rem 0;
+ }
+ @include media-breakpoint-down(sm) {
+ font-size: .875rem;
+ line-height: 0;
}
}
+button:focus {
+ outline: none;
+}
+
+// Top Navigation
.fixed-top {
transition: background-color 700ms linear;
.navbar {
width: 100%;
+ @include media-breakpoint-down(md) {
+ padding: .5rem 0;
+ }
+ .navbar-toggler-left {
+ left: -1rem;
+ }
}
.navbar-brand {
opacity: 0;
}
}
+a.nav-link {
+ padding-bottom: 30px;
+ display: block;
+ position: relative;
+ &:after {
+ content: "";
+ border-bottom: 2px solid $red_900;
+ position: absolute;
+ transform: scaleX(0);
+ width: 100%;
+ left: 0;
+ padding: inherit;
+ transition: transform .3s ease-out, color .3s ease-out;
+ }
+}
+
+a.nav-link:hover {
+ color: $red_900;
+}
+
+a.nav-link:hover:after {
+ transform: scaleX(1);
+}
+
.navbar-brand {
font-size: 1.25rem;
@include media-breakpoint-up(sm) {
font-size: 2rem;
}
font-weight: 300;
+ strong {
+ font-weight: 900;
+ }
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);
-}
-
+// Sections
section.intro {
min-height: 100vh;
background-image: url('../img/header-background.jpg');
h1 {
font-weight: 300 !important;
color: $blue-grey-900;
- @include media-breakpoint-down(md) {
+ @include media-breakpoint-down(sm) {
font-size: 4.5rem;
}
strong {
left: 50%;
transform: translateX(-50%);
.btn {
- width: 32px;
- height: 32px;
+ width: 36px;
+ height: 36px;
fill: $red_900;
@include media-breakpoint-up(md) {
width: 64px;
height: 64px;
}
- &:hover {
+ &:hover .i_arrow_down {
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: 3rem 0;
+ padding: 3rem 0;
@include media-breakpoint-up(md) {
- padding: 96px 0;
+ padding: 72px 0;
}
}
-section#features,
-section#appliances,
-section#fireinfo {
- background-color: $blue-grey-50;
+.feature_icons {
+ width: 40px;
+ height: 100%;
+ float: left;
+ margin-right: .75rem;
}
section#news,
footer {
- background-color: rgba($blue-grey-900, .2);
+ background-color: rgba($blue-grey-900, .06);
+}
+
+section#news {
+ color: rgba($blue-grey-900, .6);
+ h2 {
+ color: $blue-grey-900;
+ }
}
section#wishlist {
background-position: center center;
}
+.progress {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.bg-progress {
+ background-image: linear-gradient(to right, $yellow-700, $amber-800);
+}
+
section#fireinfo {
border-bottom: 1px solid rgba($blue-grey-900, .2);
}
-#copyright {
- background-color: rgba($blue-grey-900, .3);
- padding: 1rem 0;
+.circle {
+ position: relative;
+ p.lead {
+ color: $blue-grey-600;
+ position: absolute;
+ top: calc(50% - 1.25rem);
+ width: 100%;
+ font-size: 1.25em;
+ }
}
footer {
padding: 3rem 0 0 0;
h4 {
margin-bottom: 1.25rem;
+ color: rgba($blue-grey-900, .6);
}
ul {
li {
font-size: $small-font-size;
margin-bottom: .75rem;
a {
- color: $blue-grey-900;
+ color: rgba($blue-grey-900, .6);
text-decoration: none;
&:hover {
- color: $blue-grey-600;
+ color: $blue-grey-900;
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;
- }
+#copyright {
+ background-color: rgba($blue-grey-900, .06);
+ padding: 1rem 0;
}
+// Animation
@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;
- }
-}
-
-.circle {
- position: relative;
- p.lead {
- color: $blue-grey-600;
- position: absolute;
- top: calc(50% - 1.25rem);
- width: 100%;
- }
-}
-
-.truncate {
- width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ 0%, 100% { transform: translateY(30%); }
+ 50% { transform: translateY(50%); }
}
\ No newline at end of file
projects / ipfire.org.git / blobdiff