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

split css style into layers for explicit per-site styling

Browse source
This commit is contained in:
lilly 2025-12-12 12:25:48 +01:00
commit 0c8b0737c1
Signed by: lilly
SSH key fingerprint: SHA256:y9T5GFw2A20WVklhetIxG1+kcg/Ce0shnQmbu1LQ37g
1 changed files with 58 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

108
assets/css/style.css
View file

@ -1,62 +1,70 @@
:root { @layer base, per-site;
/* 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 { @layer base {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; :root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
text-align: left; --accent-color-light: #DC049B;
/* A modified version of accent-color-light, which works nicely as a link color
/* Use dark grey instead of black to be lighter on the eyes. But also a grey * and with the dark theme */
* which still works with the link color nicely. */ --accent-color-dark: #dc49b0;
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 { body {
max-width: 600px; font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
margin: 0 auto;
padding: 0 5px;
}
footer { text-align: left;
margin-top: 4rem;
}
img { /* Use dark grey instead of black to be lighter on the eyes. But also a grey
width: 100%; * 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) {
a:link, a:visited { /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
color: var(--accent-color-light); /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
@media (prefers-color-scheme: dark) { --bg-color: #1b1b1b;
color: var(--accent-color-dark); --fg-color: #ebebeb;
--accent-color: var(--accent-color-dark);
}
} }
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 0 5px;
}
.title { footer {
text-align: center; margin-top: 4rem;
} }
.hero-img { img {
max-width: 500px; width: 100%;
display: block; }
margin: 0 auto;
} a:link, a:visited {
color: var(--accent-color);
}
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;
}
p.bigger {
font-size: 1.2rem;
} }