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}
refer_landing_page/tailwind.config.ts
+14 -14
View File
@@ -33,28 +33,28 @@ const config: Config = {
},
colors: {
ink: {
DEFAULT: "rgb(var(--ink-rgb) / <alpha-value>)",
soft: "rgb(var(--ink-soft-rgb) / <alpha-value>)",
mute: "rgb(var(--ink-mute-rgb) / <alpha-value>)",
DEFAULT: "var(--ink)",
soft: "var(--ink-soft)",
mute: "var(--ink-mute)",
},
ivory: "rgb(var(--ivory-rgb) / <alpha-value>)",
paper: "rgb(var(--paper-rgb) / <alpha-value>)",
line: "rgb(var(--line-rgb) / <alpha-value>)",
ivory: "var(--ivory)",
paper: "var(--paper)",
line: "var(--line)",
vermillion: {
DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
DEFAULT: "var(--vermillion)",
dark: "var(--vermillion-dark)",
},
cobalt: {
DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)",
dark: "rgb(var(--cobalt-dark-rgb) / <alpha-value>)",
DEFAULT: "var(--cobalt)",
dark: "var(--cobalt-dark)",
},
// Back-compat aliases so any stray legacy class still resolves.
brand: {
DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
light: "rgb(var(--cobalt-rgb) / <alpha-value>)",
DEFAULT: "var(--vermillion)",
dark: "var(--vermillion-dark)",
light: "var(--cobalt)",
},
accent: { DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)" },
accent: { DEFAULT: "var(--cobalt)" },
},
fontFamily: {
// English display serif — magazine cover scale.