Skip to content
Permalink
Browse files

fix(blockquote): close quote is not aligned properly

This patch also refactors the code. And changes look and feel.
  • Loading branch information
talha131 committed Dec 4, 2019
1 parent f8d7982 commit 80a85c714a16cd01c53831347ac1f18b397dda1a
Showing with 38 additions and 29 deletions.
  1. +5 −1 documentation/content/Components/blockquote.md
  2. +32 −27 static/css/blockquote.css
  3. +1 −1 static/css/elegant.prod.css
@@ -10,7 +10,11 @@ Keywords:

<!-- yaspeller ignore:start -->

This is how blockquotes appear in the Elegant theme.
A blockquote with a single paragraph.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi.
A blockquotes with multiple paragraph.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id.
>
@@ -1,32 +1,37 @@
blockquote {
margin: 3em 0 3em 2em;
padding: 0 7px;
--quotes-margin: 13px;
background: Cornsilk;
border-radius: var(--border-radius);
border-left: 5px solid goldenrod;
}
blockquote:before,
blockquote:after {
font-size: 4em;
color: dimgray;
vertical-align: top;
}
blockquote:before {
content: open-quote;
margin-left: -0.8em;
position: absolute;
}
blockquote:after {
content: close-quote;
border-radius: var(--border-radius);
box-sizing: border-box;
margin: 1rem auto 2rem;
padding: 0.1rem 1.2rem;
position: relative;
right: -97%;
top: 45px;
}
blockquote p {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: inherit;
font-variant: normal;
line-height: 1.7em;
text-transform: none;
font-weight: 300;
width: 80%;
& p {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-weight: 400;
}
&:before,
&:after {
color: dimgray;
font-size: 4rem;
line-height: 0;
margin: 0;
padding: 0;
position: absolute;
}
&:before {
content: open-quote;
margin-right: var(--quotes-margin);
right: 100%;
top: 30px;
}
&:after {
bottom: 0px;
content: close-quote;
left: 100%;
margin-left: var(--quotes-margin);
top: auto;
}
}

0 comments on commit 80a85c7

Please sign in to comment.
You can’t perform that action at this time.