docs: improve scss structure and admonition styling, update docs

Jacky Zhao

2022-07-31 234c707a93e1dbe438d0a45f1348cc6c39e2a265

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

 content/_index.md

@@ -7,9 +7,8 @@
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 @@

## 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

 content/notes/updating.md

@@ -18,7 +18,7 @@

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.