keyoxide-web/static-src/styles/typography.scss
Pastel de N4ta 301571c94a
Changed anchor tag donate buttons to use CSS variables for more consistent declaration
Donate buttons now use the variables used in the a.button declaration
for more consistent declaration
2024-10-02 15:21:23 +01:00

135 lines
3.6 KiB
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: 1em 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);
transition: 0.2s ease-out;
&:hover, &:active, &:focus {
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(--button-text-color);
}
a.button.button--donate.button--opencollective {
--button-text-color: #fff;
--button-background-color: #0c2d66;
--button-text-color-hover: #fff;
--button-background-color-hover: #144aa9;
}
a.button.button--donate.button--liberapay {
--button-text-color: #333;
--button-background-color: #ffee16;
--button-text-color-hover: #333;
--button-background-color-hover: #fff463;
}
a.button.button--donate.button--kofi {
--button-text-color: #333;
--button-background-color: #1ac0ff;
--button-text-color-hover: #333;
--button-background-color-hover: #66d4ff;
}
ul {
padding-left: 1em;
list-style: '- ';
}