Extend and improve stylesheet

- Support for blockquotes
- Support for lists (ol, ul)
- Make tertiary buttons more obvious by using an underline
- Extend demo to showcase new features

snikket_web/scss/_baseline.scss

@@ -7,13 +7,18 @@ body {
 	color: $gray-100;
 }
 
-p {
+p, blockquote, ul, ol {
 	line-height: 1.5;
 	margin: 1.5em 0;
 	font-family: $font-bulk;
 	color: inherit;
 }
 
+blockquote {
+	margin-left: $w-l2;
+	margin-right: $w-l2;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	/* normalise */
 	font-weight: 400;

snikket_web/scss/app.scss

@@ -4,6 +4,22 @@
 $_top-h-size: nth($h-sizes, 1);
 $_top-h-small-size: nth($h-small-sizes, 1);
 
+/* headings */
+
+@for $n from 1 through 6 {
+	h#{$n} {
+		color: $primary-100;
+	}
+}
+
+/* block quotes */
+
+blockquote {
+	margin-left: $w-l2 / 2 - $w-s4 / 2;
+	padding-left: $w-l2 / 2 - $w-s4 / 2;
+	border-left: $w-s4 solid $primary-500;
+}
+
 /* coarse layout */
 
 body {
@@ -482,6 +498,7 @@ button.tertiary, .button.tertiary {
 	background-color: transparent;
 	color: $gray-100;
 	border: none;
+	text-decoration: underline;
 	/* TODO: fix vertical rhyhtm ... */
 	border-radius: $w-s4;
 
@@ -492,6 +509,8 @@ button.tertiary, .button.tertiary {
 	}
 
 	&.accent {
+		text-decoration-color: $accent-500;
+
 		&:hover {
 			background-color: $accent-900;
 			border-color: $accent-800;
@@ -500,6 +519,8 @@ button.tertiary, .button.tertiary {
 	}
 
 	&.danger {
+		text-decoration-color: $alert-500;
+
 		&:hover {
 			background-color: $alert-900;
 			border-color: $alert-800;

snikket_web/templates/demo.html

@@ -16,7 +16,7 @@
 <div class="demo-columns"><div class="demo-column">
 	<h3>Sub-heading</h3>
 	<p>Repudiandae voluptatem ratione voluptatem facere. Rerum recusandae nemo commodi provident praesentium est dignissimos. Aut provident nisi omnis tempore veritatis voluptatem minus esse. Non nulla consequatur id est doloribus quos voluptates. Quae suscipit fugiat minima.</p>
-	<h4>Nested Sub—heading</h4>
+	<h4>Nested Sub-heading</h4>
 	<p>Omnis sit temporibus soluta et inventore. Doloribus velit unde placeat aut necessitatibus distinctio. Sapiente sunt corporis neque ducimus officiis qui. Maxime officia et architecto dolor quos autem expedita. Omnis architecto atque facilis iste dolorem voluptatem consectetur. Cupiditate et officiis accusantium inventore.</p>
 	<h5>Deeper Sub-heading</h5>
 	<p>Perferendis vitae doloribus praesentium natus non. Itaque hic numquam dolorum non vero et excepturi consequatur. Accusantium doloribus molestias impedit laudantium quis accusantium. Repellendus et assumenda voluptate aut ipsa quod. Dolores rerum accusantium cumque voluptatem rerum iure.</p>
@@ -34,6 +34,25 @@
 	<h6>Paragraph Heading (h6)</h6>
 </div></div>
 
+<h2>Text</h2>
+<p>Odit totam deleniti nam. Corporis ea dolorem aut quis nobis. Et sint quo ipsum molestiae.</p>
+<p>Rerum quibusdam <em>assumenda eos</em> cupiditate tempore. Nisi repudiandae impedit laboriosam numquam qui qui consequatur officiis. Doloremque a at voluptate recusandae vitae praesentium voluptas error. Optio vero aliquam libero sit magni. Nulla beatae voluptas quis voluptatibus quam porro.</p>
+<blockquote>Neque libero dicta rem repellat eos. Mollitia commodi quos minima voluptatum sed. Omnis occaecati suscipit et veniam aperiam animi. Laudantium cupiditate natus est similique dolores voluptas consequatur.</blockquote>
+<p>Asperiores est eum qui culpa. <strong>Numquam dolor vero et.</strong> Incidunt culpa dolores alias voluptatem. Iusto maxime harum ducimus ea debitis et. Repellat a esse non rerum ratione. Illum tempore hic veniam sed laborum nemo eveniet.</p>
+<ul>
+	<li>Et ceterum</li>
+	<li>censeo</li>
+	<li>Pidgin delendam</li>
+	<li>esse</li>
+</ul>
+<p>Reprehenderit nihil vel qui laborum sed harum. Facere possimus assumenda et aut laudantium. Accusantium maxime ducimus sapiente.</p>
+<ol>
+	<li>Un</li>
+	<li>Deux</li>
+	<li>Trois</li>
+	<li>Quatre</li>
+</ol>
+
 <h2>Palette</h2>
 <div class="samplerow"><div class="samplehead">gray</div><div class="samplebox gray-100"></div><div class="samplebox gray-200"></div><div class="samplebox gray-300"></div><div class="samplebox gray-400"></div><div class="samplebox gray-500"></div><div class="samplebox gray-600"></div><div class="samplebox gray-700"></div><div class="samplebox gray-800"></div><div class="samplebox gray-900"></div></div>
 <div class="samplerow"><div class="samplehead">success</div><div class="samplebox success-100"></div><div class="samplebox success-200"></div><div class="samplebox success-300"></div><div class="samplebox success-400"></div><div class="samplebox success-500"></div><div class="samplebox success-600"></div><div class="samplebox success-700"></div><div class="samplebox success-800"></div><div class="samplebox success-900"></div></div>