Introduce a Dark Theme #4
|
@ -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
BIN
assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 166 KiB |
BIN
assets/img/c3cat-c3sign-cccamp23-transparent.webp
Normal file
BIN
assets/img/c3cat-c3sign-cccamp23-transparent.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 165 KiB |
|
@ -10,7 +10,10 @@
|
||||||
<body class="container">
|
<body class="container">
|
||||||
<main>
|
<main>
|
||||||
<h1 class="title">c3cat – Cat Ears Operation Center</h1>
|
<h1 class="title">c3cat – 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>.
|
||||||
|
|
Loading…
Reference in a new issue