From 2e97d8d1e25d99fbbe744c4d3212c3f50b059518 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Sat, 30 Oct 2010 13:28:38 +0400
Subject: [PATCH] media queries for basic font-size

---
 index.htm             | 24 ++++++++++++++++++++++--
 styles/projection.css | 16 +++++++++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/index.htm b/index.htm
index 1167a40..3b4f4b9 100755
--- a/index.htm
+++ b/index.htm
@@ -16,6 +16,26 @@
 			</article>
 			<img src="pictures/evolution.jpg" alt="">
 		</section>
+		<!-- <section class="slide" id="Resolutions">
+			<article>
+				<h2>Resolutions</h2>
+				<ol>
+					<li onclick="windowTest(this)">1280 × 1024</li>
+					<li onclick="windowTest(this)">1440 × 900</li>
+					<li onclick="windowTest(this)">1280 × 800</li>
+					<li onclick="windowTest(this)">1024 × 768</li>
+					<li onclick="windowTest(this)">800 × 600</li>
+					<li onclick="windowTest(this)">640 × 480</li>
+					<li onclick="windowTest(this)">320 × 240</li>
+				</ol>
+				<script>
+					function windowTest( e ) {
+						var size = e.innerHTML.split( ' × ' );
+						window.resizeTo( parseFloat(size[0]), parseFloat(size[1]) + (window.outerHeight-window.innerHeight) );
+					}
+				</script>
+			</article>
+		</section> -->
 		<section class="slide" id="Header">
 			<article>
 				<h2>Heading</h2>
@@ -100,7 +120,7 @@
 			<article>
 				<h2>Block Quote</h2>
 				<blockquote cite="Anonymous">
-					<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
+					<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive…</p>
 				</blockquote>
 			</article>
 		</section>
@@ -132,7 +152,7 @@
 					<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
 					<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
 				</ul>
-				<p>Shower project: <a href="http://github.com/pepelsbey/shower">http://github.com/pepelsbey/shower</a></p>
+				<p>Shower: <a href="http://github.com/pepelsbey/shower">http://github.com/pepelsbey/shower</a></p>
 			</article>
 		</section>
 	</div>
diff --git a/styles/projection.css b/styles/projection.css
index e186b94..096de3b 100755
--- a/styles/projection.css
+++ b/styles/projection.css
@@ -4,13 +4,27 @@
 BODY {
 	background:#000;
 	color:#FFF;
-	font:75px 'PTSans', sans-serif;
+	font:1em 'PTSans', sans-serif;
 	counter-reset:paging;
 	}
 A {
 	text-decoration:none;
 	}
 
+/* Basic Font-Size
+---------------------------------------- */
+
+@media all and ( min-device-height:240px  ), ( min-height:240px  ) { BODY { font-size:15px } }
+@media all and ( min-device-height:480px  ), ( min-height:480px  ) { BODY { font-size:30px } }
+@media all and ( min-device-height:600px  ), ( min-height:600px  ) { BODY { font-size:38px } }
+@media all and ( min-device-height:768px  ), ( min-height:768px  ) { BODY { font-size:48px } }
+@media all and ( min-device-height:800px  ), ( min-height:800px  ) { BODY { font-size:50px } }
+@media all and ( min-device-height:900px  ), ( min-height:900px  ) { BODY { font-size:56px } }
+@media all and ( min-device-height:1024px ), ( min-height:1024px ) { BODY { font-size:64px } }
+@media all and ( min-device-height:1200px ), ( min-height:1200px ) { BODY { font-size:75px } }
+
+/* H ÷ 16 ≈ Font-Size */
+
 /* Slide
 ---------------------------------------- */
 .slide {