Commit 275ba47b authored by sbiego's avatar sbiego

better sizing for mobile-app

parent a94c3def
......@@ -8,6 +8,13 @@
src: url('font/Oswald-Bold.ttf') format('truetype');
}
html, body {
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
}
body.light {
background: url('img/texture_light.png');
background-color: #ddd;
......
.button,h1{text-transform:uppercase}h1,p{font-style:normal;font-variant:normal}#grad,.HowTo{position:fixed;height:100%;width:100%;margin:0;padding:0}.HowTo,p{text-align:justify}#quadrant,.HowTo.active{display:block}@font-face{font-family:Oswald;src:url(font/Oswald-Regular.ttf) format('truetype')}@font-face{font-family:OswaldBold;src:url(font/Oswald-Bold.ttf) format('truetype')}body.light{background:url(img/texture_light.png) #ddd;margin:0}body.dark{background-image:url(img/texture.png);background-color:#1f1f1f;margin:0}h1{font-family:OswaldBold;font-size:2em}p{font-family:Oswald;font-size:1.15em;font-weight:400}a{color:#555}a:hover{color:#222}#grad{left:0;top:0;overflow:hidden;z-index:0;background:-webkit-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,1));background:-o-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1));background:-moz-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1));background:radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1))}#quadrant{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%)}#CLOCK_SVG{-webkit-transition:.2s ease;transition:.2s ease;cursor:pointer}#CLOCK_SVG:hover,.button{-webkit-transition:.2s ease}#CLOCK_SVG:hover{transform:translateY(2px);transition:.2s ease}#CLOCK_SVG:active{transform:translateY(8px)}@keyframes fadefrombottom{0%{opacity:0;transform:translateY(100%)},100%{opacity:1;transform:translateY(0)}}@keyframes fadefromleft{0%{opacity:0;transform:translateX(-100%)},100%{opacity:1;transform:translateX(0)}}@keyframes fadefromright{0%{opacity:0;transform:translateX(100%)},100%{opacity:1;transform:translateX(0)}}@keyframes fadefromtop{0%{opacity:0;transform:translateY(-100%)},100%{opacity:1;transform:translateY(0)}}@keyframes fadein{0%{opacity:0},100%{opacity:1}}.HowTo{background-color:#efefef;bottom:0;color:#333;top:0;z-index:1001;overflow-y:scroll;overflow-x:hidden}.button,.jscolor{text-align:center;font-family:Oswald;outline:0}.HowTo.inactive{display:none}#HT1.active,#credits.active{display:block;animation:fadein 1s ease}.HowTo.active img,.HowTo.inactive img{animation:fadefromleft 1.5s ease}.HowTo img{position:absolute;left:50%;height:260px;transform:translate(-55%,0);margin-top:70px}.HowTo.inactive img{animation-direction:reverse}.HowTo h1,.HowTo p{position:relative;top:380px;margin:0 20% 0 18%;padding:8px 12px}.HowTo h1{font-size:2.1em}.HowTo p{padding-bottom:100px}.HowTo.active h1,.HowTo.active p{animation:fadefrombottom 1.5s ease}.HowTo.inactive h1,.HowTo.inactive p{animation:fadefrombottom 1.5s ease;animation-direction:reverse}.button{position:fixed;padding:8px;border-radius:3px;border:1px solid rgba(200,200,200,0);color:#999;font-size:1em;cursor:pointer;text-decoration:none;overflow:hidden;animation:fadefrombottom 1s ease;transition:.2s ease}.button:hover{color:#fff;opacity:1;border:1px solid rgba(120,120,120,.4);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo,.button.closeHowTo{background-color:#fff;color:#333;box-shadow:0 2px 3px rgba(0,0,0,.1)}.button.semitransp{opacity:.65}.button.semitransp:hover{opacity:.9}.button:active{transform:scale(.9);-webkit-transition:.2s ease;transition:.2s ease}.button.howto{left:15px;bottom:15px}.button.credits{right:15px;bottom:15px}.button.credits.hidden{display:none}.button.closeHowTo{right:50px;top:-6px;padding:15px 12px 12px;font-size:12pt;animation:fadefromtop 1s ease}.button.HowTo{max-height:22px;max-width:20px;top:50%;padding:15px;text-transform:none}.button.HowTo:hover{box-shadow:0 2px 15px rgba(0,0,0,.1);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo.next{right:-15px;padding:10px 25px 10px 10px;animation:fadefromright 1s ease}.button.HowTo.next:active{transform:translateX(10px);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo.prev{left:-15px;padding:10px 10px 10px 25px;animation:fadefromleft 1s ease}.button.HowTo.prev:active{transform:translateX(-10px);-webkit-transition:.2s ease;transition:.2s ease}.jscolor{position:absolute;top:50%;right:100px;height:60px;width:60px;border:none;box-shadow:0 3px 2px -1px rgba(0,0,0,.8);border-radius:30px;font-size:12pt;transform:translateY(-380%)}.jscolor.active{display:block;animation:fadein 1s ease}.jscolor.inactive{display:none;animation:fadefromleft 1s ease;animation-direction:reverse}
\ No newline at end of file
.button,h1{text-transform:uppercase}h1,p{font-style:normal;font-variant:normal}#grad,.HowTo{position:fixed;height:100%;width:100%;margin:0;padding:0}.HowTo,p{text-align:justify}#quadrant,.HowTo.active{display:block}@font-face{font-family:Oswald;src:url(font/Oswald-Regular.ttf) format('truetype')}@font-face{font-family:OswaldBold;src:url(font/Oswald-Bold.ttf) format('truetype')}body,html{position:absolute;width:100%;height:100%;max-height:100%}body.light{background:url(img/texture_light.png) #ddd;margin:0}body.dark{background-image:url(img/texture.png);background-color:#1f1f1f;margin:0}h1{font-family:OswaldBold;font-size:2em}p{font-family:Oswald;font-size:1.15em;font-weight:400}a{color:#555}a:hover{color:#222}#grad{left:0;top:0;overflow:hidden;z-index:0;background:-webkit-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,1));background:-o-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1));background:-moz-radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1));background:radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,1))}#quadrant{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%)}#CLOCK_SVG{-webkit-transition:.2s ease;transition:.2s ease;cursor:pointer}#CLOCK_SVG:hover,.button{-webkit-transition:.2s ease}#CLOCK_SVG:hover{transform:translateY(2px);transition:.2s ease}#CLOCK_SVG:active{transform:translateY(8px)}@keyframes fadefrombottom{0%{opacity:0;transform:translateY(100%)},100%{opacity:1;transform:translateY(0)}}@keyframes fadefromleft{0%{opacity:0;transform:translateX(-100%)},100%{opacity:1;transform:translateX(0)}}@keyframes fadefromright{0%{opacity:0;transform:translateX(100%)},100%{opacity:1;transform:translateX(0)}}@keyframes fadefromtop{0%{opacity:0;transform:translateY(-100%)},100%{opacity:1;transform:translateY(0)}}@keyframes fadein{0%{opacity:0},100%{opacity:1}}.HowTo{background-color:#efefef;bottom:0;color:#333;top:0;z-index:1001;overflow-y:scroll;overflow-x:hidden}.button,.jscolor{text-align:center;font-family:Oswald;outline:0}.HowTo.inactive{display:none}#HT1.active,#credits.active{display:block;animation:fadein 1s ease}.HowTo.active img,.HowTo.inactive img{animation:fadefromleft 1.5s ease}.HowTo img{position:absolute;left:50%;height:260px;transform:translate(-55%,0);margin-top:70px}.HowTo.inactive img{animation-direction:reverse}.HowTo h1,.HowTo p{position:relative;top:380px;margin:0 20% 0 18%;padding:8px 12px}.HowTo h1{font-size:2.1em}.HowTo p{padding-bottom:100px}.HowTo.active h1,.HowTo.active p{animation:fadefrombottom 1.5s ease}.HowTo.inactive h1,.HowTo.inactive p{animation:fadefrombottom 1.5s ease;animation-direction:reverse}.button{position:fixed;padding:8px;border-radius:3px;border:1px solid rgba(200,200,200,0);color:#999;font-size:1em;cursor:pointer;text-decoration:none;overflow:hidden;animation:fadefrombottom 1s ease;transition:.2s ease}.button:hover{color:#fff;opacity:1;border:1px solid rgba(120,120,120,.4);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo,.button.closeHowTo{background-color:#fff;color:#333;box-shadow:0 2px 3px rgba(0,0,0,.1)}.button.semitransp{opacity:.65}.button.semitransp:hover{opacity:.9}.button:active{transform:scale(.9);-webkit-transition:.2s ease;transition:.2s ease}.button.howto{left:15px;bottom:15px}.button.credits{right:15px;bottom:15px}.button.credits.hidden{display:none}.button.closeHowTo{right:50px;top:-6px;padding:15px 12px 12px;font-size:12pt;animation:fadefromtop 1s ease}.button.HowTo{max-height:22px;max-width:20px;top:50%;padding:15px;text-transform:none}.button.HowTo:hover{box-shadow:0 2px 15px rgba(0,0,0,.1);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo.next{right:-15px;padding:10px 25px 10px 10px;animation:fadefromright 1s ease}.button.HowTo.next:active{transform:translateX(10px);-webkit-transition:.2s ease;transition:.2s ease}.button.HowTo.prev{left:-15px;padding:10px 10px 10px 25px;animation:fadefromleft 1s ease}.button.HowTo.prev:active{transform:translateX(-10px);-webkit-transition:.2s ease;transition:.2s ease}.jscolor{position:absolute;top:50%;right:100px;height:60px;width:60px;border:none;box-shadow:0 3px 2px -1px rgba(0,0,0,.8);border-radius:30px;font-size:12pt;transform:translateY(-380%)}.jscolor.active{display:block;animation:fadein 1s ease}.jscolor.inactive{display:none;animation:fadefromleft 1s ease;animation-direction:reverse}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment