fix: emoji font on recipe hero link, orange OR toggle for better contrast
All checks were successful
CI / update (push) Successful in 8s

This commit is contained in:
2026-02-17 16:02:17 +01:00
parent 16d891fc2f
commit eeb3030186
2 changed files with 6 additions and 3 deletions

View File

@@ -86,7 +86,7 @@
} }
.toggle-switch.or-mode { .toggle-switch.or-mode {
background: var(--nord13); background: var(--nord12);
} }
.toggle-knob { .toggle-knob {
@@ -121,7 +121,7 @@
} }
.toggle-switch.or-mode + .mode-label.or { .toggle-switch.or-mode + .mode-label.or {
color: var(--nord13); color: var(--nord12);
} }
</style> </style>

View File

@@ -222,6 +222,9 @@
.hero-featured .recipe-name { .hero-featured .recipe-name {
font-weight: 600; font-weight: 600;
} }
.hero-featured .recipe-icon {
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
}
.hero-featured .arrow-icon { .hero-featured .arrow-icon {
width: 0.7em; width: 0.7em;
height: 0.7em; height: 0.7em;
@@ -355,7 +358,7 @@
<h1>{labels.title}</h1> <h1>{labels.title}</h1>
<p class="subheading">{labels.subheading}</p> <p class="subheading">{labels.subheading}</p>
<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured"> <a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
<span class="recipe-name">{heroRecipe.icon} {@html heroRecipe.name}</span> <span class="recipe-name"><span class="recipe-icon">{heroRecipe.icon}</span> {@html heroRecipe.name}</span>
<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg> <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
</a> </a>