Hide sidebar on small screens

This commit is contained in:
Michael Rose 2016-03-14 22:00:19 -04:00
parent f2b4b4ebc9
commit add794e05e

View file

@ -3,12 +3,10 @@
========================================================================== */ ========================================================================== */
.sidebar { .sidebar {
@include grid(12,10); display: none;
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 1em;
@include breakpoint($small) { @include breakpoint($small) {
display: block; display: block;
margin-bottom: 1em;
@include grid(12,2); @include grid(12,2);
@include prefix(12,0.5); @include prefix(12,0.5);
@include suffix(12,0.5); @include suffix(12,0.5);
@ -33,57 +31,38 @@
========================================================================== */ ========================================================================== */
.author__name { .author__name {
margin-bottom: 0; margin-top: 10px;
margin-bottom: 10px;
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;
font-size: 18px; font-size: 24px;
@include breakpoint($small) {
margin-top: 10px;
margin-bottom: 10px;
font-size: 24px;
}
} }
.author__bio { .author__bio {
display: none; margin-bottom: 20px;
@include breakpoint($small) { font-size: 80%;
display: block; font-style: italic;
margin-bottom: 20px;
font-size: 80%;
font-style: italic;
}
} }
.author__avatar { .author__avatar {
display: none; max-width: 110px;
@include breakpoint($small) { border-radius: 50%;
max-width: 110px;
border-radius: 50%;
}
} }
.author__social-url { .author__social-url {
display: inline-block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
padding-right: 5px; padding-right: 5px;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
text-decoration: none; text-decoration: none;
@include breakpoint($small) {
display: block;
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.author__name, // .author__name,
.author__avatar, // .author__avatar,
.author__bio, // .author__bio,
.author__social-url { // .author__social-url {
@include breakpoint($small) { // max-width: 150px;
display: block; // }
max-width: 125px;
}
@include breakpoint($large) {
max-width: 150px;
}
}