PoorBooru/public/css/style.css

187 lines
2.4 KiB
CSS

/*
* PoorBooru - Poorman's booru
*
* Written in 2023 by Lucas
*
* To the extent possible under law, the author(s) have dedicated all
* copyright and related and neighboring rights to this software to the
* public domain worldwide. This software is distributed without any
* warranty.
*
* You should have received a copy of the CC0 Public Domain Dedication
* along with this software. If not, see
* <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
/*
* Some parts copied from https://piccalil.li/blog/a-modern-css-reset/
*/
:root {
--bg-color: #0c0700;
--fg-color: #fff8f0;
--accent-color-0: #ec57bc;
--accent-color-1: #f7be00;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
dd,
dl,
dt,
h1,
h2,
p {
margin: 0;
}
body {
margin: 0 auto;
min-height: 100vh;
background-color: var(--bg-color);
color: var(--fg-color);
font-family: monospace;
font-size: 1.25rem;
line-height: 2.4;
}
main {
padding-top: 1.5rem;
}
dl,
h1,
h2,
p {
margin-bottom: 1.5rem;
}
footer > p {
margin-bottom: 0;
}
h1 {
text-align: center;
font-size: 3rem;
line-height: 2;
}
h2 {
font-size: 2.5rem;
line-height: 1.2;
}
a {
color: var(--accent-color-0);
}
a:link,
a:visited {
color: var(--accent-color-0);
}
a:hover,
a:active {
color: var(--accent-color-1);
}
dt {
font-weight: bold;
}
dd {
margin-left: 3rem;
}
.viewport {
margin-left: auto;
margin-right: auto;
width: 60rem;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-accent {
border-color: var(--accent-color-0);
}
.text-center {
text-align: center;
}
.text-small {
font-size: 1rem;
line-height: 3;
}
.bg-color {
background-color: var(--bg-color);
}
.fg-color {
color: var(--fg-color);
}
.fg-accent {
color: var(--accent-color-0);
}
.main-nav-link {
font-weight: bold;
text-decoration: none;
}
.main-nav-link-gap {
gap: 0 1rem;
}
/* 0.5rem padding compensates the unused 1rem gap at the end. */
.gallery {
align-items: center;
gap: 1rem;
padding: 0 0.5rem;
}
.gallery-image {
max-height: 24rem;
max-width: 14rem;
height: 100%;
width: 100%;
}
.media-image {
max-width: 100%;
}
.flex-c-horizontal {
display: flex;
}
.flex-c-vertical {
display: flex;
flex-direction: column;
}
.flex-c-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-c-wrap {
flex-wrap: wrap;
}
.flex-i-fullsize {
flex: auto;
}