CSS: Add CSS for file listings

[ipfire.org.git] / src / scss / style.scss

diff --git a/src/scss/style.scss b/src/scss/style.scss
index d2f21bc1e9318e8eb9f9c14611428a04745238c4..6dd9334000e4ffdbeefe5d472e3446b91fc56271 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -17,6 +17,7 @@
 @import "../bootstrap/scss/dropdown";
 @import "../bootstrap/scss/button-group";
 @import "../bootstrap/scss/input-group";
+@import "../bootstrap/scss/custom-forms";
 @import "../bootstrap/scss/nav";
 @import "../bootstrap/scss/navbar";
 @import "../bootstrap/scss/card";
@@ -35,7 +36,7 @@
 @import "fonts";
 
 // Custom stuff
-@import '_icons';
+@import "icons";
 
 // Makes everything white with dark text on it
 .inverse {
@@ -43,12 +44,9 @@
        color: $body-bg;
 }
 
-html, body {
-       height: 100%;
-}
-
 body {
        display: flex;
+       min-height: 100vh;
        flex-flow: column;
 }
 
@@ -66,6 +64,17 @@ body {
 
 .card {
        @extend .inverse;
+
+       // Reset padding for sections
+       section {
+               padding: 0;
+       }
+}
+
+.list-group {
+       .list-group-item {
+               color: $body-bg;
+       }
 }
 
 .nav {
@@ -82,6 +91,10 @@ body {
 .navbar {
        background-color: rgba($gray-400, .06);
 
+       // Webkit is being stupid and cannot figure out the height
+       // of the navbar by itself
+       min-height: $navbar-height;
+
        .navbar-brand {
                color: inherit;
        }
@@ -97,71 +110,87 @@ body {
        }
 }
 
+header {
+       &.cover {
+               position: relative;
+               width: 100%;
+               height: auto;
+               min-height: 35rem;
+
+               @include media-breakpoint-up(lg) {
+                       height: calc(100vh - #{$navbar-height});
+               }
+       }
+}
+
 footer {
        margin-top: auto;
-       padding: 3rem 0 0 0;
 
-       color: $white;
+       .footer {
+               margin-top: $spacer * 3;
 
-       @include media-breakpoint-down(md) {
-               padding-top: 31px;
-       }
+               .footer-info {
+                       padding: 2rem 0 0 0;
 
-       a, .btn-link {
-               color: inherit;
+                       color: $white;
+                       background-color: rgba($gray-400, .04);
 
-               &:hover {
-                       color: inherit;
-               }
-       }
+                       @include media-breakpoint-down(md) {
+                               padding-top: 31px;
+                       }
 
-       ul {
-               li {
-                       margin-bottom: $spacer / 4;
+                       a, .btn-link {
+                               color: inherit;
+
+                               &:hover {
+                                       color: inherit;
+                               }
+                       }
+
+                       ul {
+                               li {
+                                       margin-bottom: $spacer / 4;
+                               }
+                       }
                }
-       }
 
-       .copyright {
-               background-color: rgba($gray-400, .06);
-               padding: $spacer 0;
+               .copyright {
+                       background-color: rgba($gray-400, .06);
+                       padding: $spacer 0;
 
-               font-size: $small-font-size;
+                       font-size: $small-font-size;
 
-               a {
-                       color: $text-muted;
+                       a {
+                               color: $text-muted;
+                       }
                }
        }
 }
 
 // Sections
 
-.main {
-       .intro {
-               min-height: 100%;
-               min-height: 100vh;
-
-               margin-top: -6rem;
+section {
+       padding: 3rem 1rem;
 
-               @include media-breakpoint-down(sm) {
-                       padding-top: 6rem;
-               }
-
-               display: flex;
-               align-items: center;
+       @include media-breakpoint-up(md) {
+               padding: 5rem 0;
        }
 
-       section {
-               padding: 3rem 0;
-
-               @include media-breakpoint-up(sm) {
-                       padding: 72px 0;
+       @include media-breakpoint-up(md) {
+               // Reset large headlines to normal size on mobile devices
+               h1 {
+                       font-size: $display1-size;
+                       font-weight: $display1-weight;
+                       line-height: $display-line-height;
                }
        }
 }
 
 .blog-post {
        .blog-header {
-               h5 {
+               h4 {
+                       margin-bottom: 0;
+
                        a {
                                color: $dark;
                        }
@@ -202,34 +231,10 @@ footer {
        }
 }
 
-// Donations
-
-.donation-explanation {
-       color: $text-muted;
-       padding: 1.5rem;
-
-       .faq {
-               a {
-                       color: inherit;
-               }
-       }
-}
-
-// Sidebar navigation
-
-#sidebar .nav {
-       position: fixed;
-}
-
-.feature_icons {
-       width: 40px;
-       height: 100%;
-       float: left;
-       margin-right: .75rem;
-}
-
-.progress {
-       background-color: rgba(255, 255, 255, .2);
+hr.divider {
+       border-color: rgba($dark, .15);
+       margin-top: 2rem;
+       margin-bottom: 3rem;
 }
 
 .circle {
@@ -241,20 +246,3 @@ footer {
                width: 100%;
        }
 }
-
-.divider {
-       width: 128px;
-       height: 4px;
-       border-radius: 2px;
-       background-image: linear-gradient(to right, $red, $gray-400);
-       margin: 40px auto 24px auto;
-       @include media-breakpoint-up(sm) {
-               margin: 56px auto 40px auto;
-       }
-}
-
-// Animation
-@keyframes scroll {
-  0%, 100%   { transform: translateY(30%); }
-  50% { transform: translateY(50%); }
-}