c3cat/c3cat-landingpage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

Introduce a dark theme and color the links with new accent colors

Browse source 
The accent colors are based on the c3cat logos pink, but modified such
that they work nicely for links and for the light/dark theme.

Also make the light theme be lighter on the eyes.
This commit is contained in:
June 2024-05-23 23:23:16 +02:00
parent 576a6c4c56
commit 1eb181567c
Signed by: june
SSH key fingerprint: SHA256:o9EAq4Y9N9K0pBQeBTqhSDrND5E7oB+60ZNx0U1yPe0
1 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/css/style.css
View file

@ -1,7 +1,27 @@
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
/* A modified version of accent-color-light, which works nicely as a link color
* and with the dark theme */
--accent-color-dark: #dc49b0;
}
body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
text-align: left;
/* Use dark grey instead of black to be lighter on the eyes. But also a grey
* which still works with the link color nicely. */
background-color: #ffffff;
color: #2B2B2B;
@media (prefers-color-scheme: dark) {
/* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
/* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
background-color: #1b1b1b;
color: #ebebeb;
}
}
.container {
@ -19,6 +39,14 @@ img {
}
a:link, a:visited {
color: var(--accent-color-light);
@media (prefers-color-scheme: dark) {
color: var(--accent-color-dark);
}
}
.title {
text-align: center;
}