keyoxide-web/static-src/styles/typography.scss

/*
Copyright (C) 2023 Yarmo Mackenbach

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
details.

You should have received a copy of the GNU Affero General Public License along
with this program. If not, see <https://www.gnu.org/licenses/>.

Also add information on how to contact you by electronic and paper mail.

If your software can interact with users remotely through a computer network,
you should also make sure that it provides a way for users to get its source.
For example, if your program is a web application, its interface could display
a "Source" link that leads users to an archive of the code. There are many
ways you could offer source, and different solutions will be better for different
programs; see section 13 for the specific requirements.

You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary. For
more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
*/
h1 {
    font-size: 1.6em;
    margin: 3.2rem 0 1.6rem;
    font-weight: normal;
    color: var(--h1-color);
    cursor: default;
}
h2 {
    margin: 2em 0 0.5em;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--h2-color);
    cursor: default;
    
    small {
        margin-left: 0.8rem;
        padding: 3px 6px;
        background-color: var(--h2-small-color);
        color: #fff;
        border-radius: 4px;
        font-size: 0.8em;
    }
}
h3 {
    margin: 1em 0 0.5em;
    font-size: 1.1em;
    line-height: 1.6rem;
    color: var(--h3-color);
    font-weight: normal;
    cursor: default;
    
    small {
        margin-left: 0.8rem;
        padding: 3px 6px;
        background-color: var(--h3-small-color);
        color: #fff;
        border-radius: 4px;
    }
}
h4 {
    margin: 1.6rem 0;
    font-size: 1em;
    line-height: 1.6rem;
    color: var(--h4-color);
    font-weight: bold;
    cursor: default;

    small {
        margin-left: 0.8rem;
        padding: 3px 6px;
        background-color: var(--h4-small-color);
        color: #fff;
        border-radius: 4px;
    }
}
a {
    color: var(--link-color);

    &:hover {
        color: var(--link-color-hover);
    }
}
a.button i {
    font-size: 1.4em;
}
a.button.button--donate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    padding: 8px 16px;
    font-size: 0.95rem;
    border: 0;
}
a.button.button--donate svg {
    width: 24px;
    height: 24px;
    fill: var(--text-color);
}
a.button.button--donate.button--opencollective {
    color: #fff;
    background-color: #0c2d66;
}
a.button.button--donate.button--opencollective svg {
    fill: #fff;
}
a.button.button--donate.button--opencollective:hover {
    color: #fff;
    background-color: #144aa9;
}
a.button.button--donate.button--liberapay {
    color: #333;
    background-color: #ffee16;
}
a.button.button--donate.button--liberapay svg {
    fill: #333;
}
a.button.button--donate.button--liberapay:hover {
    color: #333;
    background-color: #fff463;
}
a.button.button--donate.button--kofi {
    color: #333;
    background-color: #1ac0ff;
}
a.button.button--donate.button--kofi svg {
    fill: #333;
}
a.button.button--donate.button--kofi:hover {
    color: #333;
    background-color: #66d4ff;
}

ul {
    padding-left: 1em;
    list-style: '- ';
}