login CSS for all resolutions, optimized

hourglass/client/login/login.css

@@ -1,17 +1,36 @@
+#loginCont {
+	width: 100%;
+	height: 100%;
+	display: table;
+	border-collapse: collapse;
+}
+
+#bottomBar {
+	width: 100%;
+	height: 4px;
+	background-color: #33ADFF;
+	position: absolute;
+	bottom: 0;
+	z-index: 51;
+}
+
 #loginHeader {
 	font-weight: 600;
 	width: 100%;
-	margin: 0;
+	height: 13vh;
+
 	box-shadow: 2px 2px 5px 3px #666;
 
 	background-color: #EBEBEB;
 
-	display: inline-block;
+	display: table-row;
 	position: relative;
 	z-index: 50;
 }
 
 #logo {
+	height: 10vh;
+	width: 10vh;
 	padding: 0.5%;
 	padding-left: 1%;
 	float: left;
@@ -34,18 +53,21 @@
 
 #loginMain {
 	width: 100%;
-	min-height: 100%;
-	position: absolute;
-	top: 11%;
+	height: 80vh;
+
+	border-top: solid 1vh #33ADFF;
+	display: table-row;
 
 	background-color: #E5E5E5;
 	background-image: url("banner100.jpg");
+	background-size: 100vw 80vh;
 }
 
 #circle {
-	position: fixed;
-	top: 50%;
-	left: 50%;
+	width: 95vh;
+	height: 95vh;
+	margin: auto;
+	margin-top: -8vh;
 
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
@@ -58,9 +80,9 @@
 }
 
 #loginContent {
-	position: fixed;
-	top: 50%;
-	left: 50%;
+	width: 80%;
+	margin: auto;
+	padding-top: 16vh;
 }
 
 .text {
@@ -83,7 +105,9 @@ p.text {
 }
 
 #loginButton {
-	font-size: 200%;
+	font-size: 3.5vh;
+	width: 25%;
+	margin: auto;
 	padding: 2%;
 
 	-webkit-border-radius: 6;
@@ -117,13 +141,16 @@ p.text {
 
 #loginFooter {
 	width: 100%;
+	height: 8vh;
 	box-shadow: 2px 2px 5px 3px #666;
 	background-color: #EBEBEB;
 	position: absolute;
 	bottom: 0;
 }
 
-
+.login-buttons {
+	display: none !important;
+}
 
 #github {
 	font-size: 150%;

hourglass/client/login/login.html

@@ -1,22 +1,22 @@
 <template name="login">
-	<header id="loginHeader">
-		<img id="logo" src="logo.png" width="{{logo}}" height="{{logo}}">
-		<h1 id="loginTitle">Hourglass</h1>
-		<div id="loadBar">
-	      <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
-	    </div>
-	</header>
-	<div id="loginMain" style="background-size:{{width}}">
-		<div id="circle" style="width:{{dim}};height:{{dim}};margin:{{margin}}">
-			<div id="loginContent" style="width:{{contDim}};height:{{contDim}};margin:{{contMargin}}">
-				<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" style="{{hea}}">Sign in</h3>
+	<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">Sign in</h3>
+				</div>
 			</div>
 		</div>
+		<footer id="loginFooter">
+			<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
+		</footer>
 	</div>
-	<footer id="loginFooter">
-		<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
-	</footer>
 	{{> loginButtons}}
 </template>