docs: improve scss structure and admonition styling, update docs

Jacky Zhao

2022-07-31 234c707a93e1dbe438d0a45f1348cc6c39e2a265

 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,