1c1d784547
Add a new color palette and rework all site colors (both light mode and dark mode) to
use the new palette.
This ensures that colors are used consistently, from a carefully designed color palette,
instead of being chosen at random.
Before, colors in light mode were chosen on an ad-hoc basis, which resulted in a lot of
random colors and inconsistent design.
The new palette has 7 hues: red, orange, yellow, green, blue, azure (a lighter blue), and
purple. There's also a greyscale. Each hue has 10 shades of brightness, which (including
grey) gives us 80 total colors.
Colors are named like this:
var(--red-0); /* very light red */
var(--red-2); /* light red */
var(--red-5); /* medium red */
var(--red-7); /* dark red */
var(--red-9); /* very dark red */
var(--green-7); /* dark green */
var(--blue-5); /* medium blue */
var(--purple-3); /* light purple */
/* etc */
The color palette is designed to meet the following criteria:
* To have close equivalents to the main colors used in the old color scheme,
especially tag colors, so that changes to major colors are minimized.
* To produce a set of colors that can be used as as main text colors, as background
colors, and as accent colors, both in light mode and dark mode.
* To ensure that colors at the same brightness level have the same perceived brightness.
Green-4, blue-4, red-4, purple-4, etc should all have the same brightness and contrast
ratios. This way colors look balanced. This is actually a difficult problem, because human
color perception is non-linear, so you can't just scale brightness values linearly.
There's a color palette test page at https://danbooru.donmai/static/colors
Notable changes to colors in light mode:
* Username colors are the same as tag colors.
* Copyright tags are a deeper purple.
* Builders are a deeper purple (fixes #4626).
* Moderators are green.
* Gold users are orange.
* Parent borders are a darker green.
* Child borders are a darker orange.
* Unsaved notes have a thicker red border.
* Selected notes have a thicker blue (not green) border.
71 lines
977 B
SCSS
71 lines
977 B
SCSS
div#page {
|
|
overflow: visible;
|
|
margin: 0 20px;
|
|
padding: 0 10px;
|
|
|
|
aside#sidebar > section {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
section#content {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
footer#page-footer {
|
|
width: 100%;
|
|
margin-top: 1em;
|
|
text-align: center;
|
|
padding: 1em 0 1em;
|
|
border-top: 1px solid var(--footer-border-color);
|
|
|
|
.social-icon img {
|
|
vertical-align: bottom;
|
|
margin: 0 0.1em;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.sidebar-container {
|
|
display: flex;
|
|
|
|
#sidebar {
|
|
flex: 0;
|
|
min-width: 20em;
|
|
}
|
|
|
|
#content {
|
|
flex: 1;
|
|
padding-left: 1em;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 660px) {
|
|
flex-direction: column;
|
|
|
|
#content {
|
|
order: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
#sidebar {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* A container for the main <h1> tag, with optional right-aligned action buttons */
|
|
div.page-heading {
|
|
display: flex;
|
|
margin-bottom: 1em;
|
|
|
|
h1 {
|
|
flex-grow: 1;
|
|
line-height: 1em;
|
|
}
|
|
|
|
a {
|
|
align-self: center;
|
|
}
|
|
}
|