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} key={item.href}
href={item.href} href={item.href}
aria-current={active ? "page" : undefined} 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 ${ 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" ? "shadow-sm font-bold"
: "text-ink hover:text-vermillion hover:bg-paper/60" : "text-ink hover:text-vermillion hover:bg-paper/60"
}`} }`}
> >
<span <span
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-[0.62rem] ${ className={`font-display text-[0.62rem] ${
active ? "text-white/90" : "text-ink-mute" active ? "opacity-90 font-bold" : "text-ink-mute"
}`} }`}
> >
{item.no} {item.no}
</span> </span>
<span className={active ? "text-white" : ""}>{item.en}</span> <span style={active ? { color: "#ffffff" } : undefined}>
{item.en}
</span>
</Link> </Link>
); );
})} })}
@@ -124,27 +132,37 @@ export default function Header() {
href={item.href} href={item.href}
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
aria-current={active ? "page" : undefined} 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 ${ 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 shadow-sm" ? "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
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-xs ${ className={`font-display text-xs ${
active ? "text-white/90" : "text-ink-mute" active ? "opacity-90 font-bold" : "text-ink-mute"
}`} }`}
> >
{item.no} {item.no}
</span> </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} {item.ko}
</span> </span>
</span> </span>
<span <span
style={active ? { color: "#ffffff" } : undefined}
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${ 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} {item.en}
refer_landing_page/tailwind.config.ts
+14 -14
View File
@@ -33,28 +33,28 @@ const config: Config = {
}, },
colors: { colors: {
ink: { ink: {
DEFAULT: "rgb(var(--ink-rgb) / <alpha-value>)", DEFAULT: "var(--ink)",
soft: "rgb(var(--ink-soft-rgb) / <alpha-value>)", soft: "var(--ink-soft)",
mute: "rgb(var(--ink-mute-rgb) / <alpha-value>)", mute: "var(--ink-mute)",
}, },
ivory: "rgb(var(--ivory-rgb) / <alpha-value>)", ivory: "var(--ivory)",
paper: "rgb(var(--paper-rgb) / <alpha-value>)", paper: "var(--paper)",
line: "rgb(var(--line-rgb) / <alpha-value>)", line: "var(--line)",
vermillion: { vermillion: {
DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)", DEFAULT: "var(--vermillion)",
dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)", dark: "var(--vermillion-dark)",
}, },
cobalt: { cobalt: {
DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)", DEFAULT: "var(--cobalt)",
dark: "rgb(var(--cobalt-dark-rgb) / <alpha-value>)", dark: "var(--cobalt-dark)",
}, },
// Back-compat aliases so any stray legacy class still resolves. // Back-compat aliases so any stray legacy class still resolves.
brand: { brand: {
DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)", DEFAULT: "var(--vermillion)",
dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)", dark: "var(--vermillion-dark)",
light: "rgb(var(--cobalt-rgb) / <alpha-value>)", light: "var(--cobalt)",
}, },
accent: { DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)" }, accent: { DEFAULT: "var(--cobalt)" },
}, },
fontFamily: { fontFamily: {
// English display serif — magazine cover scale. // English display serif — magazine cover scale.