fix(callouts)!: match callout DOM to Obsidian (#2104)

Emile Bangma

2025-09-21 4923affa7722dfc751f1074348e6dad214fe0c08

fix(callouts)!: match callout DOM to Obsidian (#2104)

* fix(callouts): match callout DOM to Obsidian

* use new transition curve for all callout transitions

* chore!: bump version to 4.5.2

 package-lock.json

@@ -1,12 +1,12 @@
{
  "name": "@jackyzha0/quartz",
  "version": "4.5.1",
  "version": "4.5.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@jackyzha0/quartz",
      "version": "4.5.1",
      "version": "4.5.2",
      "license": "MIT",
      "dependencies": {
        "@clack/prompts": "^0.11.0",

 package.json

@@ -2,7 +2,7 @@
  "name": "@jackyzha0/quartz",
  "description": "🌱 publish your digital garden and notes as a website",
  "private": true,
  "version": "4.5.1",
  "version": "4.5.2",
  "type": "module",
  "author": "jackyzha0 <j.zhao2k19@gmail.com>",
  "license": "MIT",

 quartz/plugins/transformers/ofm.ts

@@ -488,16 +488,7 @@
                    {
                      data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                      type: "blockquote",
                      children: [
                        {
                          data: {
                            hProperties: { className: ["callout-content-inner"] },
                            hName: "div",
                          },
                          type: "blockquote",
                          children: [...calloutContent],
                        },
                      ],
                      children: [...calloutContent],
                    },
                  ]
                }

 quartz/styles/callouts.scss

@@ -11,14 +11,11 @@

  & > .callout-content {
    display: grid;
    transition: grid-template-rows 0.3s ease;
    transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
    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;
    }
  }
}