fix: fix various spacing issues (#238)

layouts/shortcodes/columns.html

@@ -1,4 +1,4 @@
-<div class="gdoc-columns flex flex-wrap">
+<div class="gdoc-columns flex flex-wrap flex-mobile-column">
   {{ range split .Inner "<--->" }}
   <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
     {{ . | $.Page.RenderString }}

src/sass/_base.scss

@@ -228,9 +228,14 @@ img {
       font-weight: normal;
     }
 
-    > :first-child {
+    > :first-child,
+    > :first-child > :first-child {
       margin-top: 0;
     }
+
+    section {
+      margin-top: $padding-32;
+    }
   }
 
   &__control {
@@ -310,11 +315,6 @@ img {
   &--main > ul > li > label > a {
     font-weight: bold;
   }
-
-  &--tags,
-  &--more {
-    padding-top: $padding-8;
-  }
 }
 
 .gdoc-nav__entry,

src/sass/_chroma_base.scss

@@ -1,7 +1,6 @@
 @mixin chroma_base {
   .chroma {
     color: var(--code-font-color);
-    margin: 1rem 0;
   }
   .chroma code {
     background-color: var(--code-background);
@@ -45,7 +44,29 @@
     > pre.chroma code {
       padding: 1rem;
       width: 100%;
-      overflow: auto;
+      overflow-x: auto;
     }
   }
+
+  /* LineTable */
+  .chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: 100%;
+    display: block;
+  }
+  .chroma .lntable td:first-child code {
+    background-color: var(--code-accent-color-lite);
+    border-right: $border-1 solid var(--code-accent-color);
+    padding: 0.5em 0;
+  }
+  .chroma .lntable td code {
+    padding: 0.5em 0;
+  }
+  .chroma .lntable td:nth-child(2) {
+    width: 100%;
+    margin-left: 2em;
+  }
 }

src/sass/_chroma_dark.scss

@@ -18,28 +18,6 @@
     margin: 0;
     border: 0;
   }
-  /* LineTable */
-  .chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: 100%;
-    overflow: auto;
-    display: block;
-  }
-  .chroma .lntable td:first-child code {
-    background-color: var(--code-accent-color-lite);
-    border-right: $border-1 solid var(--code-accent-color);
-    padding: 0.5em 0;
-  }
-  .chroma .lntable td code {
-    padding: 0.5em 0;
-  }
-  .chroma .lntable td:nth-child(2) {
-    width: 100%;
-    margin-left: 2em;
-  }
   /* LineHighlight */
   .chroma .hl {
     display: block;

src/sass/_chroma_light.scss

@@ -19,28 +19,6 @@
     margin: 0;
     border: 0;
   }
-  /* LineTable */
-  .chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: 100%;
-    overflow: auto;
-    display: block;
-  }
-  .chroma .lntable td:first-child code {
-    background-color: var(--code-accent-color-lite);
-    border-right: $border-1 solid var(--code-accent-color);
-    padding: 0.5em 0;
-  }
-  .chroma .lntable td code {
-    padding: 0.5em 0;
-  }
-  .chroma .lntable td:nth-child(2) {
-    width: 100%;
-    margin-left: 2em;
-  }
   /* LineHighlight */
   .chroma .hl {
     display: block;

src/sass/_markdown.scss

@@ -2,13 +2,18 @@
   line-height: 1.6em;
 
   > :first-child {
-    margin-top: 0;
+    margin-top: 0 !important;
   }
 
   &--nested {
     :first-child {
       margin-top: 0;
     }
+
+    > pre {
+      margin-top: 0 !important;
+    }
+
     > :last-child {
       margin-bottom: 0;
     }

src/sass/_mobile.scss

@@ -60,6 +60,10 @@
     display: none;
   }
 
+  .flex-mobile-column {
+    flex-direction: column;
+  }
+
   .gdoc-footer {
     &__item--row {
       width: 100%;