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