// 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";
-// @import "bootstrap-4.0.0-alpha.6/scss/forms";
+@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/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/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/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/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/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";
// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";
-.btn {
- text-transform: uppercase;
+// Lightbox
+@import "photoswipe/main";
+@import "photoswipe/default-skin/default-skin";
+
+// Donation Box
+@import "_donation";
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.container {
+ width: 100%;
+ max-width: 1200px;
+ flex: 1;
+}
+
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+@import '_icons';
+
+
+
+// Colors
+.amber-800 {
+ color: $amber-800;
+ border-color: $amber-800;
+}
+
+.green-600 {
+ color: $green-600;
+ border-color: $green-600;
+}
+
+.red-900 {
+ color: $red_900;
+ border-color: $red_900;
+}
+
+.blue-700{
+ color: $blue-700;
+ border-color: $blue-700;
+}
+
+.blue_grey_300 {
+ color: $blue_grey_300;
+}
+
+.bg-blue-grey-900 {
+ background-color: $blue-grey-900;
+}
+
+.bg-blue-grey-50 {
+ background-color: $blue-grey-50;
}
-.navbar-brand {
- font-size: 2rem;
- font-weight: 300;
- img {
- margin-right: 1rem;
- transform: translateY(-5px);
+// Images
+img {
+ &.img-fluid {
+ width: 100%;
+ max-width: 100%;
+ height: auto;
}
}
+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);
+ }
+ }
+}
+
+
+// Sections
section.intro {
min-height: 100vh;
background-image: url('../img/header-background.jpg');
background-position: center top;
position: relative;
.branding {
- padding-top: 192px;
+ padding-top: 6rem;
+ @include media-breakpoint-up(sm) {
+ 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(xs) {
+ font-size: 72px;
+ line-height: 88px;
+ margin-bottom: 0;
+ }
strong {
font-weight: 700 !important;
}
}
h1:before {
content: "";
- height: 120px;
- width: 93px;
+ height: 60px;
+ width: 76px;
background-image: url('../img/ipfire-tux.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
- margin-right: 32px;
display: inline-block;
position: relative;
- top: 8px;
+ top: 4px;
+ @include media-breakpoint-up(sm) {
+ height: 120px;
+ width: 93px;
+ margin-right: 32px;
+ top: 8px;
+ }
}
}
- .btn-lg {
- margin: 0 24px;
- }
- .page-scroll {
- position: absolute;
- bottom: 48px;
- width: 66px;
- left: 50%;
- transform: translateX(-50%);
- .btn {
+}
+
+.page-scroll {
+ display: block;
+ visibility: visible;
+ position: absolute;
+ bottom: 48px;
+ left: 50%;
+ transform: translateX(-50%);
+ .btn {
+ width: 36px;
+ height: 36px;
+ fill: $red_900;
+ @include media-breakpoint-up(sm) {
width: 64px;
height: 64px;
- fill: $red_900;
- &:hover {
- fill: white;
- }
- svg {
- width: 24px;
- height: auto;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
+ }
+ &:hover .i_arrow_down {
+ fill: white;
+ }
+ }
+}
+
+section.content-section {
+ padding: 3rem 0;
+ @include media-breakpoint-up(sm) {
+ padding: 72px 0;
+ }
+}
+
+.feature_icons {
+ width: 40px;
+ height: 100%;
+ float: left;
+ margin-right: .75rem;
+}
+
+section#news,
+section#support,
+footer {
+ background-color: rgba($blue-grey-900, .06);
+}
+
+section#news {
+ color: rgba($blue-grey-900, .6);
+ h2 {
+ color: $blue-grey-900;
+ }
+}
+
+section#wishlist {
+ background-image: url('../img/wishlist-background.jpg');
+ background-size: cover;
+ 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);
+}
+
+.circle {
+ position: relative;
+ p.fireinfo_per {
+ color: $blue-grey-600;
+ position: absolute;
+ top: calc(50% - 18px);
+ width: 100%;
+ }
+}
+
+section#appliances {
+ padding-bottom: 48px;
+}
+
+.features-content {
+ padding-top: 88px;
+ margin-bottom: 40px;
+ @include media-breakpoint-up(lg) {
+ padding-top: 161px;
+ }
+ .content {
+ background: white;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ padding: 40px 24px;
+ position: relative;
+ }
+}
+
+.divider {
+ width: 128px;
+ height: 4px;
+ border-radius: 2px;
+ background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
+ margin: 40px auto 24px auto;
+ @include media-breakpoint-up(sm) {
+ margin: 56px auto 40px auto;
+ }
+}
+
+footer {
+ padding: 3rem 0 0 0;
+ @include media-breakpoint-down(md) {
+ padding-top: 31px;
+ }
+ h4 {
+ margin-bottom: 1.25rem;
+ color: rgba($blue-grey-900, .6);
+ font-size: 20px;
+ line-height: 28px;
+ }
+ ul {
+ li {
+ font-size: 14px;
+ margin-bottom: .75rem;
+ a {
+ color: rgba($blue-grey-900, .6);
+ text-decoration: none;
+ &:hover {
+ color: $blue-grey-900;
+ text-decoration: underline;
+ }
}
}
}
+ .btn-lg {
+ margin-bottom: 2.75rem;
+ }
+ .btn-sm {
+ box-shadow: none;
+ &:hover {
+ box-shadow: none;
+ }
+ }
+}
+
+#copyright {
+ background-color: rgba($blue-grey-900, .06);
+ padding: 1rem 0;
+ p {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+
+// Animation
+@keyframes scroll {
+ 0%, 100% { transform: translateY(30%); }
+ 50% { transform: translateY(50%); }
}
\ No newline at end of file
projects / people / shoehn / ipfire.org.git / blobdiff