lilly
125c859f16
This adds something like a color inversion when hovering <a> tags which gives the user feedback and looks cool
77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
@layer base, per-site;
|
|
|
|
@layer base {
|
|
: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;
|
|
line-height: 1.4;
|
|
|
|
/* Use dark grey instead of black to be lighter on the eyes. But also a grey
|
|
* which still works with the link color nicely. */
|
|
--bg-color: #ffffff;
|
|
--fg-color: #2b2b2b;
|
|
--accent-color: var(--accent-color-light);
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
|
|
@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 */
|
|
--bg-color: #1b1b1b;
|
|
--fg-color: #ebebeb;
|
|
--accent-color: var(--accent-color-dark);
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: var(--accent-color);
|
|
padding-inline: 0.1ch;
|
|
&:hover:not(:has(img)) {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
u {
|
|
text-decoration-color: var(--accent-color);
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-img {
|
|
max-width: 500px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p.bigger {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
}
|