💄 style: increase margins before content & after ToC

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;

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 {

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;

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;

templates/macros/macros.html

@@ -144,33 +144,35 @@
         {# 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 %}