<article class="post cms-blog-dump">
<h1>Talking type-patterns on CSS-tricks</h1>
<p>Intoduction paragraph - and we'd like to style this with a slightly different size font then the next (normal) paragraphs</p>
<h2>Some level 2 headings</h2>
<h2>And maybe someone accidentally puts 2 headings in a row</h2>
<ol>
<li>and some <strong>list</strong></li>
<li>and here</li>
</ol>
<p>Or if a blog post is too boring - then think of a list of bands on an event site. <mark>You never know how many there will be</mark> or <em>which ones</em> are <strong>headlining</strong>, so you have to write rules that will handle whatever happens.</p>
<p>Paragraph Example to show space.</p>
<p>Paragraph Example to show space.</p>
<h1>Really really long heading level 1 so that we can work out line-height and other things. This starts to become a living style-guide pretty quickly. </h1>
<h2>Really really long heading level 2 so that we can work out line-height and other things. This starts to become a living style-guide pretty quickly. </h2>
<p>Paragraph Example to show space.</p>
<p>Paragraph Example to show space.</p>
<ol>
<li>and some <strong>list</strong></li>
<li>and here</li>
</ol>
<h2>Really really long heading level 2 so that we can work out line-height and other things. This starts to become a living style-guide pretty quickly. </h2>
<p>Paragraph Example to show space.</p>
<h2>Some level 2 headings</h2>
<ol>
<li>and some <strong>list</strong></li>
<li>and here</li>
</ol>
</article>
/* RESET added in cog ^ */
/* VARIABLES etc too */
/* TYPE-PATTERNS */
@mixin calm-voice() {
font-family: Serif;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.02em;
max-width: 80ch;
strong {
font-weight: 700;
}
em {
font-style: italic;
}
mark {
background-color: wheat;
}
}
@mixin loud-voice() {
font-family: Sans-Serif;
font-size: 30px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.03em;
max-width: 54ch;
}
@mixin attention-voice() {
font-family: Sans-Serif;
font-size: 24px;
line-height: 1.4;
letter-spacing: 0.04em;
max-width: 60ch;
}
@mixin styled-ordered-list() {
list-style: disc;
margin: 20px 0;
padding-left: 1.2rem;
li {
@include calm-voice();
&:not(:first-of-type) {
margin-top: 10px;
}
}
}
/* GLOBAL STRUCTURE */
body {
margin: 0 auto;
width: 98%;
max-width: 800px;
}
/* STYLES */
article {
padding: 20px 10px;
h1 {
@include loud-voice();
}
h2 {
@include attention-voice();
}
p {
@include calm-voice();
&:first-of-type {
background: lightgreen;
padding: 1em;
}
}
ol {
@include styled-ordered-list()
}
* + * {
margin-top: 1em;
}
}
View Compiled
/*
Some people are happy to use this
https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
BUT I prefer to finese it and declare every situation of what comes before what - however this makes the point
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.