style: Fixing spacing between elements at markdown

Author: ktquez

src/.vuepress/theme/components/headerCodeSnippet.vue

@@ -3,7 +3,7 @@
     ref="headerCodeSnippet"
     class="flex items-center justify-between w-full header-code"
   >
-    <div class="pl-6 text-base">
+    <div class="pl-6 text-sm">
       <slot />
     </div>
     <div class="flex">
@@ -99,5 +99,9 @@ export default {
   p {
     margin: 0;
   }
+
+  + div[class*=language-] {
+    @apply mt-0;
+  }
 }
 </style>

src/.vuepress/theme/styles/_custom-blocks.scss

@@ -1,10 +1,22 @@
 .custom-block.figure {
-  @apply relative w-full;
+  @apply relative w-full my-10;
+
+  + p {
+    @apply mt-0;
+  }
+
+  > div[class*=language-] {
+    @apply mb-0;
+  }
 
   &[data-type="bq"] {
-    @apply p-10 border-b border-solid rounded-md c-border-color bg-primary;
+    @apply p-10 border-b border-solid rounded-md c-border-color bg-primary my-10;
     border-bottom-width: 6px;
 
+    + p {
+      @apply mt-0;
+    }
+
     &:before {
       @apply absolute text-accent-primary border-none;
       content: '“';
@@ -42,7 +54,12 @@
 }
 
 .custom-block.alert {
-  @apply px-6 pt-5 pb-4;
+  @apply px-6 pt-5 pb-4 my-6;
+
+  + p {
+    @apply mt-0;
+  }
+
   &[data-alert] {
     @apply border border-solid rounded-md c-border-color bg-primary;
     border-bottom-width: 6px;
@@ -53,16 +70,27 @@
       @apply m-0;
     }
   }
+
   &[data-alert="tip"] {
     background-color: var(--bg-custom-block-tip);
     border-color: var(--border-color-custom-block-tip);
   }
+
   &[data-alert="warning"] {
     background-color: var(--bg-custom-block-warning);
     border-color: var(--border-color-custom-block-warning);
+
+    code {
+      background-color: var(--border-color-custom-block-warning);
+    }
   }
+
   &[data-alert="danger"] {
     background-color: var(--bg-custom-block-danger);
     border-color: var(--border-color-custom-block-danger);
+
+    code {
+      background-color: var(--border-color-custom-block-danger);
+    }
   }
 }

src/.vuepress/theme/styles/_markdown.scss

@@ -35,14 +35,17 @@
     z-index: 2;
     line-height: 1.04em;
 
+    + h3 {
+      @apply mt-8;
+    }
 
     + p {
       margin-top: 30px;
     }    
   }
 
   h3 {
-    @apply text-xl font-bold;
+    @apply text-xl font-bold mt-12 mb-8;
     line-height: 1.10em;
   }
 
@@ -193,8 +196,12 @@
   }
 
   div[class*=language-] { 
-    @apply relative w-full whitespace-normal;
+    @apply relative w-full whitespace-normal my-8;
     background-color: var(--bg-code-block);
+
+    + p {
+      @apply mt-0;
+    }
   }
 
   .token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog { color:#999 }