From acea700708604f1f402687a6f6503965af7dfc55 Mon Sep 17 00:00:00 2001
From: Philipp Oppermann <dev@phil-opp.com>
Date: Tue, 25 Feb 2020 14:26:41 +0100
Subject: [PATCH] Fix overlap of 'All Posts' and ToC; add comments to ToC

The 'All Posts' link used to overlap with the table of contents at the end of a post. This occured because the ToC is sticky to the `main` block, so it scrolled up before the `comments` section. The 'All Post' link, however, is fixed, so it does not scroll up.

This commit fixes the issue by moving the comment block to the main block (from the after_main block). This way, the ToC stays visible in the comment section. We also add the comment section to the ToC.
---
 blog/static/css/main.css                | 4 ++++
 blog/templates/macros.html              | 1 +
 blog/templates/second-edition/page.html | 3 +--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/blog/static/css/main.css b/blog/static/css/main.css
index f65a5807..c2a15774 100644
--- a/blog/static/css/main.css
+++ b/blog/static/css/main.css
@@ -425,3 +425,7 @@ details summary h3, details summary h4, details summary h5, details summary h6 {
 .hidden {
   display: none;
 }
+
+.toc-comments-link {
+  margin-top: .5rem;
+}
diff --git a/blog/templates/macros.html b/blog/templates/macros.html
index fc265e96..991525ab 100644
--- a/blog/templates/macros.html
+++ b/blog/templates/macros.html
@@ -43,6 +43,7 @@
                     </li>{% endfor %}
                 </ul>{% endif %}
             </li>{% endfor %}
+            <li class="toc-comments-link"><a href="#comments">Comments</a></li>
         </ul>
     </details>
 {% endmacro toc %}
diff --git a/blog/templates/second-edition/page.html b/blog/templates/second-edition/page.html
index dd50f78e..6e66471c 100644
--- a/blog/templates/second-edition/page.html
+++ b/blog/templates/second-edition/page.html
@@ -33,6 +33,7 @@
                     </li>{% endfor %}
                 </ol>{% endif %}
             </li>{% endfor %}
+            <li class="toc-comments-link"><a href="#comments">Comments</a></li>
         </ol>
     </aside>
 
@@ -70,9 +71,7 @@
         <h2>Support Me</h2>
         {% include "support.html" %}
     </div>
-{% endblock main %}
 
-{% block after_main %}
     <hr>
     <div class="PageNavigation">
         {% if page.lighter %}