fix(blockquote): close quote is not aligned properly

This patch also refactors the code. And changes look and feel.

documentation/content/Components/blockquote.md

@@ -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.
 >

static/css/blockquote.css

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