From d8f636d0a11de894bac4a570548710210677cc05 Mon Sep 17 00:00:00 2001
From: Micah N Gorrell <m@minego.net>
Date: Sat, 19 Jul 2014 13:09:17 -0600
Subject: [PATCH] Adjust the tile size to match the screen size so that
 rendering looks correct on small screen devices

---
 prototype.html | 71 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 52 insertions(+), 19 deletions(-)
diff --git a/prototype.html b/prototype.html
index 85e2670..8cb14b8 100644
--- a/prototype.html
+++ b/prototype.html
@@ -1,8 +1,8 @@
 <html>
 <head>
 <title>Bub</title>
-<!--<meta name="viewport"
-	content="width=device-width, initial-scale=1.0, user-scalable=no">-->
+<meta name="viewport"
+	content="width=device-width, initial-scale=1.0, user-scalable=no">
 <style>
 body {
   margin: 0;
@@ -26,7 +26,6 @@
   display: inline-block;
   padding: 16px;
   background: url("image/wall01.png");
-  background-size: 64px;
 }
 table {
   background: white;
@@ -40,49 +39,83 @@
 }
 td {
   padding: 0;
-  width: 64px;
-  height: 64px;
 }
 td.bubble {
   background: url("image/bubble01.png");
-  background-size: 64px;
 }
 td.wall {
   background: url("image/wall01.png");
-  background-size: 64px;
 }
 td.ladder {
   background: url("image/ladder01.png");
-  background-size: 64px;
 }
 td.left {
   background: url("image/left01.png");
-  background-size: 64px;
 }
 td.right {
   background: url("image/right01.png");
-  background-size: 64px;
 }
 td.key {
   background: url("image/key01.png");
-  background-size: 64px;
 }
 td.door {
   background: url("image/door01.png");
-  background-size: 64px;
 }
 td.flag {
   background: url("image/flag01.png");
-  background-size: 64px;
 }
-img.ork {
-  width: 64px;
-  height: 64px;
+
+@media only screen and (max-width: 575px) {
+	td {
+	  width: 32px;
+	  height: 32px;
+	}
+	#main,
+	td.bubble,
+	td.wall,
+	td.ladder,
+	td.left,
+	td.right,
+	td.key,
+	td.door,
+	td.flag {
+	  background-size: 32px;
+	}
+	img.ork {
+	  width: 32px;
+	  height: 32px;
+	}
+	img.crate {
+	  width: 32px;
+	  height: 32px;
+	}
 }
-img.crate {
-  width: 64px;
-  height: 64px;
+@media only screen and (min-width: 576px) {
+	td {
+	  width: 64px;
+	  height: 64px;
+	}
+	#main,
+	td.bubble,
+	td.wall,
+	td.ladder,
+	td.left,
+	td.right,
+	td.key,
+	td.door,
+	td.flag {
+	  background-size: 64px;
+	}
+	img.ork {
+	  width: 64px;
+	  height: 64px;
+	}
+	img.crate {
+	  width: 64px;
+	  height: 64px;
+	}
 }
+
 #tools {
   padding: 0.5em;
   background: #444 linear-gradient(to bottom, #666, #222);
