Skip to content
Permalink
Browse files

feat(blockquote): improve blockquote look

1. Open and Close quotes are displayed
2. Set background color of the quote
3. Respect paragraph breaks inisde the quote
  • Loading branch information
talha131 committed Dec 2, 2019
1 parent 2b88865 commit 068d50a455d57e4706525908b174bbc4606c6fb6
Showing with 58 additions and 39 deletions.
  1. +23 −0 documentation/content/Components/blockquote.md
  2. +32 −0 static/css/blockquote.css
  3. +1 −38 static/css/elegant.css
  4. +2 −1 static/css/elegant.prod.css
@@ -0,0 +1,23 @@
Title: Blockquote Style
Tags: style, typography
Category: Components
Date: 2019-12-01 18:41
Slug: blockquote-style
Authors: Talha Mansoor
Subtitle:
Summary:
Keywords:

This is how blockquotes appear in the Elegant theme.

> 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.
>
> Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. Elit pellentesque habitant morbi tristique senectus et. Netus et malesuada fames ac turpis egestas.
>
> Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Augue eget arcu dictum varius duis at consectetur.
>
> Pharetra pharetra massa massa ultricies mi quis. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Pulvinar neque laoreet suspendisse interdum.
>
> Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Sem et tortor consequat id porta nibh venenatis. Nulla facilisi morbi tempus iaculis urna id volutpat lacus.
>
> Arcu ac tortor dignissim convallis aenean. Mauris pharetra et ultrices neque ornare. Scelerisque fermentum dui faucibus in ornare. Nibh tellus molestie nunc non blandit.
@@ -0,0 +1,32 @@
blockquote {
margin: 3em 0 3em 2em;
padding: 0 7px;
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;
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;
}
@@ -195,31 +195,6 @@ div.recent-posts p {
.article-content p {
margin: 20px 0;
}
blockquote {
margin: 2em 0 0 2em;
padding: 0 0 0 7px;
}
blockquote:before {
content: open-quote;
vertical-align: top;
font-size: 4em;
margin-left: -0.8em;
color: #646464;
position: absolute;
}
blockquote:after {
visibility: hidden;
content: close-quote;
}
blockquote p {
display: inline;
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: inherit;
font-variant: normal;
line-height: 1.7em;
text-transform: none;
font-weight: 300;
}
.article-content ul:not(.related-posts-list):not(.articles-timeline) {
font-size: inherit;
list-style-type: disc;
@@ -513,8 +488,6 @@ a#allposts:hover {
}
/* reST specific rules*/
.literal {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #f7f7f9;
border-radius: var(--border-radius);
border: 1px solid #e1e1e8;
@@ -588,8 +561,6 @@ table {
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
-webkit-border-radius: var(--border-radius);
-moz-border-radius: var(--border-radius);
border-radius: var(--border-radius);
}

@@ -605,27 +576,19 @@ table thead:first-child tr:first-child th {
}

table thead:first-child tr:first-child > th:first-child {
-webkit-border-top-left-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
-moz-border-radius-topleft: 6px;
}

table thead:first-child tr:first-child > th:last-child {
-webkit-border-top-right-radius: var(--border-radius);
border-top-right-adius: var(--border-radius);
-moz-border-radius-topright: 6px;
border-top-right-radius: var(--border-radius);
}

table tbody:last-child tr:last-child > td:first-child {
-webkit-border-bottom-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
-moz-border-radius-bottomleft: 6px;
}

table tbody:last-child tr:last-child > td:last-child {
-webkit-border-bottom-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
-moz-border-radius-bottomright: 6px;
}

table tbody > tr:nth-child(odd) > td {

0 comments on commit 068d50a

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