feat: Add new spacer "large2" equals 4x "small"

Add the "large2" spacer for "in article" elements such as headings,
tables, figures, block quotes and syntax highlighted code blocks to make
the gap slightly larger than the normal gap between paragraphs. This gap
makes the elements visually separate from the text paragraphs.

Other minor related changes:

* Remove margin top for h1 print.
* Remove padding for headings as the gap between the text and border is
  big enough. Keep the padding for "post-title".
* Use larger font for site header navbar.
* Remove site header toolbar styles as this is not used anymore.

Author: manid2

assets/styles/_footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-  margin-top: $spacer-normal;
+  margin-top: $spacer-large2;
   border-top: $spacer-1 solid;
 
   @include themed {

assets/styles/_header.scss

@@ -1,9 +1,3 @@
-.site-header {
-  @media print {
-    display: none;
-  }
-}
-
 .gitinfo,
 .breadcrumbs {
   font-size: $font-size-smaller;
@@ -13,7 +7,6 @@
 .breadcrumbs {
   width: fit-content;
   border-bottom: $spacer-1 solid;
-  margin-top: $spacer-large;
 
   @include themed {
     border-color: t($accent);
@@ -36,19 +29,6 @@
   }
 }
 
-.toolbar {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin: $spacer-normal 0;
-
-  .item {
-    padding: $spacer-smallest $spacer-small;
-    margin-right: $spacer-small;
-  }
-}
-
 .theme-toggle {
   cursor: pointer;
   padding: 0;
@@ -100,3 +80,14 @@
     }
   }
 }
+
+.site-header {
+  .navbar {
+    margin-bottom: $spacer-large2;
+    font-size: $font-size-larger;
+  }
+
+  @media print {
+    display: none;
+  }
+}

assets/styles/_main.scss

@@ -78,6 +78,7 @@ h1 {
   border-bottom: $spacer-2 dotted;
 
   @media print, ($phone) {
+    margin-top: 0;
     font-size: $font-size * 2;
   }
 }
@@ -100,8 +101,7 @@ h5,
 h6 {
   font-family: $font-family-title;
   font-weight: bold;
-  margin: $spacer-normal 0;
-  padding: $spacer-smallest 0;
+  margin: $spacer-large2 0 $spacer-normal 0;
   width: fit-content;
 
   @media print {
@@ -181,7 +181,7 @@ img {
 figure {
   display: table;
   max-width: 100%;
-  margin: $spacer-normal 0;
+  margin: $spacer-large 0;
 
   &.left {
     margin-right: auto;
@@ -223,7 +223,7 @@ figure {
 
 blockquote {
   border-left: $spacer-smallest solid;
-  margin: $spacer-largest 0;
+  margin: $spacer-large 0;
   padding: $spacer-normal $spacer-normal $spacer-normal $spacer-large;
   font-style: italic;
 
@@ -262,7 +262,7 @@ table {
   table-layout: auto;
   border-collapse: collapse;
   width: 100%;
-  margin: $spacer-normal 0;
+  margin: $spacer-large 0;
 }
 
 table,

assets/styles/_post.scss

@@ -39,6 +39,7 @@
     position: relative;
     border-bottom: $border-title;
     width: 100%;
+    padding: $spacer-smallest 0;
 
     @include themed {
       border-color: t($accent);
@@ -119,6 +120,7 @@
     @media print {
       display: none;
     }
+    margin: $spacer-largest 0;
   }
 
   &-support {

assets/styles/_syntax.scss

@@ -1,6 +1,6 @@
 /* syntax highlighted code layout */
 div.highlight-wrapper {
-  margin: $spacer-normal 0;
+  margin: $spacer-large 0;
   border-radius: $spacer-2;
   border: $spacer-1 solid;
 

assets/styles/_variables.scss

@@ -17,7 +17,8 @@ $spacer-smallest: $spacer-2 * 2;
 $spacer-small: $spacer-smallest * 2;
 $spacer-normal: $spacer-small * 2;
 $spacer-large: $spacer-small * 3;
-$spacer-largest: $spacer-normal * 3;
+$spacer-large2: $spacer-small * 4;
+$spacer-largest: $spacer-small * 6;
 
 /* Colors */
 $blue: hsl(