move inline css

_includes/head.html

@@ -96,7 +96,9 @@
           );
           if (replies.length) {
             // render to post header meta
-            const repliesSection = document.querySelector("section#replies");
+            const repliesSection = document.querySelector(
+              ".blog-post__replies"
+            );
             document.getElementById(
               "page-replies"
             ).innerHTML = `• <a href="#replies">${replies.length} replies</a>`;
@@ -124,7 +126,7 @@
               repliesTable.append(row);
             });
 
-            repliesSection.innerHTML = "<h2>Web Mentions:</h2>";
+            repliesSection.innerHTML = "<h2 id='replies'>Web Mentions:</h2>";
             repliesSection.append(repliesTable);
           }
 

_includes/replies-section.html

@@ -1,31 +0,0 @@
-<section id="replies"></section>
-
-<style>
-  section#replies {
-    margin: 1em 0;
-  }
-
-  .reply-block {
-    display: block;
-    margin: 0 0 1em;
-    padding: 1em;
-    border-left: 3px solid #ccc;
-  }
-
-  .reply-photo {
-    width: 2em;
-    height: 2em;
-    border-radius: 50%;
-    float: left;
-  }
-
-  .reply-name,
-  .reply-date {
-    margin-left: 0.5em;
-    float: left;
-  }
-
-  .reply-name {
-    font-weight: bold;
-  }
-</style>

_layouts/post.html

@@ -78,39 +78,12 @@ layout: default
   <div class="blog-post__after-content">
     <div id="reply-by-email">
       <a href="mailto:blog@ayco.io?subject=Re:%20{{page.title | url_encode}}&body=%0A%0AResponse%20to:%20{{site.url}}{{page.url}}">Thoughts? Reply by email</a>
-      <style>
-        #reply-by-email {
-          margin: 1em 0;
-        }
-        #reply-by-email a:hover {
-          color: #ee4a03;
-          border: 1px solid #ee4a03;
-        }
-        #reply-by-email a {
-          color: #bb4a03;
-          background-color: #f5f5f5;
-          border: 1px solid #ccc;
-          border-radius: 5px;
-          padding: 1em;
-          width: 100%;
-          text-align: center;
-          text-decoration: underline;
-          text-decoration-thickness: 1px;
-          display: inline-block;
-          font-size: 24px;
-          font-weight: bold;
-          font-family: medium-content-sans-serif-font, -apple-system,
-            BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-            "Open Sans", "Helvetica Neue", sans-serif !important;
-        }
-      </style>
     </div>
     <div id="rss-sign-up">
       <span>For more <em>{{ page.category }}</em> posts like this, subscribe to my <a href={{'feed.xml' | relative_url}}>RSS feed</a></span>
     </div>
-  
-    {% include replies-section.html %}
   </div>
 
+  <div class="blog-post__replies"></div>
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
 </article>

assets/main.scss

@@ -413,6 +413,58 @@ table.image caption {
       text-decoration-thickness: 1px;
       color: #ee4a03;
     }
+
+    #reply-by-email {
+      margin: 1em 0;
+    }
+    #reply-by-email a:hover {
+      color: #ee4a03;
+      border: 1px solid #ee4a03;
+    }
+    #reply-by-email a {
+      color: #bb4a03;
+      background-color: #f5f5f5;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      padding: 1em;
+      width: 100%;
+      text-align: center;
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      display: inline-block;
+      font-size: 24px;
+      font-weight: bold;
+      font-family: medium-content-sans-serif-font, -apple-system,
+        BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+        "Open Sans", "Helvetica Neue", sans-serif !important;
+    }
+  }
+  &__replies {
+    margin: 1em 0;
+
+    .reply-block {
+      display: block;
+      margin: 0 0 1em;
+      padding: 1em;
+      border-left: 3px solid #ccc;
+    }
+
+    .reply-photo {
+      width: 2em;
+      height: 2em;
+      border-radius: 50%;
+      float: left;
+    }
+
+    .reply-name,
+    .reply-date {
+      margin-left: 0.5em;
+      float: left;
+    }
+
+    .reply-name {
+      font-weight: bold;
+    }
   }
 }