CSS: Add file with only fonts

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3ad9029bba09ef92479a11c1b216c26d71bab79f..04e05d7dcb5538ab10bf8f7b6e9d1ceaa6d0decb 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -22,6 +22,7 @@
 @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";
@@ -33,10 +34,10 @@
 @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 {
@@ -173,7 +174,7 @@ section {
        padding: 3rem 1rem;
 
        @include media-breakpoint-up(md) {
-               padding: 3rem 0;
+               padding: 5rem 0;
        }
 
        @include media-breakpoint-up(md) {
@@ -188,7 +189,9 @@ section {
 
 .blog-post {
        .blog-header {
-               h5 {
+               h4 {
+                       margin-bottom: 0;
+
                        a {
                                color: $dark;
                        }
@@ -205,6 +208,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;
                }
        }
 
@@ -229,21 +240,51 @@ section {
        }
 }
 
-// Sidebar navigation
+.wiki-content {
+       h1, h2, h3, h4, h5, h6 {
+               font-weight: $headings-font-weight;
+               line-height: $headings-line-height;
+               margin-bottom: 0.25rem;
+       }
 
-#sidebar .nav {
-       position: fixed;
-}
+       h1 {
+               font-size: $h4-font-size;
+       }
+
+       h2 {
+               font-size: $h5-font-size;
+       }
+
+       h3, h4, h5, h6 {
+               font-size: $h6-font-size;
+       }
+
+       img {
+               @include img-fluid;
 
-.feature_icons {
-       width: 40px;
-       height: 100%;
-       float: left;
-       margin-right: .75rem;
+               // 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;
+       }
+
+       blockquote {
+               @extend .blockquote;
+       }
+
+       table {
+               @extend .table;
+               @extend .table-sm;
+       }
 }
 
-.progress {
-       background-color: rgba(255, 255, 255, .2);
+hr.divider {
+       border-color: rgba($dark, .15);
+       margin-top: 2rem;
+       margin-bottom: 3rem;
 }
 
 .circle {
@@ -255,20 +296,3 @@ section {
                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%); }
-}