diff --git a/assets/styles/_callouts.scss b/assets/styles/_callouts.scss index 712920907..d41cdfb13 100644 --- a/assets/styles/_callouts.scss +++ b/assets/styles/_callouts.scss @@ -54,29 +54,24 @@ blockquote.callout-collapsible { cursor: pointer; + + &.callout-collapsible::after { + content: '-'; + right: 6px; + font-weight: bolder; + font-family: 'Courier New', Courier, monospace; + } } + blockquote.callout-collapsed { - border-bottom-right-radius: 5px !important; + & > p { border-bottom-right-radius: 5px !important; } padding-bottom: 0 !important; -} -blockquote.callout-collapsible::after { - content: '-'; - display: inline-block; - height: 24px; - width: 18px; - margin: 0; - position: absolute; - right: 6px; - top: 0; - font-size: 175%; - font-weight: bolder; - font-family: 'Courier New', Courier, monospace; -} -blockquote.callout-collapsed::after { - content: '+' !important; -} -blockquote.callout-collapsed > *:not(:first-child) { - display: none !important; + &::after { + content: '+' !important; + } + & > *:not(:first-child) { + display: none !important; + } } blockquote[class*="-callout"] { @@ -86,29 +81,38 @@ blockquote[class*="-callout"] { padding-left: 0 !important; padding-bottom: 0.25em; color: var(--dark); - background-color: var(--outlinegray); + background-color: var(--lightgray); + + & > p { + border-top-right-radius: 5px; + padding: 0.5em 1em; + margin: 0; + color: var(--gray); + + &:first-child { + font-weight: bold; + color: var(--dark); + padding: 0.4em 30px; + } + } } -blockquote[class*="-callout"] > p { - border-top-right-radius: 5px; - padding-left: 1em; - padding-right: 1em; - color: var(--dark); - background-color: var(--outlinegray); -} -blockquote[class*="-callout"] > p:first-child::after { + +blockquote[class*="-callout"] > p:first-child::after, blockquote.callout-collapsible::after { display: inline-block; - height: 24px; + height: 18px; width: 18px; - margin: 3px 0; position: absolute; - left: 6px; - top: 0; + top: 0.4em; + margin: 0.2em 0.4em; } + blockquote[class*="-callout"] > p:first-child { - font-size: 125%; font-weight: bold; - padding-left: 30px; - border-bottom-right-radius: 5px; + padding: 0.4em 35px; + + &::after { + left: 0; + } } blockquote.abstract-callout, diff --git a/content/_index.md b/content/_index.md index 98fe8c9e2..0278cc5e5 100644 --- a/content/_index.md +++ b/content/_index.md @@ -7,9 +7,8 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-th 1. Extremely fast full-text search by pressing `Ctrl` + `k` 2. Customizable and hackable design based on Hugo 3. Automatically generated backlinks, link previews, and local graph -4. Built-in [[notes/CJK + Latex Support (测试) | CJK + Latex Support]] +4. Built-in [[notes/CJK + Latex Support (测试) | CJK + Latex Support]] and [[notes/callouts | Admonition-style callouts]] 5. Support for both Markdown Links and Wikilinks -6. Built-in [[notes/callouts | Callouts Support]] Check out some of the [amazing gardens that community members](notes/showcase.md) have published with Quartz or read about [why I made Quartz](notes/philosophy.md) to begin with. diff --git a/content/notes/callouts.md b/content/notes/callouts.md index f85cb0a3e..c71b30584 100644 --- a/content/notes/callouts.md +++ b/content/notes/callouts.md @@ -4,94 +4,60 @@ title: "Callouts" ## Callout support -Supports built-in Callouts. See [documentation on supported types here](https://help.obsidian.md/How+to/Use+callouts#Types). +Quartz supports the same Admonition-callout syntax as Obsidian. -## Format: +This includes +- 12 Distinct callout types (each with several aliases) +- Collapsable callouts -``` -> [!example] Example -> -> Text -``` +See [documentation on supported types and syntax here](https://help.obsidian.md/How+to/Use+callouts#Types). -Turns to: +## Showcase -> [!example] Example +> [!example] Examples > -> Text +> Aliases: example -## Collapsible Callouts: - -``` -> [!example]- Starts Collapsed -> -> Text -``` - -Turns to: - -> [!example]- Starts Collapsed +> [!note] Notes > -> Text +> Aliases: note -``` -> [!example]- Starts Opened -> -> Text -``` - -Turns to: - -> [!example]- Starts Opened +> [!abstract] Summaries > -> Text +> Aliases: abstract, summary, tldr -## Showcase: - -> [!example] example +> [!info] Info > -> example +> Aliases: info, todo -> [!note] note +> [!tip] Hint > -> note +> Aliases: tip, hint, important -> [!abstract] abstract, summary, tldr +> [!success] Success > -> abstract, summary, tldr +> Aliases: success, check, done -> [!info] info, todo +> [!question] Question > -> info, todo +> Aliases: question, help, faq -> [!tip] tip, hint, important +> [!warning] Warning > -> tip, hint, important +> Aliases: warning, caution, attention -> [!success] success, check, done +> [!failure] Failure > -> success, check, done +> Aliases: failure, fail, missing -> [!question] question, help, faq +> [!danger] Error > -> question, help, faq +> Aliases: danger, error -> [!warning] warning, caution, attention +> [!bug] Bug > -> warning, caution, attention +> Aliases: bug -> [!failure] failure, fail, missing +> [!quote] Quote > -> failure, fail, missing - -> [!danger] danger, error -> -> danger, error - -> [!bug] bug -> -> bug - -> [!quote] quote, cite -> -> quote, cite +> Aliases: quote, cite diff --git a/content/notes/updating.md b/content/notes/updating.md index 290d64756..ef4688e99 100644 --- a/content/notes/updating.md +++ b/content/notes/updating.md @@ -18,7 +18,7 @@ make update-force Or, manually checkout the changes yourself. -> ⚠️ **WARNING** ⚠️ +> [!warning] Warning! > > If you customized the files in `data/`, or anything inside `layouts/`, your customization may be overwritten! > Make sure you have a copy of these changes if you don't want to lose them.