media queries for basic font-size

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>

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 {