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 59380259bad63d56bd55eca1f70ae94e93623e76..c35b2f252e3850e19df93fd1a4f8c416ee9ec09f 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";
@@ -29,11 +30,12 @@
 @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";
@@ -62,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;
 
@@ -123,6 +142,22 @@ header {
        }
 }
 
+.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;
 
@@ -207,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;
                }
        }
 
@@ -231,16 +274,75 @@ section {
        }
 }
 
+.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;
+
+               // 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;
+       }
+}
+
+#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;
+               }
+       }
+}
+
 hr.divider {
        border-color: rgba($dark, .15);
        margin-top: 2rem;
        margin-bottom: 3rem;
 }
 
-.progress {
-       background-color: rgba(255, 255, 255, .2);
-}
-
 .circle {
        position: relative;
        p.fireinfo_per {
@@ -250,3 +352,8 @@ hr.divider {
                width: 100%;
        }
 }
+
+.pdf-viewer {
+       width: 100%;
+       min-height: 32rem;
+}