Bootstap 4 migration: imprint

[people/shoehn/ipfire.org.git] / static / scss / style.scss

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 27b0f2b42cf5f2720bc302aab63493f1d2b23714..34a68875021bd745b0bf1ca22336243509dda837 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -21,7 +21,7 @@
 // @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
@@ -35,9 +35,9 @@
 //@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";
@@ -53,69 +53,76 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+// 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;
 }
 
-// Images
-img {
-       &.img-fluid {
-               width: 100%;
-               max-width: 100%;
-               height: auto;
-       }
+.green-600 {
+       color: $green-600;
+       border-color: $green-600;
 }
 
-// Icons
-.icon {
-       width: 1.5rem;
-       height: 1.5rem;
-       fill: currentColor;
-       vertical-align: -.15rem;
-       overflow: hidden;
-       margin-right: .5rem;
+.red-900 {
+       color: $red_900;
+       border-color: $red_900;
 }
 
-.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;
-       }
+.blue-700{
+       color: $blue-700;
+       border-color: $blue-700;
 }
 
-.i_lg {
-       width: 2.5rem;
-       height: 2.5rem;
-       margin: 0;
-       transform: translateY(-.35rem);
-       fill: $red_900;
+.blue_grey_300 {
+       color: $blue_grey_300;
 }
 
-.i_sm {
-       vertical-align: top;
-       transform: translateY(-.10rem);
+.bg-blue-grey-900 {
+       background-color: $blue-grey-900;
 }
 
+.bg-blue-grey-50 {
+       background-color: $blue-grey-50;
+}
+
+// Images
+img {
+       &.img-fluid {
+               width: 100%;
+               max-width: 100%;
+               height: auto;
+       }
+}
+
+
 footer {
        .btn-toolbar .icon {
                height: 2.25rem;
@@ -217,6 +224,7 @@ section.content-section {
 }
 
 section#news,
+section#support,
 footer {
        background-color: rgba($blue-grey-900, .06);
 }
@@ -261,20 +269,29 @@ section#appliances {
 }
 
 .features-content {
-       padding-top: 161px;
+       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;
        }
 }
 
-hr.divider {
+.divider {
        width: 128px;
-       border-width: 4px;
-       margin: 56px auto 40px auto;
+       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 {