diff --git a/_includes/head.html b/_includes/head.html index 8e3df42..9a0ad6b 100644 --- a/_includes/head.html +++ b/_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 = `• ${replies.length} replies`; @@ -124,7 +126,7 @@ repliesTable.append(row); }); - repliesSection.innerHTML = "

Web Mentions:

"; + repliesSection.innerHTML = "

Web Mentions:

"; repliesSection.append(repliesTable); } diff --git a/_includes/replies-section.html b/_includes/replies-section.html deleted file mode 100644 index 4d72e5d..0000000 --- a/_includes/replies-section.html +++ /dev/null @@ -1,31 +0,0 @@ -
- - diff --git a/_layouts/post.html b/_layouts/post.html index f7b84e4..7c3d832 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -78,39 +78,12 @@ layout: default
Thoughts? Reply by email -
For more {{ page.category }} posts like this, subscribe to my RSS feed
- - {% include replies-section.html %}
+
diff --git a/assets/main.scss b/assets/main.scss index 2c45746..56b4c3e 100644 --- a/assets/main.scss +++ b/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; + } } }