CSS fixes, centering for all screen sizes

hourglass/client/login/login.css

@@ -56,32 +56,42 @@
 #loginMain {
 	width: 100%;
 	height: 84vh;
-
-	background-color: #E5E5E5;
-	background-image: url("banner100.jpg");
-	background-size: 100vw 84vh;
-
+	
 	display: table-row;
 	position: absolute;
 	top: 11vh;
 }
 
-#circle {
-	width: 95vh;
-	height: 95vh;
-	margin: auto;
-	margin-top: -8vh;
+#bannerBg {
+	margin-top: 1%;
+	height: 86vh;
 
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	z-index: -1;
+
+	transform:translate(-50%, -50%);
+}
+
+#circle {
+	width: 98vh;
+	height: 98vh;
+	
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 
 	background-color: rgba(0,0,0,0.2);
 	position: relative;
+	top: 50%;
+	left: 50%;
 	z-index: 0;
 
 	-webkit-filter: drop-shadow(2px 2px 5px #333);
 	filter: drop-shadow(2px 2px 5px #333);
+
+	transform: translate(-50%, -50%);
 }
 
 #loginContent {
@@ -186,4 +196,4 @@ a {
 
 a:hover {
 	color: #00BFFF;
-}
+}

hourglass/client/login/login.html

@@ -1,23 +1,26 @@
 <template name="login">
-	<div id="loginCont">
-		<header id="loginHeader">
-			<img id="logo" src="logo.png">
-			<h1 id="loginTitle">Hourglass</h1>
-			<div id="bottomBar"></div>
-		</header>
-		<div id="loginMain">
-			<div id="circle">
-				<div id="loginContent">
-					<h2 class="text">Hourglass</h2>
-					<p class="text">All your work in one place. Finish before your time runs out.</p>
-					<h3 class="text" id="loginButton" onclick="document.getElementById('login-buttons-google').click();">Sign in</h3>
+	<div class="noScroll">
+		<div id="loginCont">
+			<header id="loginHeader">
+				<img id="logo" src="logo.png">
+				<h1 id="loginTitle">Hourglass</h1>
+				<div id="bottomBar"></div>
+			</header>
+			<div id="loginMain">
+				<img id="bannerBg" src="banner100.jpg">
+				<div id="circle">
+					<div id="loginContent">
+						<h2 class="text">Hourglass</h2>
+						<p class="text">All your work in one place. Finish before your time runs out.</p>
+						<h3 class="text" id="loginButton" onclick="document.getElementById('login-buttons-google').click();">Sign in</h3>
+					</div>
 				</div>
 			</div>
+			<footer id="loginFooter">
+				<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
+				<p id="version">Version 0.1.2</p>
+			</footer>
 		</div>
-		<footer id="loginFooter">
-			<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
-			<p id="version">Version 0.1.2</p>
-		</footer>
 	</div>
 	{{> loginButtons}}
 </template>

hourglass/client/main/main.css

@@ -31,9 +31,6 @@ html {
 
 	pointer-events: all;
 
-	/*background-image: url("Hourglass.png");
-	background-size: 1920px 1080px;*/
-
 	-webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -896,7 +893,6 @@ textarea.clickModify {
 	top: 0;
 	left: 0;
 	z-index: -1;
-
 }
 
 #mainBody {