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 ee33b49d89
commit 4cafc64eb9
4 changed files with 72 additions and 103 deletions

View File

@ -54,30 +54,25 @@
blockquote.callout-collapsible { blockquote.callout-collapsible {
cursor: pointer; cursor: pointer;
}
blockquote.callout-collapsed { &.callout-collapsible::after {
border-bottom-right-radius: 5px !important;
padding-bottom: 0 !important;
}
blockquote.callout-collapsible::after {
content: '-'; content: '-';
display: inline-block;
height: 24px;
width: 18px;
margin: 0;
position: absolute;
right: 6px; right: 6px;
top: 0;
font-size: 175%;
font-weight: bolder; font-weight: bolder;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
blockquote.callout-collapsed::after { }
blockquote.callout-collapsed {
& > p { border-bottom-right-radius: 5px !important; }
padding-bottom: 0 !important;
&::after {
content: '+' !important; content: '+' !important;
} }
blockquote.callout-collapsed > *:not(:first-child) { & > *:not(:first-child) {
display: none !important; display: none !important;
} }
}
blockquote[class*="-callout"] { blockquote[class*="-callout"] {
margin-right: 0; margin-right: 0;
@ -86,29 +81,38 @@ blockquote[class*="-callout"] {
padding-left: 0 !important; padding-left: 0 !important;
padding-bottom: 0.25em; padding-bottom: 0.25em;
color: var(--dark); color: var(--dark);
background-color: var(--outlinegray); background-color: var(--lightgray);
}
blockquote[class*="-callout"] > p { & > p {
border-top-right-radius: 5px; border-top-right-radius: 5px;
padding-left: 1em; padding: 0.5em 1em;
padding-right: 1em; margin: 0;
color: var(--dark); color: var(--gray);
background-color: var(--outlinegray);
} &:first-child {
blockquote[class*="-callout"] > p:first-child::after {
display: inline-block;
height: 24px;
width: 18px;
margin: 3px 0;
position: absolute;
left: 6px;
top: 0;
}
blockquote[class*="-callout"] > p:first-child {
font-size: 125%;
font-weight: bold; font-weight: bold;
padding-left: 30px; color: var(--dark);
border-bottom-right-radius: 5px; padding: 0.4em 30px;
}
}
}
blockquote[class*="-callout"] > p:first-child::after, blockquote.callout-collapsible::after {
display: inline-block;
height: 18px;
width: 18px;
position: absolute;
top: 0.4em;
margin: 0.2em 0.4em;
}
blockquote[class*="-callout"] > p:first-child {
font-weight: bold;
padding: 0.4em 35px;
&::after {
left: 0;
}
} }
blockquote.abstract-callout, 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` 1. Extremely fast full-text search by pressing `Ctrl` + `k`
2. Customizable and hackable design based on Hugo 2. Customizable and hackable design based on Hugo
3. Automatically generated backlinks, link previews, and local graph 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 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. 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 ## 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
``` See [documentation on supported types and syntax here](https://help.obsidian.md/How+to/Use+callouts#Types).
> [!example] Example
## Showcase
> [!example] Examples
> >
> Text > Aliases: example
```
Turns to: > [!note] Notes
> [!example] Example
> >
> Text > Aliases: note
## Collapsible Callouts: > [!abstract] Summaries
```
> [!example]- Starts Collapsed
> >
> Text > Aliases: abstract, summary, tldr
```
Turns to: > [!info] Info
> [!example]- Starts Collapsed
> >
> Text > Aliases: info, todo
``` > [!tip] Hint
> [!example]- Starts Opened
> >
> Text > Aliases: tip, hint, important
```
Turns to: > [!success] Success
> [!example]- Starts Opened
> >
> Text > Aliases: success, check, done
## Showcase: > [!question] Question
> [!example] example
> >
> 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 > Aliases: quote, cite
> [!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

View File

@ -18,7 +18,7 @@ make update-force
Or, manually checkout the changes yourself. 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! > 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. > Make sure you have a copy of these changes if you don't want to lose them.