Skip to content

Instantly share code, notes, and snippets.

@kennethormandy
Last active December 22, 2015 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kennethormandy/6515120 to your computer and use it in GitHub Desktop.
Save kennethormandy/6515120 to your computer and use it in GitHub Desktop.
When I write Markdown with Harp, this is how I style the blockquote. You can use it as a LESS or Stylus partial if you’d like.
/* Blockquotes
Corresponding Markdown is:
> This is the blockquote
> **Author [Source](http://example.com/article.html)**
Replace the variables with your own.
*/
@font-family-base: Verdana;
@font-family-alternate: Georgia;
@color-text: #333;
blockquote {
font-family: @font-family-alternate;
font-style: italic;
color: lighten(@color-text, 25%);
font-weight: 400;
margin-left: 0;
margin-right: 0;
&:before {
color: lighten(@color-text, 40%);
content: open-quote;
display: block;
font-size: 8em;
line-height: 1;
position: relative;
text-align: right;
float: left;
margin-top: -0.1em;
margin-left: -0.5em;
}
p:last-child {
strong:only-child {
font-style: normal;
font-weight: 600;
font-family: @font-family-base;
display: block;
&:before {
content: "\2014";
}
a {
display: block;
margin-left: 1rem; // One rem should equal the width of the em dash
font-weight: 400;
}
}
}
}
/* Blockquotes
Corresponding Markdown is:
> This is the blockquote
> **Author [Source](http://example.com/article.html)**
Replace the variables with your own.
*/
$font-family-base = Verdana;
$font-family-alternate = Georgia;
$color-text = #333;
blockquote
font-family: $font-family-alternate;
font-style: italic;
color: lighten($color-text, 25%);
font-weight: 400;
margin-left: 0;
margin-right: 0;
&:before
color: lighten($color-text, 40%);
content: open-quote;
display: block;
font-size: 8em;
line-height: 1;
position: relative;
text-align: right;
float: left;
margin-top: -0.1em;
margin-left: -0.5em;
p:last-child
strong:only-child
font-style: normal;
font-weight: 600;
font-family: $font-family-base;
display: block;
&:before
content: "\2014";
a
display: block;
margin-left: 1rem; // One rem should equal the width of the em dash
font-weight: 400;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment