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
This commit is contained in:
Emile Bangma
2025-09-21 19:14:03 +02:00
committed by GitHub
parent 4c78d29c13
commit 4923affa77
4 changed files with 21 additions and 22 deletions

4
package-lock.json generated
View File

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

View File

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

View File

@@ -488,16 +488,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
{ {
data: { hProperties: { className: ["callout-content"] }, hName: "div" }, data: { hProperties: { className: ["callout-content"] }, hName: "div" },
type: "blockquote", type: "blockquote",
children: [ children: [...calloutContent],
{
data: {
hProperties: { className: ["callout-content-inner"] },
hName: "div",
},
type: "blockquote",
children: [...calloutContent],
},
],
}, },
] ]
} }

View File

@@ -11,14 +11,11 @@
& > .callout-content { & > .callout-content {
display: grid; 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 { & > :first-child {
overflow: hidden; margin-top: 0;
& > :first-child {
margin-top: 0;
}
} }
} }
@@ -121,8 +118,19 @@
--callout-icon: var(--callout-icon-quote); --callout-icon: var(--callout-icon-quote);
} }
&.is-collapsed > .callout-title > .fold-callout-icon { &.is-collapsed {
transform: rotateZ(-90deg); & > .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;
}
} }
} }