diff --git a/assets/css/style.css b/assets/css/style.css index 3f3e5c5..1a91953 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; } diff --git a/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp b/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp new file mode 100644 index 0000000..b3596f0 Binary files /dev/null and b/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp differ diff --git a/assets/img/c3cat-c3sign-cccamp23-transparent.webp b/assets/img/c3cat-c3sign-cccamp23-transparent.webp new file mode 100644 index 0000000..e202ae4 Binary files /dev/null and b/assets/img/c3cat-c3sign-cccamp23-transparent.webp differ diff --git a/index.html b/index.html index e86c081..69686ac 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,10 @@

c3cat – Cat Ears Operation Center

- C3CAT with a cat ear headband around the 'A' + + + C3CAT with a cat ear headband around the 'A' +

Resources

The "original" cat ear model we used was borrowed from Printables.