kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login CSS for all resolutions, optimized

Browse Source
This commit is contained in:
Kenneth Jao 2016-09-07 11:51:30 -04:00
parent 2b5744dbd4
commit 607bae992d
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
hourglass/client/login/login.css
View File

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

16
hourglass/client/login/login.html
View File

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