wiki: Use <figure> for images

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index d783b33ac93eecef98b2787c5cc5a5fe4d26d6a6..c35b2f252e3850e19df93fd1a4f8c416ee9ec09f 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -17,10 +17,12 @@
 @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";
 @import "../bootstrap/scss/pagination";
+@import "../bootstrap/scss/breadcrumb";
 @import "../bootstrap/scss/badge";
 @import "../bootstrap/scss/alert";
 @import "../bootstrap/scss/progress";
@@ -28,14 +30,15 @@
 @import "../bootstrap/scss/list-group";
 @import "../bootstrap/scss/close";
 @import "../bootstrap/scss/modal";
+@import "../bootstrap/scss/spinners";
 @import "../bootstrap/scss/utilities";
 @import "../bootstrap/scss/print";
 
 // Include fonts
-@import "fonts";
+@import "_fonts.scss";
 
 // Custom stuff
-@import '_icons';
+@import "icons";
 
 // Makes everything white with dark text on it
 .inverse {
@@ -43,12 +46,9 @@
        color: $body-bg;
 }
 
-html, body {
-       height: 100%;
-}
-
 body {
        display: flex;
+       min-height: 100vh;
        flex-flow: column;
 }
 
@@ -64,6 +64,23 @@ body {
        }
 }
 
+code {
+       background-color: $dark;
+       border-radius: $border-radius;
+       padding: 0.1rem 0.2rem;
+}
+
+pre {
+       background-color: $dark;
+       border-radius: $border-radius;
+       padding: 0.5rem;
+
+       code {
+               background-color: inherit;
+               padding: 0;
+       }
+}
+
 .card {
        @extend .inverse;
 
@@ -112,43 +129,75 @@ body {
        }
 }
 
+header {
+       &.cover {
+               position: relative;
+               width: 100%;
+               height: auto;
+               min-height: 35rem;
+
+               @include media-breakpoint-up(lg) {
+                       height: calc(100vh - #{$navbar-height});
+               }
+       }
+}
+
+.icon-large {
+       font-size: 8em;
+
+       @include media-breakpoint-up(md) {
+               font-size: 6em;
+       }
+
+       @include media-breakpoint-up(lg) {
+               font-size: 8em;
+       }
+
+       @include media-breakpoint-up(xl) {
+               font-size: 10em;
+       }
+}
+
 footer {
        margin-top: auto;
 
        .footer {
-               margin-top: $spacer * 4;
-               padding: 2rem 0 0 0;
+               margin-top: $spacer * 3;
 
-               color: $white;
-               background-color: rgba($gray-400, .04);
+               .footer-info {
+                       padding: 2rem 0 0 0;
 
-               @include media-breakpoint-down(md) {
-                       padding-top: 31px;
-               }
+                       color: $white;
+                       background-color: rgba($gray-400, .04);
 
-               a, .btn-link {
-                       color: inherit;
+                       @include media-breakpoint-down(md) {
+                               padding-top: 31px;
+                       }
 
-                       &:hover {
+                       a, .btn-link {
                                color: inherit;
+
+                               &:hover {
+                                       color: inherit;
+                               }
                        }
-               }
 
-               ul {
-                       li {
-                               margin-bottom: $spacer / 4;
+                       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;
+                       }
                }
        }
 }
@@ -156,32 +205,27 @@ footer {
 // Sections
 
 section {
-       padding: 3rem 0;
+       padding: 3rem 1rem;
 
-       @include media-breakpoint-up(sm) {
-               padding: 72px 0;
+       @include media-breakpoint-up(md) {
+               padding: 5rem 0;
        }
-}
-
-.main {
-       .intro {
-               min-height: 100%;
-               min-height: 100vh;
-
-               margin-top: -6rem;
 
-               @include media-breakpoint-down(sm) {
-                       padding-top: 6rem;
+       @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;
                }
-
-               display: flex;
-               align-items: center;
        }
 }
 
 .blog-post {
        .blog-header {
-               h5 {
+               h4 {
+                       margin-bottom: 0;
+
                        a {
                                color: $dark;
                        }
@@ -198,6 +242,14 @@ section {
 
                img {
                        @include img-fluid;
+
+                       // Center all images
+                       display: block;
+                       margin-left: auto;
+                       margin-right: auto;
+
+                       // Add some extra margin to the top & bottom
+                       padding: ($spacer * 2) 0 ($spacer * 2) 0;
                }
        }
 
@@ -222,21 +274,73 @@ section {
        }
 }
 
-// Sidebar navigation
+.wiki-content {
+       h1, h2, h3, h4, h5, h6 {
+               font-weight: $headings-font-weight;
+               line-height: $headings-line-height;
+               margin-bottom: 0.5rem;
+       }
+
+       h1 {
+               font-size: $h4-font-size;
+       }
+
+       h2 {
+               font-size: $h5-font-size;
+       }
+
+       h3, h4, h5, h6 {
+               font-size: $h6-font-size;
+       }
+
+       figure {
+               // Center images
+               display: table;
+               margin-right: auto;
+               margin-left: auto;
 
-#sidebar .nav {
-       position: fixed;
+               // Add some extra margin to the top & bottom
+               padding: ($spacer * 2) 0 ($spacer * 2) 0;
+       }
+
+       blockquote {
+               @extend .blockquote;
+       }
+
+       table {
+               @extend .table;
+               @extend .table-sm;
+               @extend .table-striped;
+       }
 }
 
-.feature_icons {
-       width: 40px;
-       height: 100%;
-       float: left;
-       margin-right: .75rem;
+#preview {
+       // Hide the spinner by default
+       #spinner {
+               display: none;
+       }
+
+       #preview-content {
+               @include transition(opacity .5s linear);
+       }
+
+       &.updating {
+               // Show the spinner during updates
+               #spinner {
+                       display: block;
+               }
+
+               // While updating, we face out the content
+               #preview-content {
+                       opacity: 0.5;
+               }
+       }
 }
 
-.progress {
-       background-color: rgba(255, 255, 255, .2);
+hr.divider {
+       border-color: rgba($dark, .15);
+       margin-top: 2rem;
+       margin-bottom: 3rem;
 }
 
 .circle {
@@ -249,19 +353,7 @@ section {
        }
 }
 
-.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%); }
+.pdf-viewer {
+       width: 100%;
+       min-height: 32rem;
 }