GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-19 10:54:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(callouts): match callout DOM to Obsidian

Browse Source
This commit is contained in:
saberzero1 2025-08-25 14:05:07 +02:00
parent 0a57d032a7
commit 4ff08de9ec
No known key found for this signature in database
2 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
quartz/plugins/transformers/ofm.ts
View File

@ -488,17 +488,8 @@ 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],
},
],
},
]
}

16
quartz/styles/callouts.scss
View File

@ -12,15 +12,12 @@
& > .callout-content {
display: grid;
transition: grid-template-rows 0.3s ease;
& > .callout-content-inner {
overflow: hidden;
& > :first-child {
margin-top: 0;
}
}
}
--callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
--callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
@ -121,9 +118,20 @@
--callout-icon: var(--callout-icon-quote);
}
&.is-collapsed > .callout-title > .fold-callout-icon {
&.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;
}
}
}
.callout-title {