docs: improve scss structure and admonition styling, update docs

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);
-}
-blockquote[class*="-callout"] > p {
-    border-top-right-radius: 5px;
-    padding-left: 1em;
-    padding-right: 1em;
-    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: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,

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.
 

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
-```
-
-Turns to:
-
-> [!example] Example
->
-> Text
-
-## Collapsible Callouts:
-
-```
-> [!example]- Starts Collapsed
-> 
-> Text
-```
-
-Turns to:
-
-> [!example]- Starts Collapsed
->
-> Text
-
-```
-> [!example]- Starts Opened
-> 
-> Text
-```
-
-Turns to:
-
-> [!example]- Starts Opened
->
-> Text
+See [documentation on supported types and syntax here](https://help.obsidian.md/How+to/Use+callouts#Types).
 
-## Showcase:
+## Showcase
 
-> [!example] example
+> [!example] Examples
 >
-> example
+> Aliases: example
 
-> [!note] note
+> [!note] Notes
 >
-> note
+> Aliases: note
 
-> [!abstract] abstract, summary, tldr
+> [!abstract] Summaries 
 >
-> abstract, summary, tldr
+> Aliases: abstract, summary, tldr
 
-> [!info] info, todo
+> [!info] Info 
 >
-> info, todo
+> Aliases: info, todo
 
-> [!tip] tip, hint, important
+> [!tip] Hint 
 >
-> tip, hint, important
+> Aliases: tip, hint, important
 
-> [!success] success, check, done
+> [!success] Success 
 >
-> success, check, done
+> Aliases: success, check, done
 
-> [!question] question, help, faq
+> [!question] Question 
 >
-> question, help, faq
+> Aliases: question, help, faq
 
-> [!warning] warning, caution, attention
+> [!warning] Warning 
 >
-> warning, caution, attention
+> Aliases: warning, caution, attention
 
-> [!failure] failure, fail, missing
+> [!failure] Failure 
 >
-> failure, fail, missing
+> Aliases: failure, fail, missing
 
-> [!danger] danger, error
+> [!danger] Error
 >
-> danger, error
+> Aliases: danger, error
 
-> [!bug] bug
+> [!bug] Bug
 >
-> bug
+> Aliases: bug
 
-> [!quote] quote, cite
+> [!quote] Quote
 >
-> quote, cite
+> Aliases: quote, cite

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.