CSS: Style blockquotes

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 77d3051bb2c3db8ed11c854d20f9595c55f4e207..749b58f59d67d45a26b6de159e4c5a7b422e06c4 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -61,6 +61,8 @@ $small-font-size:                     87.5%;
 
 $line-height-base:                     1.5;
 
+$blockquote-font-size:         $font-size-base * 1.125;
+
 // Headings
 $headings-font-weight:         500;
 $headings-line-height:         1.15;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 05ac5e0023a3425f6ffd999723af3978172002c0..521a4af4e16147237c23243bec844f059df24202 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -227,6 +227,33 @@ section {
        }
 }
 
+blockquote {
+       @extend .blockquote;
+
+       // Add a light border to the left
+       border-left: 0.5rem solid $light;
+       padding: $spacer;
+
+       quotes: "“" "”" "“" "”";
+
+       // 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 {
                h4 {