Responsify

2 files changed, 35 insertions, 24 deletions

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%;
+  }
+}