Increase padding and spacing on content

This makes everything feel much easier to read!

layouts/partials/content.html

@@ -21,7 +21,7 @@
   <hr />
   <div class="content mt-3">
     {{ if .TableOfContents }}
-      <div class="float-lg-right ml-lg-3 mb-2 p-3">
+      <div class="float-lg-right ml-lg-3 mb-3 p-3">
         {{ .TableOfContents }}
       </div>
     {{ end }}

layouts/partials/share.html

@@ -1,5 +1,5 @@
 {{ if .Section }}
-    <div class="container mt-4 text-center">
+    <div class="container mt-5 text-center">
     <small>Share this page</small>
     <h3>
         <a href="https://twitter.com/intent/tweet?text={{ .Permalink }}"><i class="mx-1 fab fa-twitter" aria-hidden="true"></i></a>

static/src/scss/style.scss

@@ -169,7 +169,7 @@ ul ul, ol ol {
 }
 
 pre.chroma {
-  margin: $spacer 0;
+  margin-bottom: $paragraph-margin-bottom;
   padding: $spacer;
 
   .highlight & {
@@ -179,7 +179,7 @@ pre.chroma {
 
 .content {
   h1, h2, h3, h4, h5, h6 {
-    margin-top: $spacer;
+    margin-top: $headings-margin-bottom * 2.2;
   }
 
   blockquote {
@@ -195,6 +195,10 @@ pre.chroma {
     width: 100%;
     height: 75vh;
   }
+
+  figure {
+    margin-bottom: $paragraph-margin-bottom;
+  }
 }
 
 .plyr {

static/src/scss/variables.scss

@@ -1,3 +1,6 @@
 $primary: #E85537;
 $body-bg: #17181C;
 $footer-height: 110px;
+$font-size-base: 1.2rem;
+$headings-margin-bottom: 1.5rem;
+$paragraph-margin-bottom: $headings-margin-bottom * 0.85;