fix: remove dark:text-ivory to enforce high contrast white text on active vermillion badge in all themes
This commit is contained in:
@@ -64,20 +64,20 @@ export default function Header() {
|
|||||||
key={item.href}
|
key={item.href}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
aria-current={active ? "page" : undefined}
|
aria-current={active ? "page" : undefined}
|
||||||
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
|
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-bold uppercase tracking-[0.18em] transition-all px-3.5 py-1.5 rounded-md ${
|
||||||
active
|
active
|
||||||
? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
|
? "bg-vermillion text-white shadow-sm"
|
||||||
: "text-ink hover:text-vermillion hover:bg-paper/60"
|
: "text-ink hover:text-vermillion hover:bg-paper/60"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={`font-display text-[0.62rem] ${
|
className={`font-display text-[0.62rem] ${
|
||||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
active ? "text-white/90" : "text-ink-mute"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{item.no}
|
{item.no}
|
||||||
</span>
|
</span>
|
||||||
<span>{item.en}</span>
|
<span className={active ? "text-white" : ""}>{item.en}</span>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -126,23 +126,25 @@ export default function Header() {
|
|||||||
aria-current={active ? "page" : undefined}
|
aria-current={active ? "page" : undefined}
|
||||||
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
|
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
|
||||||
active
|
active
|
||||||
? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
|
? "bg-vermillion text-white font-bold shadow-sm"
|
||||||
: "text-ink hover:bg-paper/60"
|
: "text-ink hover:bg-paper/60"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="flex items-baseline gap-3">
|
<span className="flex items-baseline gap-3">
|
||||||
<span
|
<span
|
||||||
className={`font-display text-xs ${
|
className={`font-display text-xs ${
|
||||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
active ? "text-white/90" : "text-ink-mute"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{item.no}
|
{item.no}
|
||||||
</span>
|
</span>
|
||||||
<span className="headline-ko text-lg">{item.ko}</span>
|
<span className={`headline-ko text-lg ${active ? "text-white" : ""}`}>
|
||||||
|
{item.ko}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
|
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
|
||||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
active ? "text-white/90" : "text-ink-mute"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{item.en}
|
{item.en}
|
||||||
|
|||||||
Reference in New Issue
Block a user