Blog layout updates

css-compiled/template.css

@@ -642,15 +642,24 @@ td {
   font-size: 1.2rem; }
 
 .tags {
+  margin: 0;
+  padding: 0;
+  display: inline;
   background-color: rgba(101, 97, 97, 0.1);
   padding: 0.7rem 1rem;
-  margin-bottom: 0.2rem; }
-  .tags a {
+  margin-bottom: 0.2rem;
+  list-style: none; }
+  .tags li {
     display: inline-block;
     font-size: 1rem;
     text-transform: uppercase;
-    color: #9A9898;
     font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+    .tags li a {
+      color: #9A9898; }
+      .tags li a:after {
+        content: ","; }
+    .tags li:last-child a:after {
+      display: none; }
 
 .archives, .related-pages {
   padding: 0;

scss/template/_blog.scss

@@ -123,15 +123,27 @@
 
 // Tags
 .tags {
+    margin: 0;
+    padding: 0;
+    display: inline;
     background-color: transparentize($light-gray, 0.9);
     padding: 0.7rem 1rem;
     margin-bottom: 0.2rem;
-    a {
+    list-style: none;
+    li {
         display: inline-block;
         font-size: $core-font-size;
         text-transform: uppercase;
-        color: $core-text;
         font-family: $font-family-header;
+        a {
+            color: $core-text;
+            &:after {
+                content: ",";
+            }
+        }
+        &:last-child {
+           a:after {display: none;} 
+        }
     }
 }
 

templates/partials/blog_item.html.twig

@@ -18,12 +18,12 @@
         </span>
        
        {% if page.taxonomy.tag %}
-        <span class="tags">
+        <ul class="tags">
             <i class="fa fa-tag"></i>
             {% for tag in page.taxonomy.tag %}
-            <a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a>, 
+            <li><a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a></li>
             {% endfor %}
-        </span>
+        </ul>
         {% endif %}
         
         {% if big_header %}