From d87cd9414a4a795b0b434bc8a44c918b7c6f204e Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Wed, 12 Aug 2015 20:11:25 -0400 Subject: Responsify --- _sass/tiny/_base.scss | 3 ++- _sass/tiny/_layout.scss | 56 +++++++++++++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 24 deletions(-) (limited to '_sass') diff --git a/_sass/tiny/_base.scss b/_sass/tiny/_base.scss index ba6d78a..667adea 100644 --- a/_sass/tiny/_base.scss +++ b/_sass/tiny/_base.scss @@ -52,7 +52,8 @@ blockquote { @include gradient(lighten($brand-color, 3%), darken($brand-color, 3%)); a { color: white; - padding: 15px; + padding: 5px 15px; + display: inline-block; &:active, &:hover { diff --git a/_sass/tiny/_layout.scss b/_sass/tiny/_layout.scss index bf44757..5adfb12 100644 --- a/_sass/tiny/_layout.scss +++ b/_sass/tiny/_layout.scss @@ -1,6 +1,6 @@ // Fixed-width, centered column for site content. .container { - width: $container-width; + width: 100%; margin-right: auto; margin-left: auto; @include clearfix; @@ -26,33 +26,13 @@ // Column widths .one-third { - width: 33.333333%; + width: 100%; } -// .two-thirds { -// width: 66.666667%; -// } - -// .one-fourth { -// width: 25%; -// } - .one-half { - width: 50%; + width: 100%; } -// .three-fourths { -// width: 75%; -// } - -// .one-fifth { -// width: 20%; -// } - -// .four-fifths { -// width: 80%; -// } - // Single column hack .single-column { padding-right: $grid-gutter; @@ -67,3 +47,33 @@ // padding-left: $grid-gutter; // vertical-align: top; // } + +// For medium screens +@media (min-width: $container-width / 2) and (max-width: $container-width - 1) { + .container { + width: $container-width / 2; + } + + .one-half { + width: 100%; + } + + .one-third { + width: 33.333333%; + } +} + +// For large screens +@media (min-width: $container-width) { + .container { + width: $container-width; + } + + .one-half { + width: 50%; + } + + .one-third { + width: 33.333333%; + } +} -- cgit v1.2.3