Merge pull request #46 from welpo/style/increase-margins

💄 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,6 +144,7 @@
         {# Optional table of contents #}
         {% if page.extra.toc | default(value=false) %}
         {% if page.toc %}
+        <div class="toc-container">
             <h2>Table of Contents</h2>
             <ul>
                 {% for h1 in page.toc %}
@@ -171,6 +172,7 @@
                 </li>
                 {% endfor %}
             </ul>
+        </div>
         {% endif %}
         {% endif %}