From 2b2a3c7e723f98321bbc152633bcce4f6d41fa6c Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 9 Jan 2018 12:17:54 +0000
Subject: [PATCH] styling for the blockquote streamfield
---
.../src/sass/components/_blockquote.scss | 29 ++++++++--
.../src/sass/components/_wrapper.scss | 55 +++++++++++++++++++
opentech/templates/blocks/quote_block.html | 20 +++++--
3 files changed, 94 insertions(+), 10 deletions(-)
diff --git a/opentech/static_src/src/sass/components/_blockquote.scss b/opentech/static_src/src/sass/components/_blockquote.scss
index c6b291b0d..b836e0ab8 100644
--- a/opentech/static_src/src/sass/components/_blockquote.scss
+++ b/opentech/static_src/src/sass/components/_blockquote.scss
@@ -1,6 +1,25 @@
-blockquote {
- padding: 1rem;
- margin: 1rem 0;
- background: $color--tertiary;
- border-left: 10px solid $color--secondary;
+.blockquote {
+ @extend %h3;
+ position: relative;
+ font-weight: $weight--black;
+ text-align: center;
+
+ &__cite,
+ &__job-title {
+ @include responsive-font-sizes(15px, 17px);
+ display: block;
+ font-style: normal;
+ color: $color--darkest-blue;
+ text-transform: uppercase;
+ }
+
+ &__cite {
+ h5 {
+ margin: 0;
+ }
+ }
+
+ &__job-title {
+ font-weight: $weight--normal;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index 66af824b9..c6124e30a 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -19,6 +19,61 @@
&--flex {
display: flex;
flex-direction: column;
+ &--breakout {
+ position: relative;
+ right: 50%;
+ left: 50%;
+ width: 100vw;
+ margin-right: -50vw;
+ margin-left: -50vw;
+ }
+
+ &--blockquote {
+ padding: 1rem 0;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ background: $color--light-grey;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 0;
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+
+ svg {
+ position: absolute;
+ display: none;
+ width: 110px;
+ height: 110px;
+ fill: $color--white;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ }
+
+ &:first-child {
+ top: 0;
+ left: 0;
+ transform: rotate(90deg);
+ }
+
+ &:last-child {
+ right: 0;
+ bottom: 0;
+ transform: rotate(-90deg);
+ }
+ }
+ }
+
+ &--dark-bg {
+ padding: 2rem 20px;
+ color: $color--white;
+ background-color: $color--mustard;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
+ }
+ }
@include media-query(tablet-portrait) {
flex-direction: row;
diff --git a/opentech/templates/blocks/quote_block.html b/opentech/templates/blocks/quote_block.html
index 8af2d06ef..97f35842e 100644
--- a/opentech/templates/blocks/quote_block.html
+++ b/opentech/templates/blocks/quote_block.html
@@ -1,5 +1,15 @@
-<blockquote>
- <p>{{ value.quote }}</p>
- {% if value.attribution %}{{ value.attribution }}{% endif %}
- {% if value.attribution %}{{ value.job_title }}{% endif %}
-</blockquote>
+<div class="wrapper wrapper--breakout wrapper--blockquote">
+ <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+ <div class="wrapper wrapper--medium">
+ <blockquote class="blockquote" {% if value.attribution %} cite="{{ value.attribution }}"{% endif %}>
+ <p>{{ value.quote }}</p>
+ {% if value.attribution %}
+ <cite class="blockquote__cite"><h5>{{ value.attribution }}</h5></cite>
+ {% endif %}
+ {% if value.job_title %}
+ <div class="blockquote__job-title">{{ value.job_title }}</div>
+ {% endif %}
+ </blockquote>
+ </div>
+ <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+</div>
--
GitLab