1
0
Fork 0

Mobile refinements

master
Ambrose Chua 2014-08-30 22:33:37 +08:00
parent 323726ce3e
commit b780905d47
3 changed files with 28 additions and 15 deletions

View File

@ -34,5 +34,6 @@
<p>&copy; 2014 <a href="http://facebook.com/euricainc">eurica inc. </a></p>
</footer>
{% endif %}
<script src="/scripts/main.js"></script>
</body>
</html>

10
scripts/main.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -32,13 +32,21 @@ main {
font-size: calc(0.8vw + 12px);
line-height: 1.4em;
/*padding-top: 20vh;*/
padding-top: 5em;
padding-top: 4em;
}
main.pun {
padding: 0;
margin: 0;
max-width: none;
}
.puncontent {
font-size: 2.2em;
line-height: 1.2em;
padding: 10vh 10vw;
min-height: 80vh;
/*padding-top: 25vh;*/
padding-top: 2.7em;
}
a:not(.btn) {
color: inherit;
@ -50,7 +58,7 @@ a:not(.btn) {
1px 1px #fff, -1px 1px #fff, -1px 1px #fff, -1px -1px #fff*/
-webkit-transition: 0.5s box-shadow;
}
a:hover, a:focus {
a:hover, a:focus, a.tapped {
box-shadow: 0 2px 0 0 #444;
}
.btn {
@ -70,14 +78,14 @@ a:hover, a:focus {
line-height: 1em;
font-family: "Shadows Into Light Two", sans-serif;
}
.btn:hover {
.btn:hover, .btn.tapped {
box-shadow: 0 2em 0 0 #444 inset;
color: #fff;
}
.btn.disabled {
opacity: 0.8;
}
.btn.disabled:hover {
.btn.disabled:hover, .btn.disabled.tapped {
box-shadow: 0 0 0 0 #444 inset;
color: #444;
}
@ -107,7 +115,7 @@ a:hover, a:focus {
color: #3b5998;
box-shadow: 0 0 0 0 #3b5998 inset;
}
.btn[href="#facebook"]:hover {
.btn[href="#facebook"]:hover, .btn[href="#facebook"].tapped {
box-shadow: 0 2em 0 0 #3b5998 inset;
color: #fff;
}
@ -116,7 +124,7 @@ a:hover, a:focus {
color: #00aced;
box-shadow: 0 0 0 0 #00aced inset;
}
.btn[href="#twitter"]:hover {
.btn[href="#twitter"]:hover, .btn[href="#twitter"].tapped {
box-shadow: 0 2em 0 0 #00aced inset;
color: #fff;
}
@ -133,16 +141,10 @@ a:hover, a:focus {
opacity: 1;
}
.puncontent {
font-size: 2.2em;
line-height: 1.2em;
padding: 10vh 10vw;
min-height: 80vh;
padding-top: 25vh;
}
.center {
text-align: center;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
width: 1em;
height: 1em;
@ -292,7 +294,7 @@ th {
font-weight: 900;
transition: 0.25s color, 0.25s background-color, 0.4s box-shadow;
}
.site-header h1 .circle:hover {
.site-header h1 .circle:hover, .site-header h1 .circle.tapped {
color: #e74c3c;
background-color: #fff;
box-shadow: 2px 2px 10px #e74c3c;
@ -344,7 +346,7 @@ th {
display: block;
height: 100%;
}
.site-header nav a:hover {
.site-header nav a:hover, .site-header nav a.tapped {
background-color: #fff;
color: #e74c3c;
}