kihlstrom · August 19, 2014 14:18
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE HTML>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>HTML Swatches</title>
 <style>

 body
 {
 	margin: 1em;
 	background: #ccc;
 	color: #333;
 	font: 1em/1.0 Georgia, 'New Century Schoolbook', 'Nimbus Roman No9 L', serif;
 	-webkit-text-size-adjust: 100%;
 	-ms-text-size-adjust: 100%;
 }

 .swatches
 {
 	list-style: none;
 	margin: 0 0 0 -1em;
 	padding: 1em 0 0 0;
 }

 .swatches dt,
 .swatches dd
 {
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 	display: inline-block;
 	padding: 0;
 	width: 8em;
 	height: 8em;
 }

 .swatches dt
 {
 	margin: 0 0 0 1em;
 	padding-left: 0.25em;
 	vertical-align: top;
 }

 .swatches dd
 {
 	position: relative;
 	margin: 1.25em 0 1em -8em;
 	border: 0.25em solid #fff;
 	border-radius: 0.5em;
 }

 .swatches span
 {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	margin: 0;
 	padding: 0.25em 0.0625em 0 0.25em;
 	border-top-left-radius: 0.125em;
 	background: #fff;
 	color: #555;
 	font-family: 'Courier New', monospace;
 }

 .swatches span:before
 {
 	content: '#'
 }

 @media only screen and (min-width: 42em)
 {
 	.swatches dt, .swatches dd { width: 12em; }
 	.swatches dd { margin-left: -12em; }
 }

 </style>
 </head>
 <body>
 <dl class="swatches">
 	<dt>white</dt><dd style="background: #ffffff;"><span>ffffff</span></dd>
 	<dt>red</dt><dd style="background: #d62b21;"><span>d62b21</span></dd>
 	<dt>dark grey</dt><dd style="background: #333333;"><span>333333</span></dd>
 	<dt>black</dt><dd style="background: #000000;"><span>000000</span></dd>
 </dl>
 </body>
 </html>
	<!DOCTYPE HTML>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML Swatches</title>
	<style>

	body
	{
	margin: 1em;
	background: #ccc;
	color: #333;
	font: 1em/1.0 Georgia, 'New Century Schoolbook', 'Nimbus Roman No9 L', serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	}

	.swatches
	{
	list-style: none;
	margin: 0 0 0 -1em;
	padding: 1em 0 0 0;
	}

	.swatches dt,
	.swatches dd
	{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	padding: 0;
	width: 8em;
	height: 8em;
	}

	.swatches dt
	{
	margin: 0 0 0 1em;
	padding-left: 0.25em;
	vertical-align: top;
	}

	.swatches dd
	{
	position: relative;
	margin: 1.25em 0 1em -8em;
	border: 0.25em solid #fff;
	border-radius: 0.5em;
	}

	.swatches span
	{
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.25em 0.0625em 0 0.25em;
	border-top-left-radius: 0.125em;
	background: #fff;
	color: #555;
	font-family: 'Courier New', monospace;
	}

	.swatches span:before
	{
	content: '#'
	}

	@media only screen and (min-width: 42em)
	{
	.swatches dt, .swatches dd { width: 12em; }
	.swatches dd { margin-left: -12em; }
	}

	</style>
	</head>
	<body>
	<dl class="swatches">
	<dt>white</dt><dd style="background: #ffffff;"><span>ffffff</span></dd>
	<dt>red</dt><dd style="background: #d62b21;"><span>d62b21</span></dd>
	<dt>dark grey</dt><dd style="background: #333333;"><span>333333</span></dd>
	<dt>black</dt><dd style="background: #000000;"><span>000000</span></dd>
	</dl>
	</body>
	</html>