From 815f40e0cd4505bb1bc63a6fb1c1cc60c6822ee5 Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Mon, 1 Jun 2026 12:49:51 +0100 Subject: [PATCH 1/3] docs(ensnode.io): unify LinkCard hover styles in colored asides --- docs/ensnode.io/src/styles/starlight.css | 67 +++++++++++++++++++++--- 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index cdd597730..4fc5b3656 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -91,6 +91,27 @@ --pagination-arrow-color: var(--color-text-secondary); --sl-shadow-md: var(--shadow-md); --sl-shadow-sm: var(--shadow-sm); + + --aside-danger-card-bg: color-mix(in srgb, var(--aside-danger-color) 20%, transparent); + --aside-danger-card-bg-hover: color-mix(in srgb, var(--aside-danger-color) 30%, transparent); + --aside-danger-card-border: color-mix(in srgb, var(--aside-danger-color) 50%, transparent); + --aside-danger-card-border-hover: color-mix(in srgb, var(--aside-danger-color) 70%, transparent); + --aside-tip-card-bg: color-mix(in srgb, var(--aside-tip-color) 20%, transparent); + --aside-tip-card-bg-hover: color-mix(in srgb, var(--aside-tip-color) 30%, transparent); + --aside-tip-card-border: color-mix(in srgb, var(--aside-tip-color) 50%, transparent); + --aside-tip-card-border-hover: color-mix(in srgb, var(--aside-tip-color) 70%, transparent); + --aside-caution-card-bg: color-mix(in srgb, var(--aside-caution-color) 20%, transparent); + --aside-caution-card-bg-hover: color-mix(in srgb, var(--aside-caution-color) 30%, transparent); + --aside-caution-card-border: color-mix(in srgb, var(--aside-caution-color) 50%, transparent); + --aside-caution-card-border-hover: color-mix( + in srgb, + var(--aside-caution-color) 70%, + transparent + ); + + --aside-danger-card-title-hover: color-mix(in srgb, var(--aside-danger-color), black 35%); + --aside-tip-card-title-hover: color-mix(in srgb, var(--aside-tip-color), black 35%); + --aside-caution-card-title-hover: color-mix(in srgb, var(--aside-caution-color), black 35%); } /* Docked sidebar: narrow peek strip on desktop; expands on hover or keyboard focus within nav */ @@ -197,10 +218,22 @@ a[rel="prev"]:hover { border-color: var(--sl-color-accent); } +.sl-link-card .icon { + transition: color 0.2s ease-in-out; +} + .sl-link-card:hover .icon { color: var(--sl-color-accent); } +.sl-link-card .title { + transition: color 0.2s ease-in-out; +} + +.sl-link-card:hover .title { + color: var(--sl-color-text-accent); +} + .link-title { color: var(--sl-color-accent); } @@ -223,8 +256,8 @@ a[rel="prev"]:hover { /* Override Starlight's default markdown link hover (which switches to --sl-color-white): keep links their base color on hover so only the underline-offset animates. */ -.sl-markdown-content a:hover:not(:where(.not-content *)), -.sl-markdown-content a:hover:not(:where(.not-content *)) > span { +.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card *)), +.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card *)) > span { color: var(--sl-color-text-accent); } @@ -534,11 +567,17 @@ starlight-tabs ul[role="tablist"] { .starlight-aside--tip { --aside-color: var(--aside-tip-color); + & .sl-link-card { + background-color: var(--aside-tip-card-bg); + border-color: var(--aside-tip-card-border); + } + & .sl-link-card:hover { - border-color: var(--aside-color); + background-color: var(--aside-tip-card-bg-hover); + border-color: var(--aside-tip-card-border-hover); & .title { - color: var(--aside-color); + color: var(--aside-tip-card-title-hover); } & .icon { @@ -550,11 +589,17 @@ starlight-tabs ul[role="tablist"] { .starlight-aside--danger { --aside-color: var(--aside-danger-color); + & .sl-link-card { + background-color: var(--aside-danger-card-bg); + border-color: var(--aside-danger-card-border); + } + & .sl-link-card:hover { - border-color: var(--aside-color); + background-color: var(--aside-danger-card-bg-hover); + border-color: var(--aside-danger-card-border-hover); & .title { - color: var(--aside-color); + color: var(--aside-danger-card-title-hover); } & .icon { @@ -585,10 +630,16 @@ starlight-tabs ul[role="tablist"] { } & .sl-link-card { - border-color: var(--aside-color); + background-color: var(--aside-caution-card-bg); + border-color: var(--aside-caution-card-border); + } + + & .sl-link-card:hover { + background-color: var(--aside-caution-card-bg-hover); + border-color: var(--aside-caution-card-border-hover); & .title { - color: var(--aside-color); + color: var(--aside-caution-card-title-hover); } & .icon { From bd018256ede553e6ea6b9edc15a9fa0d295cae57 Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Mon, 1 Jun 2026 13:08:15 +0100 Subject: [PATCH 2/3] try updated card anchor --- docs/ensnode.io/src/styles/starlight.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 4fc5b3656..eaa6acd0e 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -256,8 +256,8 @@ a[rel="prev"]:hover { /* Override Starlight's default markdown link hover (which switches to --sl-color-white): keep links their base color on hover so only the underline-offset animates. */ -.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card *)), -.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card *)) > span { +.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card, .sl-link-card *)), +.sl-markdown-content a:hover:not(:where(.not-content *, .sl-link-card, .sl-link-card *)) > span { color: var(--sl-color-text-accent); } From 477491540fea072bd3f257e271a676d81d76f72b Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Wed, 3 Jun 2026 08:45:56 +0100 Subject: [PATCH 3/3] unify all variable tokens --- docs/ensnode.io/src/styles/starlight.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index eaa6acd0e..574280987 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -108,10 +108,15 @@ var(--aside-caution-color) 70%, transparent ); + --aside-note-card-bg: color-mix(in srgb, var(--aside-note-color) 20%, transparent); + --aside-note-card-bg-hover: color-mix(in srgb, var(--aside-note-color) 30%, transparent); + --aside-note-card-border: color-mix(in srgb, var(--aside-note-color) 50%, transparent); + --aside-note-card-border-hover: color-mix(in srgb, var(--aside-note-color) 70%, transparent); --aside-danger-card-title-hover: color-mix(in srgb, var(--aside-danger-color), black 35%); --aside-tip-card-title-hover: color-mix(in srgb, var(--aside-tip-color), black 35%); --aside-caution-card-title-hover: color-mix(in srgb, var(--aside-caution-color), black 35%); + --aside-note-card-title-hover: color-mix(in srgb, var(--aside-note-color), black 35%); } /* Docked sidebar: narrow peek strip on desktop; expands on hover or keyboard focus within nav */ @@ -652,10 +657,16 @@ starlight-tabs ul[role="tablist"] { --aside-color: var(--aside-note-color); & .sl-link-card { - border-color: var(--aside-color); + background-color: var(--aside-note-card-bg); + border-color: var(--aside-note-card-border); + } + + & .sl-link-card:hover { + background-color: var(--aside-note-card-bg-hover); + border-color: var(--aside-note-card-border-hover); & .title { - color: var(--aside-color); + color: var(--aside-note-card-title-hover); } & .icon {