* Add icons as masks
To handle a simple way to add custom icons, i made it pure css. Icon are now a mask for the callout-icon div, so they always follow the --color form the current callout.
Now to add a custom icon, you simply add
```css
.callout {
&[data-callout="custom"] {
--color: #customcolor;
--border: #custombordercolor;
--bg: #custombg;
--callout-icon: url('data:image/svg+xml; utf8, <custom formatted svg>');
}
```
to custom.scss
* remove now unused code
* Make callouts an enum
* docs: update instructions for custom callouts
* Prettier & run format
* dynamic matching
For maintainability, make dynamic mathching. If we or Obsidian want to support more callouts, we simply add it to the enum
* callout mapping const
Getting ride of the enum entierly as it's not worth here?
* fix callout icon styling
* Add forgotten icons
* Rebase
* harmonize callout icon and fold icon
* fix docs + prettier
* Update docs/features/callouts.md
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Update quartz/plugins/transformers/ofm.ts
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Suggestions fix
* remove unecessary rules
* comment is always nice
* Update docs/features/callouts.md
---------
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
Quartz v4
“[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming
Quartz is a set of tools that helps you publish your digital garden and notes as a website for free. Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.
🔗 Read the documentation and get started: https://quartz.jzhao.xyz/
Sponsors
Languages
TypeScript
76.3%
SCSS
17.5%
JavaScript
4.5%
CSS
1.7%