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

Compare commits

base: c3cat:576a6c4c56e4594137da2f20c6ffdf20fafad17b
Branches Tags
c3cat:main
c3cat:ci-test-staging-pr
...
compare: c3cat:42a782cef82246b534b587e5d3195a8a2b9c247e
Branches Tags
c3cat:main
c3cat:ci-test-staging-pr

2 commits
576a6c4c56 ... 42a782cef8

Author SHA1 Message Date
June
42a782cef8
 		Make and use transparent and transp. dark theme versions of c3cat img 2024-05-24 00:04:35 +02:00
June
1eb181567c
 		Introduce a dark theme and color the links with new accent colors 
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.
 2024-05-23 23:27:16 +02:00
4 changed files with 32 additions and 1 deletions
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 { body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
text-align: left; 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 { .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 { .title {
text-align: center; text-align: center;
} }

BIN
assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
assets/img/c3cat-c3sign-cccamp23-transparent.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 165 KiB

5
index.html
View file

@ -10,7 +10,10 @@
<body class="container"> <body class="container">
<main> <main>
<h1 class="title">c3cat &ndash; Cat Ears Operation Center</h1> <h1 class="title">c3cat &ndash; Cat Ears Operation Center</h1>
<img src="assets/img/c3cat-c3sign-cccamp23.jpg" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"> <picture>
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
</picture>
<h2>Resources</h2> <h2>Resources</h2>
<p class="bigger">The "original" cat ear model we used was borrowed from <a href="https://www.printables.com/de/model/35076-cat-ears">Printables</a>. <p class="bigger">The "original" cat ear model we used was borrowed from <a href="https://www.printables.com/de/model/35076-cat-ears">Printables</a>.