// @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/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/progress";
// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";
-// Custom stuff
-@import '_custom_nav';
-@import '_buttons';
+// Lightbox
+@import "photoswipe/main";
+@import "photoswipe/default-skin/default-skin";
+// Donation Box
+@import "_donation";
-// Colors
-.amber-800 {
- color: $amber-800;
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
-// Fonts
-h1 {
- line-height: 3rem;
+.container {
+ width: 100%;
+ max-width: 1200px;
+ flex: 1;
}
-h2 {
- line-height: 2.75rem;
-}
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+@import '_icons';
-h3 {
- line-height: 2rem;
- @include media-breakpoint-down(sm) {
- font-size: 1em;
- }
-}
-h4 {
- font-weight: 500;
- line-height: 1.75rem;
- @include media-breakpoint-down(sm) {
- font-size: 1em;
- }
-}
-h5 {
- line-height: 1.5rem;
+// Colors
+.amber-800 {
+ color: $amber-800;
+ border-color: $amber-800;
}
-p {
- line-height: 1.5rem;
- @include media-breakpoint-down(sm) {
- font-size: .85em;
- }
- &.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;
- }
- }
+.green-600 {
+ color: $green-600;
+ border-color: $green-600;
}
-.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;
- }
+.red-900 {
+ color: $red_900;
+ border-color: $red_900;
}
-.display-4 {
- @include media-breakpoint-down(xs) {
- font-size: .875rem;
- line-height: 1.25rem;
- }
+.blue-700{
+ color: $blue-700;
+ border-color: $blue-700;
}
-small {
- line-height: 1rem;
- @include media-breakpoint-down(sm) {
- font-size: .75em;
- }
+.bg-blue-grey-900 {
+ background-color: $blue-grey-900;
}
-.truncate {
- width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+.bg-blue-grey-50 {
+ background-color: $blue-grey-50;
}
// Images
}
}
-// 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(xs) {
- 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 {
font-weight: 300 !important;
color: $blue-grey-900;
@include media-breakpoint-down(xs) {
- font-size: 4.5rem;
+ font-size: 72px;
+ line-height: 88px;
+ margin-bottom: 0;
}
strong {
font-weight: 700 !important;
}
}
}
- .page-scroll {
- 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;
- }
- &:hover .i_arrow_down {
- fill: white;
- }
+}
+
+.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;
+ }
+ &:hover .i_arrow_down {
+ fill: white;
}
}
}
}
section#news,
+section#support,
footer {
background-color: rgba($blue-grey-900, .06);
}
.circle {
position: relative;
- p.lead {
+ p.fireinfo_per {
color: $blue-grey-600;
position: absolute;
- top: calc(50% - 1.25rem);
+ top: calc(50% - 18px);
width: 100%;
- font-size: 1.25em;
}
}
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) {
h4 {
margin-bottom: 1.25rem;
color: rgba($blue-grey-900, .6);
+ font-size: 20px;
+ line-height: 28px;
}
ul {
li {
- font-size: $small-font-size;
+ font-size: 14px;
margin-bottom: .75rem;
a {
color: rgba($blue-grey-900, .6);
#copyright {
background-color: rgba($blue-grey-900, .06);
padding: 1rem 0;
+ p {
+ font-size: 12px;
+ line-height: 16px;
+ }
}
// Animation
projects / people / shoehn / ipfire.org.git / blobdiff