docs: improve scss structure and admonition styling, update docs

This commit is contained in:
Jacky Zhao 2022-07-30 18:46:19 -07:00
parent 728d8529ec
commit 234c707a93
4 changed files with 72 additions and 103 deletions

View file

@ -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,

View file

@ -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.

View file

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

View file

@ -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.