Lucas
ec026de8b5
Make title and pager part of the main layout. Adjust sizes and vertical rhythm all over the place. Add flex to the main section, again keeping the header and footer at top and bottom. Rename main navigation classes. Remove unused index.tt template.
160 lines
2.2 KiB
CSS
160 lines
2.2 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;
|
|
}
|
|
|
|
h1,
|
|
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;
|
|
}
|
|
|
|
h1,
|
|
p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
footer > p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-color-0);
|
|
}
|
|
|
|
a:link,
|
|
a:visited {
|
|
color: var(--accent-color-0);
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
color: var(--accent-color-1);
|
|
}
|
|
|
|
.viewport {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-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%;
|
|
}
|
|
|
|
.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;
|
|
}
|