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 e6522a0a02eb8c81363cd64779529492b302fc73..c35b2f252e3850e19df93fd1a4f8c416ee9ec09f 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -30,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";
@@ -63,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;
 
@@ -124,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;
 
@@ -244,7 +278,7 @@ section {
        h1, h2, h3, h4, h5, h6 {
                font-weight: $headings-font-weight;
                line-height: $headings-line-height;
-               margin-bottom: 0.25rem;
+               margin-bottom: 0.5rem;
        }
 
        h1 {
@@ -259,13 +293,11 @@ section {
                font-size: $h6-font-size;
        }
 
-       img {
-               @include img-fluid;
-
-               // Center all images
-               display: block;
-               margin-left: auto;
+       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;
@@ -278,6 +310,30 @@ section {
        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;
+               }
        }
 }
 
@@ -296,3 +352,8 @@ hr.divider {
                width: 100%;
        }
 }
+
+.pdf-viewer {
+       width: 100%;
+       min-height: 32rem;
+}