clarify comments DOM; clean up comments styling

Author: gabrielakhanna

layouts/shortcodes/header.html

@@ -8,9 +8,9 @@ <h1 class="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce te
       <span class="credit">Sample Newspaper</span>
     </div>
     <div class="article-details">
-      <time datetime="">Updated August 13, 2018 3:19 PM</time>
+      <time datetime="">Updated August 13, 2018 3:19 PM</time>      <!--comments DOM added for demo purposes only -->
       <span class="comments">
-        <svg viewBox="0 0 512 512" style="display: inline-block; height: 1em; --fill-color: gray; vertical-align: middle;" aria-hidden="true"><path d="M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z"></path></svg>
+        <svg viewBox="0 0 512 512" aria-hidden="true"><path d="M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z"></path></svg>
         <span class="vf-comments-count vf-body-text--deprecated viafoura vf-is-logged-in" style="min-height: 0px;">35</span>
       </span>
     </div>

static/css/cards/author-byline.css

@@ -48,7 +48,10 @@
   gap: 5px;
 }
 
-.article-details .comments svg {
+.article-details .comments > svg {
+  display: inline-block;
   align-self: center;
+  height: 1em;
   padding-top: 2px;
+  --fill-color: var(--byline-color);
 }