Style anchors with underline + leaf color for visibility
Body-copy mailto links ("Chris @ FCI") and the chrome nav link
were rendering as plain text, hard to spot. Added an @layer base
rule that gives every `a[href]` a 1px underline at 2px offset and
the FCI Seed Grant green, with a subtle hover thicken. Tailwind
utilities still win on a per-element basis (the nav link keeps its
`text-ink-soft` color, the brand-image wrapper opts out via
`no-underline`).
This commit is contained in:
@@ -112,6 +112,24 @@ input, select, textarea, button {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Anchor defaults. Body links (in copy and chrome) read as interactive
|
||||||
|
* affordances: FCI leaf color + a 1px underline with a small offset.
|
||||||
|
* Lives in @layer base so Tailwind utility classes (text-*, no-underline)
|
||||||
|
* still win on elements that opt out individually. */
|
||||||
|
@layer base {
|
||||||
|
a[href] {
|
||||||
|
color: var(--color-leaf-700);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
|
||||||
|
}
|
||||||
|
a[href]:hover {
|
||||||
|
color: var(--color-leaf-800);
|
||||||
|
text-decoration-thickness: 1.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Date input chevron styled to match */
|
/* Date input chevron styled to match */
|
||||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export function SiteHeader() {
|
|||||||
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 sm:px-6">
|
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 sm:px-6">
|
||||||
<Link
|
<Link
|
||||||
href="https://fci.coop"
|
href="https://fci.coop"
|
||||||
className="group flex items-center gap-4 focus:outline-none"
|
className="group flex items-center gap-4 text-ink no-underline focus:outline-none"
|
||||||
aria-label="Food Co-op Initiative — fci.coop"
|
aria-label="Food Co-op Initiative — fci.coop"
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
|
|||||||
Reference in New Issue
Block a user