Formatted error message

Signed-off-by: Keith Irwin <mail@keithirwin.us>

index.html

@@ -59,7 +59,7 @@
 		
 		<footer>
 			<div style="float:left"><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></div>
-			<div style="float:right">by <a href="https://keithirwin.us/">Keith Irwin</a>.</div>
+			<div style="float:right">by <a href="https://keithirwin.us/">Keith Irwin</a></div>
 		</footer>
 		
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script.js

@@ -1,10 +1,14 @@
 window.addEventListener("deviceorientation", setRose, true);
 
+function tryGPS() {
+	
+}
+
 function setRose(e) {
 	
 	// No orientation data
 	if(!e.absolute) {
-		$('#rose-error').show();
+		$('#no-dir').show();
 	} else {
 		
 		// Rotate rose
@@ -14,6 +18,7 @@ function setRose(e) {
 			'-webkit-transform': rot,
 			'transform': rot
 		});
+
 	}
 	
 }

style.css

@@ -7,8 +7,12 @@ body {
 }
 
 .error, noscript {
-	color: #E00;
+	color: #F22;
+	font-size: 22px;
 	text-align: center;
+	padding: 4vw;
+	background-color: #111;
+	background-color: rgba(0,0,0,.85);
 } .error {
 	display: none;
 }
@@ -18,23 +22,29 @@ body {
 }
 
 @media (orientation:portrait) {
-	header, main, footer {
+	header, main, footer, .error, noscript {
+		position: absolute;
+	} header, main, footer {
 		width: 90vw;
 		padding: 5vw;
-		position: absolute;
+	} .error, noscript {
+		width: 82vw;
 	}
 	header {
 		height: calc(60vh - 60vw);
 		top: 0;
-	}
-	main {
+	} main {
 		height: 90vw;
 		top: calc(60vh - 50vw);
-	}
-	footer {
+	} footer {
 		height: calc(40vh - 60vw);
 		bottom: 0;
 	}
+	main .error {
+		top: 50%;
+		transform: translateY(-50%);
+		padding: 35vw 4vw;
+	}
 }
 @media (orientation:landscape) {