From 234c707a93e1dbe438d0a45f1348cc6c39e2a265 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 30 Jul 2022 18:46:19 -0700
Subject: [PATCH] docs: improve scss structure and admonition styling, update
docs
---
assets/styles/_callouts.scss | 76 +++++++++++++++--------------
content/_index.md | 3 +-
content/notes/callouts.md | 94 ++++++++++++------------------------
content/notes/updating.md | 2 +-
4 files changed, 72 insertions(+), 103 deletions(-)
diff --git a/assets/styles/_callouts.scss b/assets/styles/_callouts.scss
index 7129209..d41cdfb 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 98fe8c9..0278cc5 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 f85cb0a..c71b305 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 290d647..ef4688e 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.