From fb798279cf6ac5abf91b7b5404d3bf881ea5d088 Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 11:53:53 +0200 Subject: [PATCH 01/11] Unify normal and hover styles for the expandable sidebar items --- docs/ensnode.io/src/styles/starlight.css | 40 ++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 584e8e0c6..e9b36f4ac 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -308,13 +308,42 @@ a[rel="prev"]:hover { background-color 0.2s ease-in-out; } -/* Only apply hover effects to non-selected items */ -#starlight__sidebar a:not([aria-current="page"]):hover { +/* Only apply hover effects to: +* * non-selected items +* * not open expandable items (counterpart of non-selected for normal items) +*/ +#starlight__sidebar a:not([aria-current="page"]):hover, +#starlight__sidebar details:not([open]):hover { background-color: rgba(128, 128, 128, 0.1); transform: translateX(2px); border-radius: 6px; } +/** Additional styling required for the + * expandable items in the sidebar + */ +#starlight__sidebar details:not([open]) { + transition: all 0.2s ease-in-out; + color: var(--sl-color-gray-2); + &:hover, + span:hover { + color: var(--sl-color-white); + } +} + +/** Add accent color to the expanded item in the sidebar + * (like we add accent background to the selected item) + */ +#starlight__sidebar details:is([open]) > summary { + > .group-label span:not(.sl-badge) { + color: var(--sl-color-accent); + } + + > svg { + fill: var(--sl-color-accent); + } +} + a.starlight-sidebar-topics-current { background-color: rgb(0, 128, 188) !important; color: white !important; @@ -332,13 +361,18 @@ a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon { box-shadow 0.2s ease-in-out; } -/* Make sure that all non-top-level sidebar items are not enlarged and non-bold */ +/* Make sure that all non-top-level sidebar items are: + * * not enlarged + * * not bolded + * * the same color as the rest of the sidebar text + */ ul.top-level details details > summary .group-label span { @media (min-width: 50rem) { font-size: var(--sl-text-sm); } font-weight: normal; + color: var(--sl-color-gray-2); } /* Make sure that social icons in the sidebar do not move on hover */ From 7c45898b8d3ddc407d24aaefe7e8c91f67000c35 Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 12:21:32 +0200 Subject: [PATCH 02/11] Refine 'Back to (enssdk/enskit) overview' links --- .../docs/integrate/integration-options/enskit/example.mdx | 6 +++++- .../docs/integrate/integration-options/enssdk/example.mdx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx index 3ff146694..025d39653 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx +++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx @@ -7,6 +7,7 @@ sidebar: order: 2 --- +import { Icon } from "@astrojs/starlight/components"; import EnskitExampleInteractivePlayground from "@components/organisms/EnskitExampleInteractivePlayground"; import HostedInstanceSdkVersionWarning from "@components/molecules/HostedInstanceSdkVersionWarning.astro"; @@ -26,4 +27,7 @@ StackBlitz is having problems with embedded WebContainer projects as of **May 19 -[Back to enskit overview](/docs/integrate/integration-options/enskit) + + +

Back to enskit overview

+ diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx index 3f9940c0f..fa6b37c1d 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx +++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx @@ -7,6 +7,7 @@ sidebar: order: 2 --- +import { Icon } from "@astrojs/starlight/components"; import EnssdkExampleInteractivePlayground from "@components/organisms/EnssdkExampleInteractivePlayground"; import HostedInstanceSdkVersionWarning from "@components/molecules/HostedInstanceSdkVersionWarning.astro"; @@ -26,4 +27,7 @@ StackBlitz is having problems with embedded WebContainer projects as of **May 19 -[Back to enssdk overview](/docs/integrate/integration-options/enssdk) + + +

Back to enssdk overview

+ From 50060b5e00c2e5375cd9669c13e17c379fee26e6 Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 14:08:46 +0200 Subject: [PATCH 03/11] Improve docked sidebar's discoverability --- docs/ensnode.io/src/styles/starlight.css | 35 ++++++++++++------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index e9b36f4ac..1d7a77124 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -82,7 +82,7 @@ /* Docked sidebar: narrow peek strip on desktop; expands on hover or keyboard focus within nav */ @media (min-width: 50rem) { .page[data-sidebar-docked] { - --sl-sidebar-docked-peek: 1rem; + --sl-sidebar-docked-peek: 4rem; /* Match Starlight splash / no-sidebar content width (default with sidebar is 45rem). */ --sl-content-width: 67.5rem; } @@ -94,7 +94,6 @@ .page[data-sidebar-docked] nav.sidebar { position: fixed; inset-block: var(--sl-nav-height) 0; - inset-inline-start: 0; z-index: var(--sl-z-index-menu); width: var(--sl-sidebar-docked-peek); overflow: hidden; @@ -116,24 +115,24 @@ border-inline-end: none; } - .page[data-sidebar-docked] nav.sidebar::after { - content: "›"; - position: absolute; - inset-block: 0; - inset-inline-end: 0; - width: var(--sl-sidebar-docked-peek); - display: flex; - align-items: center; - justify-content: center; - color: var(--sl-color-gray-3); - font-size: 1.125rem; - line-height: 1; - pointer-events: none; + /* Docked + collapsed: show only the top-level topic icons */ + .page[data-sidebar-docked] nav.sidebar:not(:hover):not(:focus-within) + .sidebar-content + > :not(.starlight-sidebar-topics) { + display: none; + } + + .page[data-sidebar-docked] + nav.sidebar:not(:hover):not(:focus-within) + .starlight-sidebar-topics-icon + + div { + display: none; } - .page[data-sidebar-docked] nav.sidebar:hover::after, - .page[data-sidebar-docked] nav.sidebar:focus-within::after { - opacity: 0; + /* Docked + collapsed: Highlight only the icon of the current topic */ + .page[data-sidebar-docked] nav.sidebar:not(:hover):not(:focus-within) + a.starlight-sidebar-topics-current { + background-color: transparent !important; } } From 46c47820d7cf6ece2875df33d495c83f5e89af1e Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 14:18:54 +0200 Subject: [PATCH 04/11] Strenthen the hover effect on --- docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro b/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro index 101c9451f..2ba0ab67c 100644 --- a/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro +++ b/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro @@ -10,7 +10,7 @@ interface ENSNodeServiceCardProps { const { title, description, href } = Astro.props as ENSNodeServiceCardProps; --- - +
@@ -18,5 +18,5 @@ const { title, description, href } = Astro.props as ENSNodeServiceCardProps;

{description}

- + From c73c8a21ae4ded738be96ab8509a6dedb59a5e7e Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 15:38:30 +0200 Subject: [PATCH 05/11] Apply ai assistant's suggestions, pt.1 --- 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 1d7a77124..9091b9b39 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -334,11 +334,11 @@ a[rel="prev"]:hover { * (like we add accent background to the selected item) */ #starlight__sidebar details:is([open]) > summary { - > .group-label span:not(.sl-badge) { + & > .group-label span:not(.sl-badge) { color: var(--sl-color-accent); } - > svg { + & > svg { fill: var(--sl-color-accent); } } From 4da589d48aa48243cc3b4f30514958a5f47c4c96 Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 15:59:19 +0200 Subject: [PATCH 06/11] Apply ai assistant's suggestions, pt.2 --- docs/ensnode.io/src/styles/starlight.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 9091b9b39..70539325d 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -324,8 +324,7 @@ a[rel="prev"]:hover { #starlight__sidebar details:not([open]) { transition: all 0.2s ease-in-out; color: var(--sl-color-gray-2); - &:hover, - span:hover { + &:hover { color: var(--sl-color-white); } } @@ -372,6 +371,10 @@ ul.top-level details details > summary .group-label span { font-weight: normal; color: var(--sl-color-gray-2); + + &:hover { + color: var(--sl-color-white); + } } /* Make sure that social icons in the sidebar do not move on hover */ From bf9bdd54929311bb9d525533e95861af15d6f0f4 Mon Sep 17 00:00:00 2001 From: y3drk Date: Thu, 21 May 2026 16:06:37 +0200 Subject: [PATCH 07/11] Final hover state fixes --- docs/ensnode.io/src/styles/starlight.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 70539325d..7e3dc6096 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -324,7 +324,8 @@ a[rel="prev"]:hover { #starlight__sidebar details:not([open]) { transition: all 0.2s ease-in-out; color: var(--sl-color-gray-2); - &:hover { + &:hover, + &:hover span { color: var(--sl-color-white); } } @@ -371,10 +372,6 @@ ul.top-level details details > summary .group-label span { font-weight: normal; color: var(--sl-color-gray-2); - - &:hover { - color: var(--sl-color-white); - } } /* Make sure that social icons in the sidebar do not move on hover */ From 934693c9cd637bbdb8551f04e00beb405a48e05d Mon Sep 17 00:00:00 2001 From: y3drk Date: Fri, 22 May 2026 08:53:22 +0200 Subject: [PATCH 08/11] Remove color accenting of the expanded navbar items --- docs/ensnode.io/src/styles/starlight.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 7e3dc6096..e54b25e5b 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -330,19 +330,6 @@ a[rel="prev"]:hover { } } -/** Add accent color to the expanded item in the sidebar - * (like we add accent background to the selected item) - */ -#starlight__sidebar details:is([open]) > summary { - & > .group-label span:not(.sl-badge) { - color: var(--sl-color-accent); - } - - & > svg { - fill: var(--sl-color-accent); - } -} - a.starlight-sidebar-topics-current { background-color: rgb(0, 128, 188) !important; color: white !important; From 4f3d3df50cbb8a5c95cf9c80cbdb59b8606f7b20 Mon Sep 17 00:00:00 2001 From: y3drk Date: Fri, 22 May 2026 15:19:51 +0200 Subject: [PATCH 09/11] Unify hover states for expandable sidebar items --- docs/ensnode.io/src/styles/starlight.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index e54b25e5b..cea805f49 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -309,10 +309,11 @@ a[rel="prev"]:hover { /* Only apply hover effects to: * * non-selected items -* * not open expandable items (counterpart of non-selected for normal items) +* * not expandable items (in all states) */ #starlight__sidebar a:not([aria-current="page"]):hover, -#starlight__sidebar details:not([open]):hover { +#starlight__sidebar details details > summary:hover, +#starlight__sidebar details > summary:hover { background-color: rgba(128, 128, 128, 0.1); transform: translateX(2px); border-radius: 6px; @@ -321,7 +322,7 @@ a[rel="prev"]:hover { /** Additional styling required for the * expandable items in the sidebar */ -#starlight__sidebar details:not([open]) { +#starlight__sidebar details details > summary:hover { transition: all 0.2s ease-in-out; color: var(--sl-color-gray-2); &:hover, @@ -330,6 +331,14 @@ a[rel="prev"]:hover { } } +#starlight__sidebar details > summary:hover { + transition: all 0.2s ease-in-out; + + &:hover { + color: var(--sl-color-white); + } +} + a.starlight-sidebar-topics-current { background-color: rgb(0, 128, 188) !important; color: white !important; From 85d9aa1bb7ce92e01ac4277beaf2e7ee41ecfb6c Mon Sep 17 00:00:00 2001 From: y3drk Date: Fri, 22 May 2026 15:37:10 +0200 Subject: [PATCH 10/11] Apply ai assistant's suggestions, pt.3 --- docs/ensnode.io/src/styles/starlight.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index cea805f49..40fc2c1f7 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -325,18 +325,16 @@ a[rel="prev"]:hover { #starlight__sidebar details details > summary:hover { transition: all 0.2s ease-in-out; color: var(--sl-color-gray-2); - &:hover, - &:hover span { + color: var(--sl-color-white); + + & span { color: var(--sl-color-white); } } #starlight__sidebar details > summary:hover { transition: all 0.2s ease-in-out; - - &:hover { - color: var(--sl-color-white); - } + color: var(--sl-color-white); } a.starlight-sidebar-topics-current { From e66279ce003999eea47f438ca377854b89a179fb Mon Sep 17 00:00:00 2001 From: y3drk Date: Fri, 22 May 2026 15:49:01 +0200 Subject: [PATCH 11/11] Apply ai assistant's suggestions, pt.4 --> final hover state styling fixes --- docs/ensnode.io/src/styles/starlight.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 40fc2c1f7..dd3f4aef8 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -309,7 +309,7 @@ a[rel="prev"]:hover { /* Only apply hover effects to: * * non-selected items -* * not expandable items (in all states) +* * expandable items (in all states), including nested ones */ #starlight__sidebar a:not([aria-current="page"]):hover, #starlight__sidebar details details > summary:hover, @@ -323,18 +323,18 @@ a[rel="prev"]:hover { * expandable items in the sidebar */ #starlight__sidebar details details > summary:hover { - transition: all 0.2s ease-in-out; - color: var(--sl-color-gray-2); - color: var(--sl-color-white); - & span { color: var(--sl-color-white); } } -#starlight__sidebar details > summary:hover { +#starlight__sidebar details details > summary, +#starlight__sidebar details > summary { transition: all 0.2s ease-in-out; - color: var(--sl-color-white); + + &:hover { + color: var(--sl-color-white); + } } a.starlight-sidebar-topics-current {