ArticleTemplates/assets/scss/modules/content/_prose.scss (178 lines of code) (raw):
// /*doc
// ---
// title: Prose
// name: prose
// category: Content
// ---
// Adds typographic styling, typically to content fetched from the Guardian Content API.
//
// ```html_example
// <div class="prose">
// <h2>Sub-heading</h2>
// <p>The <code>h2</code> element represents a sub-heading, used for article-level headings.</p>
//
// <h2>Paragraph</h2>
// <p>Paragraphs are (or at least should be) wrapped in <code>p</code> tags.
//
// <h2>Horizontal rule</h2>
// <p>The <code>hr</code> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book as follows:</p>
// <hr/>
//
// <h2>Blockquote</h2>
// <p>The <code>blockquote</code> element represents a section that is being quoted from another source.</p>
// <blockquote class="quoted">
// <p>Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.</p>
// </blockquote>
//
// <p>This can include tweets, which are given a different stylistic treatment:</p>
// <blockquote class="twitter-tweet">
// <p><a href="https://twitter.com/search?q=%23TLC14&src=hash">#TLC14</a> spread of genre sales in books incl self published from Nielsen <a href="http://t.co/Vu9NvGuPZN">pic.twitter.com/Vu9NvGuPZN</a></p>
// — Joanna Penn (@thecreativepenn)
// <a href="https://twitter.com/thecreativepenn/statuses/477384378067480576">June 13, 2014</a>
// </blockquote>
//
// <h2>Ordered list</h2>
// <p>The <code>ol</code> element denotes an ordered list. Each item requires a surrounding <code><li></code> and <code></li></code> tag, to denote individual items within the list.</p>
// <ol>
// <li>This is an ordered list.</li>
// <li>
// This is the second item, which contains a sub list
// <ol>
// <li>This is the sub list, which is also ordered.</li>
// <li>It has two items.</li>
// </ol>
// </li>
// <li>This is the final item on this list.</li>
// </ol>
//
// <h2>Unordered list</h2>
// <p>The <code>ul</code> element denotes an unordered list (ie. a list of loose items that don’t require numbering, or a bulleted list). Again, each item requires a surrounding <code><li></code> and <code></li></code> tag, to denote individual items. Here is an example list showing the constituent parts of the British Isles:</p>
// <ul>
// <li>
// United Kingdom of Great Britain and Northern Ireland:
// <ul>
// <li>England</li>
// <li>Scotland</li>
// <li>Wales</li>
// <li>Northern Ireland</li>
// </ul>
// </li>
// <li>Republic of Ireland</li>
// <li>Isle of Man</li>
// <li>
// Channel Islands:
// <ul>
// <li>Bailiwick of Guernsey</li>
// <li>Bailiwick of Jersey</li>
// </ul>
// </li>
// </ul>
//
// <p>Sometimes we may want each list item to contain block elements, typically a paragraph or two.</p>
// <ul>
// <li>
// <p>The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.</p>
// </li>
// <li>
// <p>Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.</p>
// </li>
// </ul>
//
// <h2>Definition list</h2>
// <p>The <code>dl</code> element is for another type of list called a definition list. Instead of list items, the content of a <code>dl</code> consists of <code>dt</code> (definition term) and <code>dd</code> (definition description) pairs.</p>
// <dl>
// <dt>This is a term.</dt>
// <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
// <dt>Here is another term.</dt>
// <dd>And it gets a definition too, which is this line.</dd>
// <dt>Here is term that shares a definition with the term below.</dt>
// <dt>Here is a defined term.</dt>
// <dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
// </dl>
//
// <h2>Links and anchors</h2>
// <p>The <code>a</code> element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:</p>
// <p><a href="/">Go to the home page</a> or <a href="#banner">return to the top of this page</a>.</p>
//
// <h2>Stressed emphasis</h2>
// <p>The <code>em</code> element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the <code>i</code> element may be preferable. Example:</p>
// <p>You simply <em>must</em> try the negitoro maki!</p>
//
// <h2>Strong importance</h2>
// <p>The <code>strong</code> element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the <code>b</code> element may be preferable. Example:</p>
// <p><strong>Don’t</strong> stick nails in the electrical outlet.</p>
//
// <h2>Table</h2>
// <table class="table">
// <thead>
// <tr>
// <th>Fruit</th>
// <th>Colour</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td>Apple</td>
// <td>Green</td>
// </tr>
// <tr>
// <td>Orange</td>
// <td>Orange</td>
// </tr>
// <tr>
// <td>Banana</td>
// <td>Yellow</td>
// </tr>
// <tr>
// <td>Peach</td>
// <td>Peach</td>
// </tr>
// </tbody>
// </table>
//
// <h2>Figure</h2>
// <p>Wide</p>
// <figure>
// <img src="http://images.mobile-apps.guardianapis.com/sys-images/Guardian/Pix/pictures/2014/6/11/1402512126497/Matt-Kenyon-on-Birmingham-014.jpg?width=900&height=540&quality=60"/>
// <figcaption>
// ‘The absurdity of the inspectors’ findings is clearest in the case of Gracelands, whose staff were taken to task for failing to ensure its 2- to 4-year-olds were protected against ‘extreme and radical behaviour'.' Illustration: Matt Kenyon
// </figcaption>
// </figure>
// <p>Inline (floats to the left of any running text):</p>
// <figure>
// <img src="http://i.guim.co.uk/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2014/6/13/1402656896541/phpdKmNwRAM.jpg" alt="Mil" width="193" class="gu-image"/>
// <figcaption>
// The Sun's picture of Miliband that offended people in Liverpool
// </figcaption>
// </figure>
// <p>Miliband was also confronted by a number of Labour MPs, including Steve Rotheram, the member for for Liverpool Walton. According to a source cited by the Liverpool Echo, Miliband apologised to the MPs. The source is quoted as saying: “Ed Miliband said he was very, very sorry.”</p>
// </div>
// ```
// */
%quoteIconSharedStyles {
font-family: $icon;
font-size: 4rem; // 40px
font-style: normal;
line-height: 1;
display: block;
}
.prose {
@include body();
h2 {
font-family: $egyptian-display;
font-weight: 600;
font-size: 1em;
text-overflow: ellipsis;
margin: 0;
strong,
b {
font-weight: bold;
}
}
p + h2,
figure.figure-wide + h2,
div + h2 {
margin: base-px(2, 0, 0, 0);
}
h2 + p,
h2 + figure {
margin: base-px(.5, 0, 1, 0);
}
h2 + .figure--thumbnail-with-caption,
h2 + .figure--thumbnail {
@include mq($to: col3) {
margin: 18px 9px 6px 0;
}
}
hr {
border: 0;
height: 1px;
background: color(tone-sandy-light);
}
p {
margin: base-px(1, 0);
}
ul,
ol,
dl {
margin: base-px(1, 0);
ul,
ol {
margin: base-px(0, 0, 1, 2);
}
}
ul > li {
p {
display: inline;
}
}
ol {
counter-reset: li;
> li::before {
content: counter(li)'. ';
counter-increment: li;
}
}
dl {
dt {
font-weight: bold;
}
dd {
margin: base-px(0, 0, 1, 0);
}
}
blockquote {
color: color(brightness-46);
font-style: italic;
margin: base-px(2);
&::before {
color: color(brightness-60);
@extend %quoteIconSharedStyles
}
&.quoted {
position: relative;
margin-top: 0;
padding-top: 12px;
color: color(brightness-7);
&::before {
position: relative;
content: '\e11c';
line-height: 0;
font-size: 3rem;
margin-bottom: 25px;
}
}
&.twitter-tweet,
&.js-tweet {
font-family: $guardian-sans;
font-size: $meta-size;
line-height: $meta-lead;
&::before {
content: '\e06b';
padding-bottom: base-px(1);
font-size: 3rem;
}
p {
color: color(brightness-46);
font-size: $meta-size;
line-height: $meta-lead;
margin: base-px(.5, 0);
}
}
}
.element-pullquote {
position: relative;
margin: base-px(1, 0, 2, 0);
blockquote {
font-family: $egyptian-display;
font-style: normal;
font-weight: 200;
font-size: 2.2rem;
line-height: 1.3;
margin: 0;
@include mq($to: col2) {
padding-right: base-px(4);
}
p {
margin: 0;
&::before {
@extend %quoteIconSharedStyles;
font-size: 2.2rem;
content: '\e11c';
display: inline-block;
margin-right: base-px(.5);
}
}
cite {
font-style: normal;
font-size: 1.8rem;
}
}
@include mq($from: col2) {
max-width: 280px;
margin-top: 0;
margin-right: base-px(2);
float: left;
}
@include mq($from: col4) {
margin: 0;
margin-left: -220px;
max-width: 200px;
}
}
*:first-child {
margin-top: 0;
.aside {
border-top: 0;
padding-top: 0;
}
}
}
.prose table,
.table {
font-family: $guardian-sans;
@include meta();
margin: base-px(1, 0);
border-top: 2px solid color(brightness-46);
td,
th {
text-align: left;
vertical-align: top;
}
th {
padding: base-px(.25, 1, 1, 0);
}
td {
border-top: 1px solid color(brightness-93);
padding: base-px(.25, 1, 1, 0);
}
}