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

new rgb guide & small homepage restructure #9

Open
lilly wants to merge 9 commits from new-rgb-guide into main
pull from: new-rgb-guide
merge into: c3cat:main
Conversation 2 Commits 9 Files changed 77 +58 -50
1 changed files with 58 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 0c8b0737c1 - Show all commits

split css style into layers for explicit per-site styling

Prev Next
lilly 2025-12-12 12:25:48 +01:00
commit 0c8b0737c1
Signed by: lilly
SSH key fingerprint: SHA256:y9T5GFw2A20WVklhetIxG1+kcg/Ce0shnQmbu1LQ37g

26
assets/css/style.css
View file

@ -1,3 +1,6 @@
@layer base, per-site;
@layer base {
:root { :root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */ /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B; --accent-color-light: #DC049B;
@ -13,14 +16,18 @@ body {
/* Use dark grey instead of black to be lighter on the eyes. But also a grey /* Use dark grey instead of black to be lighter on the eyes. But also a grey
* which still works with the link color nicely. */ * which still works with the link color nicely. */
background-color: #ffffff; --bg-color: #ffffff;
color: #2B2B2B; --fg-color: #2b2b2b;
--accent-color: var(--accent-color-light);
background-color: var(--bg-color);
color: var(--fg-color);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
/* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */ /* 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 */ /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
background-color: #1b1b1b; --bg-color: #1b1b1b;
color: #ebebeb; --fg-color: #ebebeb;
--accent-color: var(--accent-color-dark);
} }
} }
@ -38,14 +45,13 @@ img {
width: 100%; width: 100%;
} }
a:link, a:visited { a:link, a:visited {
color: var(--accent-color-light); color: var(--accent-color);
@media (prefers-color-scheme: dark) {
color: var(--accent-color-dark);
}
} }
u {
text-decoration-color: var(--accent-color);
}
.title { .title {
text-align: center; text-align: center;
@ -60,3 +66,5 @@ a:link, a:visited {
p.bigger { p.bigger {
font-size: 1.2rem; font-size: 1.2rem;
} }
}