Center game board on the page

2015-09-13 09:23:35 +02:00
parent ad0cea7097
commit dd80e50aee
1 changed files with 15 additions and 5 deletions
--- a/index.html
+++ b/index.html
@@ -18,18 +18,28 @@
 			text-align: center;
 			height: 100%;
 		}
-		#screen{
-			margin: 0 auto;
+		#screenContainer {
 			display: block;
+			position: relative;
 			width: 100%;
-			max-width: 512px;
+			height: 100%;
+			overflow: hidden;
+		}
+		#screen {
+			display: block;
+			position: absolute;
+			margin: auto;
+			top: 0; left: 0; bottom: 0; right: 0;
+			max-width: 100%;
 			max-height: 100%;
-			box-shadow: 0 2px 10px black;
+			box-shadow: 0 0 20px rgb(0,0,0);
 		}
 	</style>
 </head>
 <body>
-	<canvas id="screen" width="512" height="512" />
+	<div id="screenContainer">
+		<canvas id="screen" width="512" height="512" />
+	</div>
 	<script src="code/GameLib.js"></script>
 	<script src="code/CandyFucker.js"></script>
 	<script>