<h1>Lea Verou's blog</h1>

<p>Welcome to my blog, where I write about web standards, usability, and open source.</p>

	<h2>Blog Post 1</h2>
	<div class="content">
		<p>Blog post 1 content</p>

	<h2>Blog Post 2</h2>
	<div class="content">
		<p>Blog post 2 content</p>

	<p>Made with &hearts; by Lea Verou</p>
:root {
	--primary-hs: 250 30%;

body {
	background: white;
	color: black;
	font: 100%/1.5 Helvetica Neue, Segoe UI, sans-serif;

h1 {
	color: hsl(var(--primary-hs) 30%);

article {
	background: hsl(var(--primary-hs) 90%);
	border-radius: .3rem;
	overflow: hidden;
	margin: 1em 0;

article h2 {
	padding: .3rem .5rem;
	margin: 0;
	background: hsl(var(--primary-hs) 40%);
	color: white;

article .content {
	padding: 0 .5rem;

footer {
	margin-top: 1rem;
	border-top: 1px solid;
	color: hsl(0 0% 40%);
	font-size: smaller;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.