diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 5e594d5..fe904f2 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -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; + } + } +}