Improved mobile styling

This commit is contained in:
Syrus Akbary 2015-10-06 23:33:08 -07:00
parent ace871a49f
commit 5a5ce2439f

View File

@ -162,7 +162,7 @@ strong {
font-weight: 100; font-weight: 100;
font-size: 42px; font-size: 42px;
color: #747474; color: #747474;
line-height: 49px; line-height: 1.2em;
text-align: center; text-align: center;
animation: fadeIn .5s ease-in-out forwards; animation: fadeIn .5s ease-in-out forwards;
animation-fill-mode: both; animation-fill-mode: both;
@ -243,7 +243,7 @@ strong {
#page-nav a { #page-nav a {
display: inline-block; display: inline-block;
margin: 0 0; margin: 0 0;
color: #C4C4C4; color: #BBB;
line-height: 32px; line-height: 32px;
height: 32px; height: 32px;
padding: 52px 16px 51px; padding: 52px 16px 51px;
@ -269,11 +269,11 @@ strong {
} }
#page-headline h3 { #page-headline h3 {
font-family: 'Helvetica Neue'; font-family: 'Helvetica Neue';
font-weight: 100; font-weight: 200;
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 8px;
text-transform: uppercase; text-transform: uppercase;
color: #999999; color: #AAA;
letter-spacing: 0.6px; letter-spacing: 0.6px;
line-height: 16px; line-height: 16px;
} }
@ -319,27 +319,74 @@ strong {
@keyframes logo-dash { @keyframes logo-dash {
to { to {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
} }
@keyframes logo-dot { @keyframes logo-dot {
from { from {
opacity: 0.5; opacity: 0.5;
transform:scale(0); transform:scale(0);
} }
to { to {
opacity: 1; opacity: 1;
transform:scale(1); transform:scale(1);
} }
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
}
@media screen and (max-width:599px) {
#main-logo {
margin: 50px auto;
}
#headline h1 {
font-size: 32px;
}
#main-nav {
margin-top: 40px;
}
#main-nav a {
padding: 5px 0;
float: left;
display: block;
clear: left;
}
#top-header {
padding: 0 20px;
}
#page-nav {
float: right;
margin-right: -20px;
margin-top: 6px;
}
#page-nav a {
padding: 0;
display: block;
text-align: right;
padding-right: 20px;
}
#page-nav .github-icon {
text-indent: 10000px;
width: 24px;
height: 24px;
}
#page-nav a.active {
box-shadow: inset -4px 0px 0 #D06D6D;
}
#page-headline {
padding: 48px 0;
}
#page-article {
padding-top: 24px;
padding-bottom: 24px;
}
} }