PoorBooru/public/css/style.css

197 lines
3.0 KiB
CSS
Raw Normal View History

2023-02-18 10:49:05 +01:00
/*
* 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 {
2023-03-14 22:53:34 +01:00
--dark-theme-bg: #0c0700;
--dark-theme-text: #fff8f0;
--dark-theme-accent: #ec57bc;
--dark-theme-accent-hover: #f7be00;
--light-theme-bg: #fff8f0;
--light-theme-text: #0c0700;
--light-theme-accent: #dc3a23;
--light-theme-accent-hover: #4997ce;
--bg: var(--dark-theme-bg);
--text: var(--dark-theme-text);
--accent: var(--dark-theme-accent);
--accent-hover: var(--dark-theme-accent-hover);
2023-02-18 10:49:05 +01:00
}
*,
*::before,
*::after {
box-sizing: border-box;
}
dd,
dl,
dt,
2023-02-18 10:49:05 +01:00
h1,
h2,
p {
2023-02-18 10:49:05 +01:00
margin: 0;
}
body {
margin: 0 auto;
min-height: 100vh;
2023-03-14 22:53:34 +01:00
background-color: var(--bg);
color: var(--text);
2023-02-18 10:49:05 +01:00
font-family: monospace;
font-size: 1.25rem;
line-height: 2.4;
2023-02-18 10:49:05 +01:00
}
2023-03-14 22:53:34 +01:00
body > header {
border-bottom: 0.0625rem solid var(--accent);
margin-bottom: 0.1875rem;
}
body > main {
padding-top: 1.5rem;
2023-03-14 22:53:34 +01:00
border-top: 0.0625rem solid var(--accent);
border-bottom: 0.0625rem solid var(--accent);
}
body > footer {
border-top: 0.0625rem solid var(--accent);
margin-top: 0.1875rem;
}
dl,
2023-02-18 10:49:05 +01:00
h1,
h2,
p {
2023-02-18 10:49:05 +01:00
margin-bottom: 1.5rem;
}
footer > p {
margin-bottom: 0;
}
h1 {
text-align: center;
2023-02-19 21:22:22 +01:00
font-size: 3rem;
line-height: 2;
2023-02-18 10:49:05 +01:00
}
h2 {
font-size: 2.5rem;
line-height: 1.2;
}
2023-03-14 22:53:34 +01:00
a,
2023-02-18 10:49:05 +01:00
a:link,
a:visited {
2023-03-14 22:53:34 +01:00
color: var(--accent);
2023-02-18 10:49:05 +01:00
}
a:hover,
a:active {
2023-03-14 22:53:34 +01:00
color: var(--accent-hover);
2023-02-18 10:49:05 +01:00
}
dt {
font-weight: bold;
}
dd {
margin-left: 3rem;
}
2023-02-18 10:49:05 +01:00
.viewport {
2023-02-18 14:51:17 +01:00
margin-left: auto;
margin-right: auto;
width: 60rem;
2023-02-18 10:49:05 +01:00
}
.border-top {
2023-03-14 22:53:34 +01:00
border-top: 0.0625rem solid var(--accent);
2023-02-18 10:49:05 +01:00
}
2023-03-14 22:53:34 +01:00
.border-bottom {
border-bottom: 0.0625rem solid var(--accent);
2023-02-18 10:49:05 +01:00
}
.text-center {
text-align: center;
}
.text-small {
font-size: 1rem;
line-height: 3;
}
2023-03-14 22:53:34 +01:00
.main-nav {
gap: 0 1rem;
2023-02-18 10:49:05 +01:00
}
2023-03-14 22:53:34 +01:00
.main-nav > a {
2023-02-18 10:49:05 +01:00
font-weight: bold;
text-decoration: none;
}
2023-02-18 15:47:32 +01:00
/* 0.5rem padding compensates the unused 1rem gap at the end. */
.gallery {
align-items: center;
gap: 1rem;
padding: 0 0.5rem;
}
2023-03-14 22:53:34 +01:00
.gallery > a > img,
.gallery > a:link > img,
.gallery > a:visited > img {
2023-02-18 15:47:32 +01:00
max-height: 24rem;
max-width: 14rem;
height: 100%;
width: 100%;
2023-03-14 22:53:34 +01:00
outline-offset: 0.1875rem;
outline: 0.0625rem solid;
outline-color: var(--accent);
2023-02-18 15:47:32 +01:00
}
2023-03-14 22:53:34 +01:00
.gallery > a:hover > img,
.gallery > a:active > img {
outline-color: var(--accent-hover);
}
2023-02-18 10:49:05 +01:00
.flex-c-horizontal {
display: flex;
}
.flex-c-vertical {
display: flex;
flex-direction: column;
}
.flex-c-center {
display: flex;
justify-content: center;
align-items: center;
}
2023-02-18 15:47:32 +01:00
.flex-c-wrap {
flex-wrap: wrap;
}
2023-02-18 10:49:05 +01:00
.flex-i-fullsize {
flex: auto;
}