Blog sidebar

assets/timber.scss.liquid

@@ -40,6 +40,7 @@
   #Tag List
   #Breadcrumbs
   #Product Page
+  #Blogs and Comments
   #Notes and Form Feedback
   #Cart Page
   #Demo Styles - for empty store state
@@ -1548,6 +1549,31 @@ a.btn-secondary {
   }
 }
 
+// ==============================================================================
+// #Blogs and Comments
+// ==============================================================================
+.template-article {
+  .article-header {
+    margin-bottom: 0;
+
+    & + .text-light {
+      display: block;
+      margin-bottom: $gutter;
+    }
+  }
+}
+
+// Comments
+.comment-content {
+  margin-bottom: -$gutter/2;
+}
+
+.comment-author {
+  font-size: 14px;
+  font-style: italic;
+  margin-bottom: $gutter;
+}
+
 
 // ==============================================================================
 // #Notes and Form Feedback

snippets/blog-sidebar.liquid

@@ -0,0 +1,27 @@
+{% comment %}
+  Recent blog posts
+{% endcomment %}
+<h4>Recent Articles</h4>
+{% for article in blog.articles limit:6 %}
+  <p>
+    <a href="{{ article.url }}">{{ article.title }}</a>
+    <br>
+    <time pubdate datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
+      <em class="text-light">{{ article.published_at | date: '%b %d, %Y' }}</em>
+    </time>
+  </p>
+{% endfor %}
+
+{% comment %}
+  Blog tags
+{% endcomment %}
+{% if blog.tags.size > 0 %}
+<h4>Categories</h4>
+  <ul>
+    {% for tag in blog.tags  %}
+      <li>
+        <a href="{{ tag.url }}">{{ tag.title }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}

snippets/comment.liquid

@@ -9,14 +9,15 @@
 
 {% endcomment %}
 
-<h3 class="comment-author">
-  {{ comment.author }} says...
-</h3>
-
-<h5 class="comment-date">
-  On {{ comment.created_at | date: "%B %d, %Y" }}
-</h5>
-
 <div class="comment-content">
   {{ comment.content }}
-</div>
+</div>
+
+<p class="comment-author text-light">
+  <strong>{{ comment.author }}</strong> on
+  <strong>
+    <time datetime="{{ comment.created_at | date: '%Y-%m-%d' }}">
+      {{ comment.created_at | date: '%b %d, %Y' }}
+    </time>
+  </strong>
+</p>

templates/article.liquid

@@ -22,17 +22,22 @@
   {% assign number_of_comments = article.comments_count | plus: 1 %}
 {% endif %}
 
-<div class="grid">
+{% include 'breadcrumb' %}
 
-  <div class="grid-item large--two-thirds push--large--one-sixth">
+<div class="grid">
 
-    {% include 'breadcrumb' %}
+  <div class="grid-item large--three-quarters">
 
     <header class="page-header">
-      <time pubdate datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
-        {{ article.published_at | date: '%b %d, %Y' }}
-      </time>
-      <h1>{{ article.title }}</h1>
+      <h1 class="article-header">{{ article.title }}</h1>
+      <em class="text-light">
+        Posted by <strong>{{ article.author }}</strong> on
+        <strong>
+          <time pubdate datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
+            {{ article.published_at | date: '%b %d, %Y' }}
+          </time>
+        </strong>
+      </em>
     </header>
 
     <div class="rte">
@@ -85,8 +90,6 @@
     </p>
     {% endif %}
 
-
-
     {% if blog.comments_enabled? %}
 
     <hr>
@@ -114,7 +117,9 @@
 
         {% if number_of_comments > 0 %}
           <ul>
-            {% comment %}If a comment was just submitted with no blank field, let's show it.{% endcomment %}
+            {% comment %}
+              If a comment was just submitted with no blank field, show it.
+            {% endcomment %}
             {% if comment and comment.created_at %}
             <li id="{{ comment.id }}" class="comment first{% if article.comments_count == 0 %} last{% endif %}">
 
@@ -179,6 +184,10 @@
 
           </div>
 
+          {% if blog.moderated? %}
+            <p class="text-light"><em><strong>Please note:</strong> comments must be approved before they are published</em></p>
+          {% endif %}
+
           <input type="submit" class="btn" value="Post Comment">
 
           {% if form.errors %}
@@ -202,4 +211,8 @@
     {% endif %}
 
   </div>
+
+  <div class="grid-item large--one-quarter">
+    {% include 'blog-sidebar' %}
+  </div>
 </div>

templates/blog.liquid

@@ -7,14 +7,16 @@
 
 {% paginate blog.articles by 5 %}
 
+{% include 'breadcrumb' %}
+
 {% comment %}
   This template is also used for listing out articles of a specific tag.
   You can change layouts or styles by checking if current_tags is true.
 {% endcomment %}
 
 <div class="grid">
 
-  <div class="grid-item large--two-thirds push--large--one-sixth">
+  <div class="grid-item large--three-quarters">
     <header class="page-header">
 
       {% if current_tags %}
@@ -83,7 +85,11 @@
       {% include 'pagination-custom' %}
     </div>
     {% endif %}
-
+
+  </div>
+
+  <div class="grid-item large--one-quarter">
+    {% include 'blog-sidebar' %}
   </div>
 </div>