Merge pull request #19992 from overleaf/jel-cms-quote

[web] Add new quote option to CMS

GitOrigin-RevId: 5c66620eb755fc9af9c8ba22d64ff969c5c140ca
This commit is contained in:
Jessica Lawshe 2024-08-21 12:34:40 -05:00 committed by Copybot
parent 130a04e9c2
commit 8d63d56a6f
3 changed files with 49 additions and 1 deletions

View file

@ -14,6 +14,18 @@ mixin quoteLargeTextCentered(quote, person, position, affiliation, link, picture
if link if link
.quote-link !{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 mixin collinsQuote1
.card.card-dark-green-bg .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, its our main tool.' -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, its our main tool.'

View file

@ -150,7 +150,7 @@
/* /*
quotes quotes
*/ */
blockquote:not(.quote-large-text-centered) { blockquote:not(.quote-large-text-centered):not(.quote-left-green-border) {
margin: 0; margin: 0;
position: relative; position: relative;
/* /*

View file

@ -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);
}
}