diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less index 98d055234b..8e91523a64 100644 --- a/services/web/frontend/stylesheets/app/cms-page.less +++ b/services/web/frontend/stylesheets/app/cms-page.less @@ -57,6 +57,7 @@ */ blockquote { margin: 0; + position: relative; /* type.less sets

inline, so that quotation mark is inline but sometimes we have multiple

, @@ -87,6 +88,36 @@ margin-bottom: @margin-sm; } } + .quote-picture-bottom { + border: none; + color: @content-primary; + .h1 { + margin: 0 0 48px 0; + } + p:first-child { + &:before { + color: inherit; + font-size: inherit; + margin-right: 0; + vertical-align: 0; + line-height: inherit; + position: absolute; + top: (@line-height-computed / 2); // match quote padding + left: 3px; + } + &:after { + content: close-quote; + } + } + img { + height: 64px; + width: 64px; + margin-right: 16px; + } + .quote-by-position { + color: @content-secondary; + } + } /* Tables diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index 03d6d26d21..b155a76872 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -47,6 +47,7 @@ @brand-danger: @ol-red; @ol-type-color: @ol-blue-gray-3; +@content-secondary: @ol-type-color; @accent-color-primary: @ol-green; @accent-color-secondary: @ol-dark-green; @@ -108,6 +109,7 @@ @headings-font-weight: 500; @headings-line-height: 1.35; @headings-color: @gray-dark; +@content-primary: @headings-color; //-- Iconography //