From 4ff08de9ec71571a23074643cf088cd636dd23d0 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Mon, 25 Aug 2025 14:05:07 +0200
Subject: [PATCH] fix(callouts): match callout DOM to Obsidian

---
 quartz/plugins/transformers/ofm.ts | 11 +----------
 quartz/styles/callouts.scss        | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 42428ae7c..7a523aa59 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -488,16 +488,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                     {
                       data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                       type: "blockquote",
-                      children: [
-                        {
-                          data: {
-                            hProperties: { className: ["callout-content-inner"] },
-                            hName: "div",
-                          },
-                          type: "blockquote",
-                          children: [...calloutContent],
-                        },
-                      ],
+                      children: [...calloutContent],
                     },
                   ]
                 }
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index 02921aed1..feba84747 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -12,13 +12,10 @@
   & > .callout-content {
     display: grid;
     transition: grid-template-rows 0.3s ease;
+    overflow: hidden;
 
-    & > .callout-content-inner {
-      overflow: hidden;
-
-      & > :first-child {
-        margin-top: 0;
-      }
+    & > :first-child {
+      margin-top: 0;
     }
   }
 
@@ -121,8 +118,19 @@
     --callout-icon: var(--callout-icon-quote);
   }
 
-  &.is-collapsed > .callout-title > .fold-callout-icon {
-    transform: rotateZ(-90deg);
+  &.is-collapsed {
+    & > .callout-title > .fold-callout-icon {
+      transform: rotateZ(-90deg);
+    }
+
+    .callout-content > :first-child {
+      transition:
+        height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
+        margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
+      overflow-y: clip;
+      height: 0;
+      margin-top: -1rem;
+    }
   }
 }