fix: improve spacing of shortcodes (#362)

layouts/shortcodes/boxes.html

@@ -6,7 +6,7 @@
 <div class="flex flex-gap flex-fill">
   {{- range $index, $box := .Scratch.Get $group }}
     <div
-      class="gblog-box gblog-box--{{ $box.Size }}
+      class="flex justify-center gblog-box gblog-box--{{ $box.Size }}
         {{ with $box.Class }}{{ printf " %s" . }}{{ end }}"
     >
       {{ if or $box.Title $box.Icon }}

src/sass/_base.scss

@@ -115,7 +115,7 @@ h6 {
 h4,
 h5,
 h6 {
-  font-size: 1rem !important;
+  font-size: $font-size-16 !important;
 }
 
 a {
@@ -179,8 +179,8 @@ img {
 
 svg.gblog-icon {
   display: inline-block;
-  width: 1.3em;
-  height: 1.3em;
+  width: $padding-24;
+  height: $padding-24;
   vertical-align: middle;
   stroke-width: 0;
   stroke: currentColor;
@@ -224,8 +224,8 @@ svg.gblog-icon {
 
   &__img {
     margin-right: $padding-16;
-    width: 60px;
-    height: 60px;
+    width: $padding-32;
+    height: $padding-32;
   }
 }
 
@@ -244,7 +244,7 @@ svg.gblog-icon {
   }
 
   &__entry {
-    line-height: 1.3em;
+    line-height: $padding-24;
     color: $gray-100;
     text-decoration: none;
     padding: $padding-4 $padding-8;
@@ -340,7 +340,8 @@ svg.gblog-icon {
     margin-left: $padding-8;
 
     svg.gblog-icon {
-      font-size: $font-size-20;
+      width: 1.25em;
+      height: 1.25em;
       color: transparent;
     }
 
@@ -370,7 +371,6 @@ svg.gblog-icon {
       bottom: 0;
       right: 0;
       padding: $padding-4 $padding-8;
-      font-size: 0.8em;
       color: $gray-100;
       border-radius: $border-radius 0;
     }
@@ -404,7 +404,7 @@ svg.gblog-icon {
     }
 
     svg.gblog-icon {
-      font-size: 1.2em;
+      font-size: $font-size-20;
     }
 
     .gblog-button {
@@ -456,14 +456,14 @@ svg.gblog-icon {
   &__codecopy {
     visibility: hidden;
     position: absolute;
-    top: 0.5rem;
-    right: 1rem;
+    top: $padding-8;
+    right: $padding-8;
 
     border: $border-2 solid var(--code-copy-border-color);
     border-radius: $border-radius;
     background: var(--code-copy-background);
-    width: 2.2rem;
-    height: 2.2rem;
+    width: $padding-32;
+    height: $padding-32;
 
     svg.gblog-icon {
       top: 0;
@@ -495,7 +495,7 @@ svg.gblog-icon {
   }
 
   &__item {
-    line-height: 2em;
+    line-height: $padding-32;
 
     &--row {
       margin-right: $padding-16;
@@ -576,6 +576,8 @@ svg.gblog-icon {
 }
 
 .gblog-toc {
+  margin: $padding-16 0;
+
   // Classes to hide nested levels of ToC/Menu
   &__level--1 ul ul,
   &__level--2 ul ul ul,

src/sass/_chroma_base.scss

@@ -10,7 +10,6 @@
 
   .highlight {
     pre.chroma {
-      margin: 0;
       width: 100%;
       overflow: auto;
       max-height: var(--code-max-height);
@@ -32,6 +31,7 @@
     pre.chroma {
       max-height: none;
       border-radius: 0;
+      margin: 0;
     }
   }
   .chroma .lntable td:first-child {
@@ -45,6 +45,6 @@
   }
   .chroma .lntable td:nth-child(2) {
     width: 100%;
-    margin-left: 2em;
+    margin-left: $padding-32;
   }
 }

src/sass/_markdown.scss

@@ -1,23 +1,5 @@
 .gblog-markdown {
-  line-height: 1.6em;
-
-  > :first-child {
-    margin-top: 0 !important;
-  }
-
-  &--nested {
-    :first-child {
-      margin-top: 0;
-    }
-
-    > pre {
-      margin-top: 0 !important;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
+  line-height: $padding-24;
 
   h1,
   h2,
@@ -29,7 +11,7 @@
 
     > code {
       border-top: $border-4 solid var(--accent-color);
-      font-size: 0.75em !important;
+      font-size: $font-size-12 !important;
     }
   }
 
@@ -37,7 +19,7 @@
   h5,
   h6 {
     > code {
-      font-size: 0.8rem !important;
+      font-size: $font-size-14 !important;
     }
   }
 
@@ -91,21 +73,13 @@
 
     border-left: $border-4 solid var(--accent-color);
     border-radius: $border-radius;
-
-    :first-child {
-      margin-top: 0;
-    }
-    :last-child {
-      margin-bottom: 0;
-    }
   }
 
   table:not(.lntable) {
     display: table;
     border-spacing: 0;
     border-collapse: collapse;
-    margin-top: $padding-16;
-    margin-bottom: $padding-16;
+    margin: $padding-16 0;
     width: 100%;
     text-align: left;
 
@@ -149,12 +123,8 @@
     }
   }
 
-  pre {
-    margin: 1rem 0;
-  }
-
   code {
-    padding: 0.2em 0.4em;
+    padding: $padding-4 $padding-8;
   }
 
   pre,
@@ -162,13 +132,13 @@
     background-color: var(--code-background);
     border-radius: $border-radius;
     color: var(--code-font-color);
-    font-size: 0.85rem;
-    line-height: 1.45em;
+    font-size: $font-size-14;
+    line-height: $padding-16;
   }
 
   pre code {
     display: block;
-    padding: 1rem;
+    padding: $padding-16;
     width: 100%;
   }
 
@@ -177,7 +147,7 @@
   }
 
   section.footnotes {
-    margin-top: 3rem;
+    margin-top: $padding-32;
     color: var(--body-font-color);
     font-size: $font-size-14;
   }

src/sass/_shortcodes.scss

@@ -1,7 +1,6 @@
 // {{< expand "Label" "icon" >}}
 .gblog-expand {
-  margin-top: $padding-16;
-  margin-bottom: $padding-16;
+  margin: $padding-16 0;
 
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
@@ -17,7 +16,7 @@
 
   &__content {
     display: none;
-    padding: $padding-16;
+    padding: 0 $padding-16;
   }
 
   &__control:checked + &__content {
@@ -31,8 +30,7 @@
 
 // {{< tabs >}}
 .gblog-tabs {
-  margin-top: $padding-16;
-  margin-bottom: $padding-16;
+  margin: $padding-16 0;
 
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
@@ -54,7 +52,7 @@
     order: 999; //Move content blocks to the end
     width: 100%;
     border-top: $border-1 solid var(--accent-color-lite);
-    padding: $padding-16;
+    padding: 0 $padding-16;
     display: none;
   }
 
@@ -72,6 +70,8 @@
 
 // {{< columns >}}
 .gblog-columns {
+  margin: $padding-16 0;
+
   &--regular > :first-child {
     flex: 1;
   }
@@ -88,7 +88,6 @@
 
   &__content {
     flex: 1 1;
-    margin: $padding-16 0;
     min-width: $body-min-width * 0.66;
     padding: 0;
   }
@@ -101,12 +100,12 @@
 // {{< button >}}
 .gblog-button {
   $root: &;
+  margin: $padding-16 0;
 
   display: inline-block;
   background: var(--accent-color-lite);
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
-  margin: $padding-8 0;
   cursor: pointer;
   user-select: none;
 
@@ -146,6 +145,7 @@
 
 // {{< box >}}
 .gblog-box {
+  flex-direction: column;
   background: var(--accent-color-lite);
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
@@ -170,9 +170,9 @@
     gap: $padding-8;
 
     svg.gblog-icon {
-      width: 1.3rem;
-      height: 1.3rem;
-      min-width: 1.3rem;
+      width: $padding-24;
+      height: $padding-24;
+      min-width: $padding-24;
     }
   }
 

src/sass/_utils.scss

@@ -83,4 +83,9 @@
 
 .table-wrap {
   overflow: auto;
+  margin: $padding-16 0;
+
+  > table {
+    margin: 0 !important;
+  }
 }