lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve tailwind rgb slash opacity syntax issue and enforce solid vermillion background with pure white text for active nav links

Browse Source
This commit is contained in:
Godopu
2026-07-30 22:44:06 +09:00
parent 40b252b10b
commit 7889398e3d
2 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
refer_landing_page/components/Header.tsx
+25 -7
View File
@@ -64,20 +64,28 @@ export default function Header() {
key={item.href}
href={item.href}
aria-current={active ? "page" : undefined}
style={
active
? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
: undefined
}
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
? "bg-vermillion text-white shadow-sm"
? "shadow-sm font-bold"
: "text-ink hover:text-vermillion hover:bg-paper/60"
}`}
>
<span
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-[0.62rem] ${
active ? "text-white/90" : "text-ink-mute"
active ? "opacity-90 font-bold" : "text-ink-mute"
}`}
>
{item.no}
</span>
<span className={active ? "text-white" : ""}>{item.en}</span>
<span style={active ? { color: "#ffffff" } : undefined}>
{item.en}
</span>
</Link>
);
})}
@@ -124,27 +132,37 @@ export default function Header() {
href={item.href}
onClick={() => setOpen(false)}
aria-current={active ? "page" : undefined}
style={
active
? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
: undefined
}
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
active
? "bg-vermillion text-white font-bold shadow-sm"
? "font-bold shadow-sm"
: "text-ink hover:bg-paper/60"
}`}
>
<span className="flex items-baseline gap-3">
<span
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-xs ${
active ? "text-white/90" : "text-ink-mute"
active ? "opacity-90 font-bold" : "text-ink-mute"
}`}
>
{item.no}
</span>
<span className={`headline-ko text-lg ${active ? "text-white" : ""}`}>
<span
style={active ? { color: "#ffffff" } : undefined}
className="headline-ko text-lg font-bold"
>
{item.ko}
</span>
</span>
<span
style={active ? { color: "#ffffff" } : undefined}
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
active ? "text-white/90" : "text-ink-mute"
active ? "opacity-90 font-bold" : "text-ink-mute"
}`}
>
{item.en}