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

CSS fixes, centering for all screen sizes

Browse Source
This commit is contained in:
Kenneth Jao 2016-10-13 14:10:39 -04:00
parent a7154c17dc
commit fcdfa3e63e
3 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,23 +1,26 @@
<template name="login"> <template name="login">
<div id="loginCont"> <div class="noScroll">
<header id="loginHeader"> <div id="loginCont">
<img id="logo" src="logo.png"> <header id="loginHeader">
<h1 id="loginTitle">Hourglass</h1> <img id="logo" src="logo.png">
<div id="bottomBar"></div> <h1 id="loginTitle">Hourglass</h1>
</header> <div id="bottomBar"></div>
<div id="loginMain"> </header>
<div id="circle"> <div id="loginMain">
<div id="loginContent"> <img id="bannerBg" src="banner100.jpg">
<h2 class="text">Hourglass</h2> <div id="circle">
<p class="text">All your work in one place. Finish before your time runs out.</p> <div id="loginContent">
<h3 class="text" id="loginButton" onclick="document.getElementById('login-buttons-google').click();">Sign in</h3> <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>
</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> </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> </div>
{{> loginButtons}} {{> loginButtons}}
</template> </template>

4
hourglass/client/main/main.css
View File

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