Skip to content

Instantly share code, notes, and snippets.

@zry656565
Created December 12, 2014 05:44
Show Gist options
  • Save zry656565/fced782eef692ddc8cc4 to your computer and use it in GitHub Desktop.
Save zry656565/fced782eef692ddc8cc4 to your computer and use it in GitHub Desktop.
usually used to show quotes in paragraph. via: http://miekd.com/articles/pull-quotes-with-html5-and-css/
.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: rightright;
width: 320px;
margin: 12px -140px 24px 36px;
/* Baseline correction */
position: relative;
top: 5px;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment