Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve text contrast in filter labels and update login button text
All checks were successful
CI / update (push) Successful in 1m12s
Details

Browse Source 
- Change login button text from "Log In" to "Login"
- Update filter labels (Kategorie, Icon, Tags, Saison, Favoriten) to use darker color (nord2) in light mode for better readability
- Improve placeholder text contrast in filter inputs by using lighter shade (nord4)
- Maintain light color scheme (nord6) for filter labels in dark mode
This commit is contained in:
Alexander Bocken
2026-01-05 17:52:59 +01:00
parent 4ffc0940ef
commit 6faa06e0e1
6 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/CategoryFilter.svelte
View File

@@ -83,12 +83,18 @@
.filter-label {
font-size: 0.9rem;
color: var(--nord6);
color: var(--nord2);
font-weight: 600;
margin-bottom: 0.25rem;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.filter-label {
color: var(--nord6);
}
}
@media (max-width: 968px) {
.filter-label {
font-size: 0.85rem;
@@ -122,7 +128,7 @@
}
input::placeholder {
color: var(--nord3);
color: var(--nord4);
}
input:hover {

8
src/lib/components/FavoritesFilter.svelte
View File

@@ -44,12 +44,18 @@
.filter-label {
font-size: 0.9rem;
color: var(--nord6);
color: var(--nord2);
font-weight: 600;
margin-bottom: 0.25rem;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.filter-label {
color: var(--nord6);
}
}
@media (max-width: 968px) {
.filter-label {
font-size: 0.85rem;

10
src/lib/components/IconFilter.svelte
View File

@@ -74,12 +74,18 @@
.filter-label {
font-size: 0.9rem;
color: var(--nord6);
color: var(--nord2);
font-weight: 600;
margin-bottom: 0.25rem;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.filter-label {
color: var(--nord6);
}
}
@media (max-width: 968px) {
.filter-label {
font-size: 0.85rem;
@@ -113,7 +119,7 @@
}
input::placeholder {
color: var(--nord3);
color: var(--nord4);
font-family: sans-serif;
}

10
src/lib/components/SeasonFilter.svelte
View File

@@ -95,12 +95,18 @@
.filter-label {
font-size: 0.9rem;
color: var(--nord6);
color: var(--nord2);
font-weight: 600;
margin-bottom: 0.25rem;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.filter-label {
color: var(--nord6);
}
}
@media (max-width: 968px) {
.filter-label {
font-size: 0.85rem;
@@ -134,7 +140,7 @@
}
input::placeholder {
color: var(--nord3);
color: var(--nord4);
}
input:hover {

10
src/lib/components/TagFilter.svelte
View File

@@ -85,12 +85,18 @@
.filter-label {
font-size: 0.9rem;
color: var(--nord6);
color: var(--nord2);
font-weight: 600;
margin-bottom: 0.25rem;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.filter-label {
color: var(--nord6);
}
}
@media (max-width: 968px) {
.filter-label {
font-size: 0.85rem;
@@ -131,7 +137,7 @@
}
input::placeholder {
color: var(--nord3);
color: var(--nord4);
}
input:hover {

2
src/lib/components/UserHeader.svelte
View File

@@ -147,5 +147,5 @@ h2 + p{
</div>
</button>
{:else}
<a class=entry href=/login>Log In</a>
<a class=entry href=/login>Login</a>
{/if}