Consolidate date published and author into single loop on blog. Style avatar

bakerydemo/static/css/main.css

@@ -598,13 +598,14 @@ time.location-time {
 }
 
 /* Blog styles */
-.blog-byline {
+.blog-meta {
     margin-top: -40px;
     margin-bottom: 20px;
 }
 .blog-avatar {
-    width: unset;
+    border-radius: 100%;
     display: inline;
+    width: unset;
 }
 .blog-avatars {
     margin-bottom: 20px;
@@ -668,7 +669,7 @@ time.location-time {
 }
 
 .blog-list-item .text {
-  background: linear-gradient(to bottom, rgba(100,100,100,0) 0%,rgba(100,100,100,0.9) 23%,rgba(100,100,100,1) 50%);
+  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 23%,rgba(0,0,0,1) 50%);
   margin-top: -150px;
   padding: 20px;
   position: relative;

bakerydemo/templates/blog/blog_page.html

@@ -23,17 +23,20 @@
                 <p class="intro">{{ page.introduction }}</p>
             {% endif %}
 
-            {# TODO These two loops could be consolidated into one, with styling #}
-            <div class="blog-byline">
-            {{ page.date_published }} by {% for author in page.authors %}
-                {{ author }}{% if not forloop.last %}, {% endif %}
-            {% endfor %}
-            </div>
-
-            <div class="blog-avatars">
-                {% for author in page.authors %}
-                    {% image author.image width-100 class="blog-avatar" %}
-                {% endfor %}
+            <div class="blog-meta">
+                {% if page.authors %}
+                <div class="blog-avatars">
+                    {% for author in page.authors %}
+                        {% image author.image fill-50x50-c100 class="blog-avatar" %} {{ author.first_name }} {{ author.last_name }}
+                    {% endfor %}
+                </div>
+                {% endif %}
+                
+                {% if page.date_published %}
+                    <div class="blog-byline">
+                        {{ page.date_published }}
+                    </div>
+                {% endif %}
             </div>
 
             {{ page.body }}