Add first draft of single column design for phones

This commit is contained in:
Robert Lord 2014-06-12 00:32:50 -07:00
parent c2c35cfa25
commit e559ad1097

View file

@ -301,6 +301,8 @@ html, body {
@include box-sizing(border-box);
display: block;
@include text-shadow($main-embossed-text-shadow);
@extend %left-col;
}
&>ul, &>ol {
@ -496,6 +498,8 @@ html, body {
@include box-sizing(border-box);
@include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
@extend %right-col;
&>p { margin: 0; }
a {
@ -525,6 +529,7 @@ html, body {
// RESPONSIVE DESIGN
////////////////////////////////////////////////////////////////////////////////
// These are the styles for phones and tablets
// There are also a couple styles disperesed
@media (max-width: $tablet-width) {
.tocify-wrapper {
@ -543,3 +548,24 @@ html, body {
display: block;
}
}
@media (max-width: $phone-width) {
.dark-box {
display: none;
}
%left-col {
margin-right: 0;
}
%right-col {
width: auto;
float: none;
margin-bottom: $main-padding;
&+blockquote, &+pre {
margin-top: -$main-padding;
}
}
}