Responsiveness tweaks

dxtkdxtk · Jan 21, 2014 · 94eecff · 94eecff
1 parent 901bcde
commit 94eecff
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 7 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -199,7 +199,7 @@ table {
 #latest-post {
   display: none; }
 
-.post {
+.post-container {
   margin: 0 40px; }
 
 .post-header {
@@ -363,13 +363,30 @@ table {
 /* ============================================================ */
 /* Media Queries */
 /* ============================================================ */
+@media only screen and (max-width: 800px) {
+  .post-stub-tag {
+    display: none; } }
 @media only screen and (max-width: 600px) {
+  .site-nav-item {
+    display: block;
+    margin: 15px 0; }
+
   .post-stub-title {
     display: block; }
 
   .post-stub-date:before {
     content: "";
-    display: block; } }
+    display: block; }
+
+  .post-container,
+  .post-list {
+    margin-right: 25px;
+    margin-left: 25px; } }
 @media only screen and (max-width: 400px) {
   .post-title {
-    font-size: 32px; } }
+    font-size: 32px; }
+
+  .post-container,
+  .post-list {
+    margin-right: 15px;
+    margin-left: 15px; } }
diff --git a/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc b/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
@@ -226,7 +226,7 @@ table {
 
 #latest-post { display: none; }
 
-.post { margin: 0 40px; }
+.post-container { margin: 0 40px; }
 
 .post-header {
     border-bottom: 6px solid $secondary;
@@ -420,15 +420,36 @@ table {
 /* Media Queries */
 /* ============================================================ */
 
+@media only screen and (max-width: 800px) {
+    .post-stub-tag { display: none; }
+}
+
 @media only screen and (max-width: 600px) {
+    .site-nav-item {
+        display: block;
+        margin: 15px 0;
+    }
+
     .post-stub-title { display: block; }
 
     .post-stub-date:before {
         content: "";
         display: block;
     }
+
+    .post-container,
+    .post-list {
+        margin-right: 25px;
+        margin-left: 25px;
+    }
 }
 
 @media only screen and (max-width: 400px) {
     .post-title { font-size: 32px; }
+
+    .post-container,
+    .post-list {
+        margin-right: 15px;
+        margin-left: 15px;
+    }
 }
diff --git a/index.hbs b/index.hbs
@@ -3,7 +3,7 @@
 <div id="latest-post" class="container">
     {{#foreach posts}}
         {{#if @first}}
-            <article class="{{post_class}}">
+            <article class="post-container {{post_class}}">
                 <header class="post-header">
                     <h1 class="post-title">{{title}}</h1>
 

diff --git a/page.hbs b/page.hbs
@@ -2,7 +2,7 @@
 
 <div class="container">
     {{#post}}
-        <article class="{{post_class}}">
+        <article class="post-container {{post_class}}">
             <header class="post-header">
                 <h1 class="post-title">{{title}}</h1>
 

diff --git a/post.hbs b/post.hbs
@@ -2,7 +2,7 @@
 
 <div class="container">
     {{#post}}
-        <article class="{{post_class}}">
+        <article class="post-container {{post_class}}">
             <header class="post-header">
                 <h1 class="post-title">{{title}}</h1>