feat(css): improve contrast with new translucent color

This commit is contained in:
Julien Oculi 2024-07-11 14:07:44 +02:00
parent 8c5e03f885
commit 99f100540e
3 changed files with 6 additions and 5 deletions

View file

@ -20,7 +20,7 @@
margin: 0; margin: 0;
padding: var(--_gap) var(--_gap-half); padding: var(--_gap) var(--_gap-half);
backdrop-filter: blur(var(--_blur)); backdrop-filter: blur(var(--_blur));
background-color: var(--_translucent); background-color: var(--_translucent-bg);
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
} }
@ -65,7 +65,7 @@
justify-content: start; justify-content: start;
padding: var(--_gap-half); padding: var(--_gap-half);
backdrop-filter: blur(var(--_blur)); backdrop-filter: blur(var(--_blur));
background-color: var(--_translucent); background-color: var(--_translucent-bg);
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
& > a::before { & > a::before {
@ -80,7 +80,7 @@
justify-content: start; justify-content: start;
padding: var(--_gap-half); padding: var(--_gap-half);
backdrop-filter: blur(var(--_blur)); backdrop-filter: blur(var(--_blur));
background-color: var(--_translucent); background-color: var(--_translucent-bg);
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
& > span::before { & > span::before {
@ -149,7 +149,7 @@
& > * { & > * {
border: none; border: none;
padding: var(--_gap-half); padding: var(--_gap-half);
background-color: var(--_translucent); background-color: var(--_translucent-bg);
} }
} }

View file

@ -29,7 +29,7 @@
} }
.components__member_card__content { .components__member_card__content {
background-color: var(--_translucent); background-color: var(--_translucent-bg);
backdrop-filter: blur(var(--_blur)); backdrop-filter: blur(var(--_blur));
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -47,6 +47,7 @@
/* color */ /* color */
--_accent-color: var(--lime-6); --_accent-color: var(--lime-6);
--_translucent: hsl(from var(--_font-color) h s l / 0.1); --_translucent: hsl(from var(--_font-color) h s l / 0.1);
--_translucent-bg: hsl(from var(--_background-color) h s l / .6);
/* other */ /* other */
--_background-color: var(--sand-0); --_background-color: var(--sand-0);