Update Christman campaign copy

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 068e2b88a80d36e7bceddfa770af52ff5ad3f8d9..ba8d6ce1e75db32fd2e787dd4064601da0c00925 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,14 +30,16 @@
 @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";
+@import "code-highlighting";
 
 // Makes everything white with dark text on it
 .inverse {
@@ -44,13 +47,19 @@
        color: $body-bg;
 }
 
-html, body {
-       height: 100%;
-}
-
 body {
        display: flex;
+       min-height: 100vh;
        flex-flow: column;
+
+       // Make the wiki slightly narrower
+       &.wiki-ipfire-org {
+               @include media-breakpoint-up(xl) {
+                       .container {
+                               max-width: 900px;
+                       }
+               }
+       }
 }
 
 // Buttons
@@ -59,12 +68,34 @@ body {
 }
 
 @each $color, $value in $theme-colors {
-       .btn-glow-#{$color} {
+       .glow-#{$color} {
                color: white;
                background-color: rgba($value, .15);
        }
 }
 
+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;
+       }
+
+       &.pre-light {
+               background-color: $white;
+               color: $body-bg;
+       }
+}
+
 .card {
        @extend .inverse;
 
@@ -113,6 +144,35 @@ body {
        }
 }
 
+header {
+       &.cover {
+               position: relative;
+               width: 100%;
+               height: auto;
+               min-height: 42rem;
+
+               @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;
 
@@ -157,13 +217,17 @@ footer {
        }
 }
 
+.map {
+       min-height: 24rem;
+}
+
 // Sections
 
 section {
        padding: 3rem 1rem;
 
        @include media-breakpoint-up(md) {
-               padding: 3rem 0;
+               padding: 5rem 0;
        }
 
        @include media-breakpoint-up(md) {
@@ -174,24 +238,40 @@ section {
                        line-height: $display-line-height;
                }
        }
+}
 
-       &.intro {
-               padding: 0;
+blockquote {
+       @extend .blockquote;
 
-               min-height: 100%;
-               min-height: 100vh;
+       // Add a light border to the left
+       border-left: 0.5rem solid $light;
+       padding: $spacer;
 
-               margin-top: -$navbar-height;
+       quotes: "“" "”" "“" "”";
 
-               @include media-breakpoint-down(sm) {
-                       padding-top: $navbar-height;
-               }
+       // Quote
+       &:before{
+               color: $light;
+               font-size: $display1-size;
+               line-height: 0;
+               margin-right: 0.25em;
+               vertical-align: -0.4em;
+       }
+
+       &:before {
+               content: open-quote;
+       }
+
+       p {
+               margin-bottom: 0;
        }
 }
 
 .blog-post {
        .blog-header {
-               h5 {
+               h4 {
+                       margin-bottom: 0;
+
                        a {
                                color: $dark;
                        }
@@ -208,6 +288,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;
                }
        }
 
@@ -232,21 +320,102 @@ 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;
+
+               // 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;
+
+               // Apply CSS classes for alignment
+               thead {
+                       th[align="left"], td[align="left"] {
+                               @extend .text-left;
+                       }
+
+                       th[align="center"], td[align="center"] {
+                               @extend .text-center;
+                       }
+
+                       th[align="right"], td[align="right"] {
+                               @extend .text-right;
+                       }
+               }
+       }
+
+       .footnote {
+               font-size: $small-font-size;
+
+               ol {
+                       margin-bottom: 0;
 
-#sidebar .nav {
-       position: fixed;
+                       li {
+                               p {
+                                       margin-bottom: 0;
+                               }
+                       }
+               }
+       }
 }
 
-.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 {
@@ -259,19 +428,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;
 }