diff --git a/services/web/app/views/_mixins/quote.pug b/services/web/app/views/_mixins/quote.pug index 5a294a63cd..1590833e62 100644 --- a/services/web/app/views/_mixins/quote.pug +++ b/services/web/app/views/_mixins/quote.pug @@ -14,6 +14,18 @@ mixin quoteLargeTextCentered(quote, person, position, affiliation, link, picture if link .quote-link !{link} +mixin quoteLeftGreenBorder({quote, person, position, affiliation, link}) + blockquote.quote-left-green-border + .quote !{quote} + footer + | #{person} + | #{position || affiliation ? ',' : ''} + | #{position} + | #{position && affiliation ? ' at ' : ''} + | #{affiliation} + if link + .quote-link !{link} + mixin collinsQuote1 .card.card-dark-green-bg -var quote = 'Overleaf is indispensable for us. We use it in our research, thesis writing, project proposals, and manuscripts for publication. When it comes to writing, it’s our main tool.' diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less index 4cc1f45cfa..23d1b398db 100644 --- a/services/web/frontend/stylesheets/app/cms-page.less +++ b/services/web/frontend/stylesheets/app/cms-page.less @@ -150,7 +150,7 @@ /* quotes */ - blockquote:not(.quote-large-text-centered) { + blockquote:not(.quote-large-text-centered):not(.quote-left-green-border) { margin: 0; position: relative; /* diff --git a/services/web/frontend/stylesheets/components/quote.less b/services/web/frontend/stylesheets/components/quote.less index f154fc9510..0ab245dae8 100644 --- a/services/web/frontend/stylesheets/components/quote.less +++ b/services/web/frontend/stylesheets/components/quote.less @@ -59,3 +59,39 @@ blockquote.quote-large-text-centered { } } } + +blockquote.quote-left-green-border { + border-left: 2px solid var(--green-60) !important; + text-align: left; + font-size: var(--font-size-07) !important; + line-height: var(--line-height-06) !important; + color: var(--neutral-90); + padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06) !important; + + // customize open/close quote placement. + // Otherwise, close is after footer and before is above quote + &:before, + &:after { + content: none; + } + .quote { + &:before { + content: open-quote; + } + &:after { + content: close-quote; + } + } + + footer { + .heading-xs(); + color: var(--neutral-70); + font-weight: 400; + margin: var(--spacing-09) 0 0 0; + padding: 0; + } + + .quote-link { + margin-top: var(--spacing-05); + } +}