From 1dd2143754a652534c35b1a93beb8b7f21ff7e49 Mon Sep 17 00:00:00 2001
From: djdjz7 <djdjz7@icloud.com>
Date: Fri, 27 Dec 2024 23:29:55 +0800
Subject: [PATCH] fix: margin between code blocks

---
 src/assets/base.css       | 56 -------------------------------------
 src/assets/codeblocks.css |  2 +-
 src/assets/containers.css | 58 +++++++++++++++++++++++++++++++++++++++
 src/main.ts               |  1 +
 4 files changed, 60 insertions(+), 57 deletions(-)
 create mode 100644 src/assets/containers.css

diff --git a/src/assets/base.css b/src/assets/base.css
index 2ebccb1..0946ede 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -81,62 +81,6 @@ img {
   --at-apply: bg-gray-200 'dark:bg-dark-100' rounded-full;
 }
 
-.warning,
-.error,
-.info {
-  --at-apply: p-4 rounded-md m-y-2;
-}
-
-.expander {
-  --at-apply: p-x-4 rounded-md m-y-2;
-}
-
-.warning::before,
-.error::before,
-.info::before {
-  --at-apply: text-sm font-bold;
-}
-
-.warning > p:last-of-type,
-.error > p:last-of-type,
-.info > p:last-of-type,
-/* no '>' here as it is two levels deep */
-.expander p:last-of-type {
-  margin-bottom: 0;
-}
-
-.expander p:first-of-type {
-  margin-top: 0;
-}
-
-.warning {
-  --at-apply: 'text-yellow-800 bg-yellow-200/20 dark:bg-yellow-500/20 dark:text-yellow-100';
-}
-
-.warning::before {
-  content: var(--warning-text);
-}
-
-.error {
-  --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
-}
-
-.error::before {
-  content: var(--error-text);
-}
-
-.info {
-  --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
-}
-
-.info::before {
-  content: var(--info-text);
-}
-
-.expander {
-  --at-apply: 'text-gray-800 bg-gray-200/30 dark:bg-truegray-500/20 dark:text-truegray-100 ';
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     color: var(--text-color);
diff --git a/src/assets/codeblocks.css b/src/assets/codeblocks.css
index 005862c..ad40f8e 100644
--- a/src/assets/codeblocks.css
+++ b/src/assets/codeblocks.css
@@ -13,7 +13,7 @@
 }
 
 pre.shiki {
-  --at-apply: rounded-md p-y-3 overflow-auto m-0;
+  --at-apply: rounded-md p-y-3 overflow-auto m-y-2;
 }
 
 .shiki code {
diff --git a/src/assets/containers.css b/src/assets/containers.css
new file mode 100644
index 0000000..8e88e1b
--- /dev/null
+++ b/src/assets/containers.css
@@ -0,0 +1,58 @@
+.warning,
+.error,
+.info {
+  --at-apply: p-4 rounded-md m-y-2;
+}
+
+.expander {
+  --at-apply: p-x-4 rounded-md m-y-2;
+}
+
+.warning::before,
+.error::before,
+.info::before {
+  --at-apply: text-sm font-bold;
+}
+
+.warning > p:last-of-type,
+.error > p:last-of-type,
+.info > p:last-of-type,
+/* no '>' here as it is two levels deep */
+.expander p:last-of-type {
+  margin-bottom: 0;
+}
+
+.expander *:first-child {
+  margin-top: 0;
+}
+.expander *:last-child {
+  margin-bottom: 0;
+}
+
+.warning {
+  --at-apply: 'text-yellow-800 bg-yellow-200/20 dark:bg-yellow-500/20 dark:text-yellow-100';
+}
+
+.warning::before {
+  content: var(--warning-text);
+}
+
+.error {
+  --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
+}
+
+.error::before {
+  content: var(--error-text);
+}
+
+.info {
+  --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
+}
+
+.info::before {
+  content: var(--info-text);
+}
+
+.expander {
+  --at-apply: 'text-gray-800 bg-gray-200/30 dark:bg-truegray-500/20 dark:text-truegray-100 ';
+}
diff --git a/src/main.ts b/src/main.ts
index aff995a..fad45ab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import 'virtual:uno.css'
 import 'virtual:base.css'
 import '@/assets/codeblocks.css'
+import '@/assets/containers.css'
 
 import { createSSRApp } from 'vue'
 import App from './App.vue'