Style tags on blog index page. Style tag pages. Minor height tweak on cards

bakerydemo/static/css/main.css

@@ -606,20 +606,38 @@ time.location-time {
 }
 
 /* Blog list view */
+.blog-tags>li {
+  border-right: 1px solid rgba(0,0,0,0.1);
+  font-size: 0.9em;
+  margin-left: -6px;
+  padding: 4px 18px;
+  text-transform: uppercase;
+}
+.blog-tags>li:first-child {
+  margin-left: 0;
+  border-left: 1px solid rgba(0,0,0,0.1);
+}
+.blog-tags>li:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
 .blog-list li {
   list-style: none;
 }
 
+@media (min-width: 1025px) {
 .blog-list li:first-of-type, .blogpage-listing li:first-of-type,
 .blog-list li:nth-child(6), .blogpage-listing li:nth-child(6),
 .blog-list li:nth-child(7), .blogpage-listing li:nth-child(7),
 .blog-list li:nth-child(12), .blogpage-listing li:nth-child(12) {
-    width: 48%;
+      width: 50%;
+    }
 }
 
 .blog-list-item {
   display: flex;
   flex-direction: column;
+  margin-bottom: 20px;
 }
 
 .blog-list-item a {
@@ -673,6 +691,13 @@ time.location-time {
   z-index: 1;
 }
 
+span.outline {
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 0.8em;
+  padding: 3px 6px;
+  text-transform: uppercase;
+}
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;

bakerydemo/templates/blog/blog_index_page.html

@@ -8,19 +8,26 @@
     {% if tag %}
         <div class="row">
             <div class="col-md-12">
-                <ul class="tags index">
-                        <li>{{ tag }}</li>
-                </ul>
+                <p>Viewing all blog posts by <span class="outline">{{ tag }}</span></p>
             </div>
         </div>
     {% endif %}
 
+    {% if page.get_child_tags %}
+        <ul class="blog-tags tags list-inline">
+            {% for tag in page.get_child_tags %}
+                <li><a href="{{ tag.url }}">{{ tag }}</a></li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+
         <div class="row row-eq-height blog-list">
+        {% if blogs %}
             {% for blog in blogs %}
-                <li class="col-md-3 blog-list-item">
+                <li class="col-xs-12 col-sm-6 col-md-3 blog-list-item">
                 <a href="{% pageurl blog %}">
                     <div class="image">
-                        {% image blog.image fill-850x550-c50 as image %}
+                        {% image blog.image fill-850x450-c50 as image %}
                         <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
                     </div>
                     <div class="text">
@@ -38,6 +45,11 @@
                     </a>
                 </li>
             {% endfor %}
+                {% else %}
+            <div class="col-md-12">
+                <p>Oh, snap. Looks like we were too busy baking to write any blog posts. Sorry.</p>
+            </div>
+        {% endif %}
         </div>
     </div>
 {% endblock content %}