<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;
	}
}

/* 
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
*/