Added support for post images and improved overall spacing on smaller screens

4 files changed, 195 insertions, 7 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index 4658b08..869b2c3 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -475,10 +475,59 @@ table {
   .post-stub-tag {
     display: none; } }
 @media only screen and (max-width: 600px) {
+  h1, h2 {
+    margin-bottom: 20px; }
+
+  p {
+    margin-bottom: 20px; }
+
+  ul, ol {
+    margin-bottom: 20px; }
+
+  img {
+    margin: 30px 0; }
+
+  blockquote {
+    margin: 30px 0; }
+
+  pre {
+    margin: 30px 0; }
+
+  hr {
+    margin: 35px 0; }
+
+  .site-header {
+    padding-top: 60px; }
+
   .site-nav-item {
     display: block;
     margin: 15px 0; }
 
+  .post-header {
+    margin-bottom: 35px;
+    padding-bottom: 45px; }
+
+  .post-title,
+  .page-title,
+  .author-name,
+  .author-heading {
+    font-size: 42px;
+    margin-top: 5px; }
+
+  .post-date,
+  .blog-description,
+  .author-meta {
+    margin-top: 20px; }
+    .post-date:after, .post-date:before,
+    .blog-description:after,
+    .blog-description:before,
+    .author-meta:after,
+    .author-meta:before {
+      margin-top: 30px; }
+
+  .author-profile:after, .author-profile:before {
+    margin-top: 20px; }
+
   .post-stub-title {
     display: block; }
 
@@ -486,6 +535,9 @@ table {
     content: "";
     display: block; }
 
+  .post-list {
+    margin-top: 45px; }
+
   .post-container,
   .post-list,
   .author-profile {
@@ -495,15 +547,48 @@ table {
   .post-tags {
     width: 100%; }
 
+  .post-stub a,
+  .post-stub a:hover {
+    padding-top: 12px;
+    padding-bottom: 12px; }
+
   .share {
     float: left;
     margin-top: 20px; }
     .share a {
-      margin: 0 5px 0 0; } }
+      margin: 0 5px 0 0; }
+
+  .footer {
+    margin-top: 50px; } }
 @media only screen and (max-width: 400px) {
+  .site-header {
+    padding-top: 40px; }
+
   .post-title,
-  .author-name {
-    font-size: 32px; }
+  .page-title,
+  .author-name,
+  .author-heading {
+    font-size: 30px;
+    line-height: 1.2; }
+
+  .post-date,
+  .blog-description,
+  .author-meta {
+    line-height: 1.6; }
+
+  .post-date,
+  .blog-description,
+  .author-meta {
+    margin-top: 10px; }
+    .post-date:after, .post-date:before,
+    .blog-description:after,
+    .blog-description:before,
+    .author-meta:after,
+    .author-meta:before {
+      margin-top: 20px; }
+
+  .author-profile:after, .author-profile:before {
+    margin-top: 10px; }
 
   .post-container,
   .post-list,
@@ -517,4 +602,7 @@ table {
 
   .author-meta span {
     display: block;
-    margin: 18px 0; } }
+    margin: 18px 0; }
+
+  .footer-copyright {
+    padding: 0 10px; } }
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index fc88135..0664a12 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -544,11 +544,58 @@ table {
 }
 
 @media only screen and (max-width: 600px) {
+    h1, h2 { margin-bottom: 20px; }
+
+    p { margin-bottom: 20px; }
+
+    ul, ol { margin-bottom: 20px; }
+
+    img { margin: 30px 0; }
+
+    blockquote { margin: 30px 0;}
+
+    pre { margin: 30px 0; }
+
+    hr { margin: 35px 0; }
+
+    .site-header {
+        padding-top: 60px;
+    }
+
     .site-nav-item {
         display: block;
         margin: 15px 0;
     }
 
+    .post-header {
+        margin-bottom: 35px;
+        padding-bottom: 45px;
+    }
+
+    .post-title,
+    .page-title,
+    .author-name,
+    .author-heading {
+        font-size: 42px;
+        margin-top: 5px;
+    }
+
+    .post-date, 
+    .blog-description,
+    .author-meta {
+        margin-top: 20px;
+
+        &:after, &:before {
+            margin-top: 30px;
+        }
+    }
+
+    .author-profile {
+        &:after, &:before {
+            margin-top: 20px;
+        }
+    }
+
     .post-stub-title { display: block; }
 
     .post-stub-date:before {
@@ -556,6 +603,10 @@ table {
         display: block;
     }
 
+    .post-list {
+        margin-top: 45px;
+    }
+
     .post-container,
     .post-list,
     .author-profile {
@@ -565,6 +616,12 @@ table {
 
     .post-tags { width: 100%; }
 
+    .post-stub a,
+    .post-stub a:hover {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
     .share {
         float: left;
         margin-top: 20px;
@@ -573,11 +630,46 @@ table {
             margin: 0 5px 0 0;
         }
     }
+
+    .footer {
+        margin-top: 50px;
+    }
 }
 
 @media only screen and (max-width: 400px) {
+    .site-header {
+        padding-top: 40px;
+    }
+
     .post-title,
-    .author-name { font-size: 32px; }
+    .page-title,
+    .author-name,
+    .author-heading {
+        font-size: 30px;
+        line-height: 1.2;
+    }
+
+    .post-date, 
+    .blog-description,
+    .author-meta {
+        line-height: 1.6;
+    }
+
+    .post-date, 
+    .blog-description,
+    .author-meta {
+        margin-top: 10px;
+
+        &:after, &:before {
+            margin-top: 20px;
+        }
+    }
+
+    .author-profile {
+        &:after, &:before {
+            margin-top: 10px;
+        }
+    }
 
     .post-container,
     .post-list,
@@ -595,4 +687,6 @@ table {
         display: block;
         margin: 18px 0;
     }
-}
+
+    .footer-copyright { padding: 0 10px; }
+}
\ No newline at end of file
diff --git a/page.hbs b/page.hbs
index b94e173..022b024 100644
--- a/page.hbs
+++ b/page.hbs
@@ -9,7 +9,9 @@
                 <p class="blog-description">{{@blog.description}}</p>
             </header>
 
-            <div class="post-content">
+            <div class="post-content clearfix">
+                <img class="post-featured-image" src="{{image}}">
+
                 {{{content}}}
 
                 {{#if tags}}
diff --git a/partials/post-content.hbs b/partials/post-content.hbs
index e6df2ab..3f1c6ef 100644
--- a/partials/post-content.hbs
+++ b/partials/post-content.hbs
@@ -6,6 +6,10 @@
     </header>
 
     <div class="post-content clearfix">
+        {{#if image}}
+            <img class="post-featured-image" src="{{image}}">
+        {{/if}}
+
         {{{content}}}
     </div>