From 4c067d7f5aaba8a010059a06e755a629c70e1fcf Mon Sep 17 00:00:00 2001
From: Dowon Kang <dowon.kang@gmail.com>
Date: Thu, 15 Nov 2012 11:26:49 +0900
Subject: [PATCH 1/2] Make only one <li> for each query

---
 index.html | 267 ++++++++++++++++++++++++++---------------------------
 1 file changed, 129 insertions(+), 138 deletions(-)

diff --git a/index.html b/index.html
index 99a2b97..d390784 100644
--- a/index.html
+++ b/index.html
@@ -69,12 +69,6 @@
 	p {
 		color: #757575;
 	}
-	ul li.active {
-		display: none;
-	}
-	ul li.inactive {
-		display: block;
-	}
 	a {
 		color: #d14836;
 	}
@@ -84,145 +78,174 @@
 		color: #757575;
 	}
 	code {
-		background: black;
+		background: #ccc;
 		color: white;
 		padding: 5px;
 		font-family: UniversLTW01-47LightCn,sans-serif;
 		text-transform: uppercase;
 	}
-	.inactive code {
-		background: #ccc;
-	}
 	#byline {
 		text-align: center;
 	}
 	@media screen {
-		li.active.screen {display:block}
-		li.inactive.what-screen {display:none}
+		.screen code {
+			background: black;
+		}
 	}
 	@media print {
-		li.active.print{display:block}
-		li.inactive.what-print {display:none}
+		.print code {
+			background: black;
+		}
 	}
 	@media projection {
-		li.active.projection {display:block}
-		li.inactive.what-projection {display:none}
+		.projection code {
+			background: black;
+		}
 	}
 	@media handheld {
-		li.active.handheld {display:block}
-		li.inactive.what-handheld {display:none}
+		.handheld code {
+			background: black;
+		}
 	}
 	@media (orientation : portrait) {
-		li.active.portrait {display:block}
-		li.inactive.what-portrait {display:none}
+		.portrait code {
+			background: black;
+		}
 	}
 	@media (orientation : landscape) {
-		li.active.landscape {display:block}
-		li.inactive.what-landscape {display:none}
+		.landscape code {
+			background: black;
+		}
 	}
 	@media (-webkit-min-device-pixel-ratio: 2) {
-		li.active.retina {display:block}
-		li.inactive.what-retina {display:none}
+		.retina code {
+			background: black;
+		}
 	}
 	@media tv {
-		li.active.tv {display:block}
-		li.inactive.what-tv {display:none}
+		.tv code {
+			background: black;
+		}
 	}
 	@media (color) {
-		li.active.color {display:block}
-		li.inactive.what-color {display:none}
+		.color code {
+			background: black;
+		}
 	}
 	@media (min-color-index: 1) {
-		li.active.color-index {display:block}
-		li.inactive.what-color-index {display:none}
+		.color-index code {
+			background: black;
+		}
 	}
 	@media (monochrome) {
-		li.active.monochrome {display:block}
-		li.inactive.what-monochrome {display:none}
+		.monochrome code {
+			background: black;
+		}
 	}
 	@media (min-device-width:1px) {
-		li.active.min-device-width {display:block}
-		li.inactive.what-min-device-width {display:none}
+		.min-device-width code {
+			background: black;
+		}
 	}
 	@media (max-device-width:100000em) {
-		li.active.max-device-width {display:block}
-		li.inactive.what-max-device-width {display:none}
+		.max-device-width code {
+			background: black;
+		}
 	}
 	@media (min-device-height:1px) {
-		li.active.min-device-height {display:block}
-		li.inactive.what-min-device-height {display:none}
+		.min-device-height code {
+			background: black;
+		}
 	}
 	@media (max-device-height:100000em) {
-		li.active.max-device-height {display:block}
-		li.inactive.what-max-device-height {display:none}
+		.max-device-height code {
+			background: black;
+		}
 	}
 	@media (min-width:1px) {
-		li.active.min-width {display:block}
-		li.inactive.what-min-width {display:none}
+		.min-width code {
+			background: black;
+		}
 	}
 	@media (max-width:1000em) {
-		li.active.max-width {display:block}
-		li.inactive.what-max-width {display:none}
+		.max-width code {
+			background: black;
+		}
 	}
 	@media (min-height:1px) {
-		li.active.min-height {display:block}
-		li.inactive.what-min-height {display:none}
+		.min-height code {
+			background: black;
+		}
 	}
 	@media (max-height:1000em) {
-		li.active.max-height {display:block}
-		li.inactive.what-max-height {display:none}
+		.max-height code {
+			background: black;
+		}
 	}
 	@media (min-resolution:1dpcm) {
-		li.active.min-resolution {display:block}
-		li.inactive.what-min-resolution {display:none}
+		.min-resolution code {
+			background: black;
+		}
 	}
 	@media (max-resolution:10000dpcm) {
-		li.active.max-resolution {display:block}
-		li.inactive.what-max-resolution {display:none}
+		.max-resolution code {
+			background: black;
+		}
 	}
 	@media (scan:progressive) {
-		li.active.scan-progressive {display:block}
-		li.inactive.what-scan-progressive {display:none}
+		.scan-progressive code {
+			background: black;
+		}
 	}
 	@media (scan:interlace) {
-		li.active.scan-interlace {display:block}
-		li.inactive.what-scan-interlace {display:none}
+		.scan-interlace code {
+			background: black;
+		}
 	}
 	@media (grid) {
-		li.active.grid {display:block}
-		li.inactive.what-grid {display:none}
+		.grid code {
+			background: black;
+		}
 	}
 	@media (luminosity:normal) {
-		li.active.luminosity-normal {display:block}
-		li.inactive.what-luminosity-normal {display:none}
+		.luminosity-normal code {
+			background: black;
+		}
 	}
 	@media (luminosity:dim) {
-		li.active.luminosity-dim {display:block}
-		li.inactive.what-luminosity-dim {display:none}
+		.luminosity-dim code {
+			background: black;
+		}
 	}
 	@media (luminosity:washed) {
-		li.active.luminosity-washed {display:block}
-		li.inactive.what-luminosity-washed {display:none}
+		.luminosity-washed code {
+			background: black;
+		}
 	}
 	@media (pointer:coarse) {
-		li.active.coarse {display:block}
-		li.inactive.what-coarse {display:none}
+		.coarse code {
+			background: black;
+		}
 	}
 	@media (pointer:fine) {
-		li.active.fine {display:block}
-		li.inactive.what-fine {display:none}
+		.fine code {
+			background: black;
+		}
 	}
 	@media (pointer:none) {
-		li.active.pointer-none {display:block}
-		li.inactive.what-pointer-none {display:none}
+		.pointer-none code {
+			background: black;
+		}
 	}
 	@media (script) {
-		li.active.script {display:block}
-		li.inactive.what-script {display:none}	
+		.script code {
+			background: black;
+		}
 	}
 	@media (hover) {
-		li.active.hover {display:block}
-		li.inactive.what-hover {display:none}	
+		.hover code {
+			background: black;
+		}
 	}
 	@media (min-width:36.25em) {
 		h1 {
@@ -248,70 +271,38 @@ <h1>Palm Reader</h1>
 		<h2>Owner's Manual</h2>
 		<p class="test">All the media query tests are listed below, the darker ones are currently active on this device</p>
 		<ul>
-			<li class="active screen"><code>screen</code></li>
-			<li class="inactive what-screen"><code>screen</code></li>
-			<li class="active print"><code>print</code></li>
-			<li class="inactive what-print"><code>print</code></li>
-			<li class="active tv"><code>tv</code></li>
-			<li class="inactive what-tv"><code>tv</code></li>
-			<li class="active color"><code>color</code></li>
-			<li class="inactive what-color"><code>color</code></li>
-			<li class="active color-index"><code>(color-index)</code></li>
-			<li class="inactive what-color-index"><code>(color-index)</code></li>
-			<li class="active monochrome"><code>monochrome</code></li>
-			<li class="inactive what-monochrome"><code>monochrome</code></li>
-			<li class="active handheld"><code>handheld</code></li>
-			<li class="inactive what-handheld"><code>handheld</code></li>
-			<li class="active projection"><code>projection</code></li>
-			<li class="inactive what-projection"><code>projection</code></li>
-			<li class="active portrait"><code>(orientation : portrait)</code></li>
-			<li class="inactive what-portrait"><code>(orientation : portrait)</code></li>
-			<li class="active landscape"><code>(orientation : landscape)</code></li>
-			<li class="inactive what-landscape"><code>(orientation : landscape)</code></li>
-			<li class="active retina"><code>(-webkit-min-device-pixel-ratio: 2)</code></li>
-			<li class="inactive what-retina"><code>(-webkit-min-device-pixel-ratio: 2)</code></li>
-			<li class="active scan-progressive"><code>(scan:progressive)</code></li>
-			<li class="inactive what-scan-progressive"><code>(scan:progressive)</code></li>
-			<li class="active scan-interlace"><code>(scan:interlace)</code></li>
-			<li class="inactive what-scan-interlace"><code>(scan:interlace)</code></li>
-			<li class="active grid"><code>(grid)</code></li>
-			<li class="inactive what-grid"><code>(grid)</code></li>
-			<li class="active min-device-width"><code>(min-device-width)</code></li>
-			<li class="inactive what-min-device-width"><code>(min-device-width)</code></li>
-			<li class="active max-device-width"><code>(max-device-width)</code></li>
-			<li class="inactive what-max-device-width"><code>(max-device-width)</code></li>
-			<li class="active min-device-height"><code>(min-device-height)</code></li>
-			<li class="inactive what-min-device-height"><code>(min-device-height)</code></li>
-			<li class="active max-device-height"><code>(max-device-height)</code></li>
-			<li class="inactive what-max-device-height"><code>(max-device-height)</code></li>
-			<li class="active min-width"><code>(min-width)</code></li>
-			<li class="inactive what-min-width"><code>(min-width)</code></li>
-			<li class="active max-width"><code>(max-width)</code></li>
-			<li class="inactive what-max-width"><code>(max-width)</code></li>
-			<li class="active min-height"><code>(min-height)</code></li>
-			<li class="inactive what-min-height"><code>(min-height)</code></li>
-			<li class="active max-height"><code>(max-height)</code></li>
-			<li class="inactive what-max-height"><code>(max-height)</code></li>
-			<li class="active min-resolution"><code>(min-resolution)</code></li>
-			<li class="inactive what-min-resolution"><code>(min-resolution)</code></li>
-			<li class="active max-resolution"><code>(max-resolution)</code></li>
-			<li class="inactive what-max-resolution"><code>(max-resolution)</code></li>
-			<li class="active fine"><code>(pointer:coarse)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-fine"><code>(pointer:coarse)</code> <span>[MQ Level 4]</li>
-			<li class="active coarse"><code>(pointer:fine)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-coarse"><code>(pointer:fine)</code> <span>[MQ Level 4]</li>
-			<li class="active pointer-none"><code>(pointer:none)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-pointer-none"><code>(pointer:none)</code> <span>[MQ Level 4]</li>
-			<li class="active luminosity-normal"><code>(luminosity:normal)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-luminosity-normal"><code>(luminosity:normal)</code> <span>[MQ Level 4]</li>
-			<li class="active luminosity-dim"><code>(luminosity:dim)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-luminosity-dim"><code>(luminosity:dim)</code> <span>[MQ Level 4]</li>
-			<li class="active luminosity-washed"><code>(luminosity:washed)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-luminosity-washed"><code>(luminosity:washed)</code> <span>[MQ Level 4]</li>
-			<li class="active hover"><code>(hover)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-hover"><code>(hover)</code> <span>[MQ Level 4]</li>
-			<li class="active script"><code>(script)</code> <span>[MQ Level 4]</li>
-			<li class="inactive what-script"><code>(script)</code> <span>[MQ Level 4]</li>
+			<li class="screen"><code>screen</code></li>
+			<li class="print"><code>print</code></li>
+			<li class="tv"><code>tv</code></li>
+			<li class="color"><code>color</code></li>
+			<li class="color-index"><code>(color-index)</code></li>
+			<li class="monochrome"><code>monochrome</code></li>
+			<li class="handheld"><code>handheld</code></li>
+			<li class="projection"><code>projection</code></li>
+			<li class="portrait"><code>(orientation : portrait)</code></li>
+			<li class="landscape"><code>(orientation : landscape)</code></li>
+			<li class="retina"><code>(-webkit-min-device-pixel-ratio: 2)</code></li>
+			<li class="scan-progressive"><code>(scan:progressive)</code></li>
+			<li class="scan-interlace"><code>(scan:interlace)</code></li>
+			<li class="grid"><code>(grid)</code></li>
+			<li class="min-device-width"><code>(min-device-width)</code></li>
+			<li class="max-device-width"><code>(max-device-width)</code></li>
+			<li class="min-device-height"><code>(min-device-height)</code></li>
+			<li class="max-device-height"><code>(max-device-height)</code></li>
+			<li class="min-width"><code>(min-width)</code></li>
+			<li class="max-width"><code>(max-width)</code></li>
+			<li class="min-height"><code>(min-height)</code></li>
+			<li class="max-height"><code>(max-height)</code></li>
+			<li class="min-resolution"><code>(min-resolution)</code></li>
+			<li class="max-resolution"><code>(max-resolution)</code></li>
+			<li class="fine"><code>(pointer:coarse)</code> <span>[MQ Level 4]</li>
+			<li class="coarse"><code>(pointer:fine)</code> <span>[MQ Level 4]</li>
+			<li class="pointer-none"><code>(pointer:none)</code> <span>[MQ Level 4]</li>
+			<li class="luminosity-normal"><code>(luminosity:normal)</code> <span>[MQ Level 4]</li>
+			<li class="luminosity-dim"><code>(luminosity:dim)</code> <span>[MQ Level 4]</li>
+			<li class="luminosity-washed"><code>(luminosity:washed)</code> <span>[MQ Level 4]</li>
+			<li class="hover"><code>(hover)</code> <span>[MQ Level 4]</li>
+			<li class="script"><code>(script)</code> <span>[MQ Level 4]</li>
 		</ul>
 
 		<hr>

From 86b4f8931b3a9a072b423b872834787fb85c4f83 Mon Sep 17 00:00:00 2001
From: Dowon Kang <dowon.kang@gmail.com>
Date: Thu, 15 Nov 2012 11:31:08 +0900
Subject: [PATCH 2/2] Fix class names for (pointer:coarse) and (pointer:fine)

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index d390784..06c1f88 100644
--- a/index.html
+++ b/index.html
@@ -223,12 +223,12 @@
 		}
 	}
 	@media (pointer:coarse) {
-		.coarse code {
+		.pointer-coarse code {
 			background: black;
 		}
 	}
 	@media (pointer:fine) {
-		.fine code {
+		.pointer-fine code {
 			background: black;
 		}
 	}
@@ -295,8 +295,8 @@ <h2>Owner's Manual</h2>
 			<li class="max-height"><code>(max-height)</code></li>
 			<li class="min-resolution"><code>(min-resolution)</code></li>
 			<li class="max-resolution"><code>(max-resolution)</code></li>
-			<li class="fine"><code>(pointer:coarse)</code> <span>[MQ Level 4]</li>
-			<li class="coarse"><code>(pointer:fine)</code> <span>[MQ Level 4]</li>
+			<li class="pointer-coarse"><code>(pointer:coarse)</code> <span>[MQ Level 4]</li>
+			<li class="pointer-fine"><code>(pointer:fine)</code> <span>[MQ Level 4]</li>
 			<li class="pointer-none"><code>(pointer:none)</code> <span>[MQ Level 4]</li>
 			<li class="luminosity-normal"><code>(luminosity:normal)</code> <span>[MQ Level 4]</li>
 			<li class="luminosity-dim"><code>(luminosity:dim)</code> <span>[MQ Level 4]</li>