From 83b7bb9d3a3afefab47dc5055a4167c0133f1b1d Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Sun, 19 Feb 2023 16:27:43 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20increase=20margins=20be?=
 =?UTF-8?q?fore=20content=20&=20after=20ToC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/main.scss               |  1 +
 sass/parts/_header.scss      |  4 ++--
 sass/parts/_home-banner.scss |  1 -
 sass/parts/_misc.scss        | 10 ++++++--
 templates/macros/macros.html | 44 +++++++++++++++++++-----------------
 5 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/sass/main.scss b/sass/main.scss
index 3b154a7f3..c16e3e1fc 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -101,6 +101,7 @@ body {
 .content {
   max-width: var(--max-layout-width);
   margin: 0 auto;
+  margin-top: 6vmin;
   padding: 0 24px;
   word-wrap: break-word;
   min-height: 80vh;
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 0269364db..f0d78e2a1 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -39,7 +39,6 @@ header {
   justify-content: space-between;
   padding: 1em 24px;
   margin: 0 auto;
-  margin-bottom: 0.2rem;
 }
 
 .nav-navs {
@@ -74,7 +73,8 @@ header {
   letter-spacing: -0.5px;
   font-size: 0.8rem;
   font-weight: 300;
-  padding-bottom: 1vmin;
+  padding-top: 0.7vmin;
+  padding-bottom: 3vmin;
 }
 
 .meta a {
diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss
index 644b8a92e..9a29c9cc7 100644
--- a/sass/parts/_home-banner.scss
+++ b/sass/parts/_home-banner.scss
@@ -22,7 +22,6 @@
 }
 
 .home-banner-header {
-    margin-top: 2rem;
     margin-bottom: 1rem;
     font-size: 2.8rem;
     font-weight: 600;
diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
index 6b7c3d5da..6c20ff842 100644
--- a/sass/parts/_misc.scss
+++ b/sass/parts/_misc.scss
@@ -11,10 +11,8 @@
 }
 
 .article-title {
-  padding-bottom: 1.2vmin;
   display: block;
   font-size: 2em;
-  margin-top: 0.67em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
@@ -22,6 +20,14 @@
   line-height: 2.4rem;
 }
 
+ul {
+  margin-top: 0;
+}
+
+.toc-container {
+  margin-bottom: 4vmin;
+}
+
 .title-container {
   border-bottom: var(--secondary-color) solid 0.5px;
   padding-bottom: 15px;
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 19d86cf6d..6920c7b71 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -144,33 +144,35 @@ <h3>TL;DR:</h3>
         {# Optional table of contents #}
         {% if page.extra.toc | default(value=false) %}
         {% if page.toc %}
-        <h2>Table of Contents</h2>
-        <ul>
-            {% for h1 in page.toc %}
-            <li>
-                <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-                {% if h1.children %}
-                <ul>
-                    {% for h2 in h1.children %}
-                    <li>
-                        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                    </li>
-
-                    {% if h2.children %}
+        <div class="toc-container">
+            <h2>Table of Contents</h2>
+            <ul>
+                {% for h1 in page.toc %}
+                <li>
+                    <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+                    {% if h1.children %}
                     <ul>
-                        {% for h3 in h2.children %}
+                        {% for h2 in h1.children %}
                         <li>
-                            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+                            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                         </li>
+
+                        {% if h2.children %}
+                        <ul>
+                            {% for h3 in h2.children %}
+                            <li>
+                                <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                        {% endif %}
                         {% endfor %}
                     </ul>
                     {% endif %}
-                    {% endfor %}
-                </ul>
-                {% endif %}
-            </li>
-            {% endfor %}
-        </ul>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
         {% endif %}
         {% endif %}