Commit 61bc110b authored by Daniel Shumway's avatar Daniel Shumway

style: better mobile styles

- Footer is no longer cut off

- Floats transition better on tablet-mobile switch
parent bfabe51d
Pipeline #35961775 passed with stage
in 50 seconds
......@@ -186,20 +186,6 @@ main {
main article nav li.active {
font-weight: bold; }
@media only screen and (max-width: 65rem) {
main {
grid-template-columns: 0 auto 16rem; }
main article nav {
display: none; } }
@media only screen and (max-width: 45rem) {
main {
display: block; }
main article {
padding-right: 1rem; }
main article aside {
display: none; } }
article {
margin-bottom: 4rem;
padding-left: 1rem;
......@@ -253,6 +239,7 @@ article {
*
*/ }
article section > * {
box-sizing: border-box;
float: left;
width: 100%; }
article section aside {
......@@ -326,7 +313,6 @@ article {
color: #e56d00; }
footer {
white-space: nowrap;
background-color: #323232;
box-sizing: border-box;
font-family: 'Source Serif Pro', 'Georgia', serif;
......@@ -372,6 +358,22 @@ footer {
height: 1em;
display: inline-block; }
@media only screen and (max-width: 65rem) {
main {
grid-template-columns: 0 auto 16rem; }
main article nav {
display: none; } }
@media only screen and (max-width: 45rem) {
main {
display: block; }
main article {
padding-right: 1rem; }
main article aside {
display: none; }
main article * {
float: none; } }
/* --------------- Global Classes ---------------- */
/*
* Element exists for semantic reasons
......
......@@ -44,25 +44,6 @@ main {
}
}
@media only screen and (max-width: 65rem) {
main {
grid-template-columns: 0 auto 16rem;
article nav { display: none; }
}
}
@media only screen and (max-width: $breakpoint-mobile) {
main {
display: block;
article {
padding-right: 1rem;
aside { display: none; }
}
}
}
article {
margin-bottom: 4rem;
padding-left: 1rem;
......@@ -116,6 +97,7 @@ article {
@include font-primary();
> * {
box-sizing: border-box;
float: left;
width: 100%;
}
......@@ -238,7 +220,6 @@ article {
}
footer {
white-space: nowrap;
background-color: rgb(50, 50, 50);
box-sizing: border-box;
......@@ -302,6 +283,32 @@ footer {
}
}
@media only screen and (max-width: 65rem) {
main {
grid-template-columns: 0 auto 16rem;
article nav { display: none; }
}
}
@media only screen and (max-width: $breakpoint-mobile) {
main {
display: block;
article {
padding-right: 1rem;
aside { display: none; }
* { float: none; }
// Chrome doesn't support auto-hyphenation, so justification looks *awful*.
// For now, leave off. But consider adding in the future.
// @supports (hyphens: auto) {
// * { text-align: justify;
// hyphens: auto; }
// }
}
}
}
/* --------------- Global Classes ---------------- */
/*
......
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