From 618f2b1c1b8ad1b5eee70ab941b3a11c7f68f23a Mon Sep 17 00:00:00 2001 From: Yohai Dejorno Date: Mon, 6 Jul 2026 20:14:05 +0300 Subject: [PATCH 1/3] [Docs] Fix inconsistent section highlight on /cloud and /kanvas The glow-swap effect relied on the CSS sibling selector (~), which only works forward, so it silently broke when the highlighted box came first. Made the rule order-independent with :has() and listed the current product first on both pages. Fixes #1138 Signed-off-by: Yohai Dejorno --- assets/scss/_content_project.scss | 6 ++++++ assets/scss/_navbar_project.scss | 8 +++++++- content/en/kanvas/_index.md | 8 ++++---- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/assets/scss/_content_project.scss b/assets/scss/_content_project.scss index a1e2c0f7b94..74cfb75c16d 100644 --- a/assets/scss/_content_project.scss +++ b/assets/scss/_content_project.scss @@ -347,6 +347,12 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em .highlight-box { @extend %ecosystem-box-base; box-shadow: $ecosystem-box-glow; + + /* Yield the glow when a following hidden box is hovered/focused */ + &:has(~ .hidden-highlight-box:hover), + &:has(~ .hidden-highlight-box:focus) { + box-shadow: none; + } } .hidden-highlight-box { diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index 1f6f59d0474..5bb51dad447 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -245,6 +245,12 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em .highlight-box { @extend %ecosystem-box-base; box-shadow: $ecosystem-box-glow; + + /* Yield the glow when a following hidden box is hovered/focused */ + &:has(~ .hidden-highlight-box:hover), + &:has(~ .hidden-highlight-box:focus) { + box-shadow: none; + } } .hidden-highlight-box { @@ -260,4 +266,4 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em &:focus ~ .highlight-box { box-shadow: none; } -} \ No newline at end of file +} diff --git a/content/en/kanvas/_index.md b/content/en/kanvas/_index.md index 683d4d3b35b..bfec8a82981 100755 --- a/content/en/kanvas/_index.md +++ b/content/en/kanvas/_index.md @@ -22,14 +22,14 @@ aliases: ## Understanding the Layer5 Ecosystem -{{< ecosystem-box link="cloud/_index.md" icon="cloud" class="hidden-highlight-box" title="Layer5 Cloud" >}} -is an identity provider and global console for deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted. -{{< /ecosystem-box >}} - {{< ecosystem-box icon="images/logos/kanvas-icon-color.svg" image="true" title="Kanvas" >}} delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence. {{< /ecosystem-box >}} +{{< ecosystem-box link="cloud/_index.md" icon="cloud" class="hidden-highlight-box" title="Layer5 Cloud" >}} +is an identity provider and global console for deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted. +{{< /ecosystem-box >}} + {{% /pageinfo %}} ## What is Kanvas? From 4eb2f6f6c7789218f221ec1795bf052baf506ef0 Mon Sep 17 00:00:00 2001 From: Yohai Dejorno Date: Tue, 7 Jul 2026 18:07:31 +0300 Subject: [PATCH 2/3] [Docs] Move shared glow styles to one place The glow variable was copy-pasted in both the content and navbar scss files, and the navbar also had a full copy of the ecosystem box classes that nothing there uses. I moved the variable to _variables_project.scss so both files share it, and deleted the dead navbar copy. Requested in review. Signed-off-by: Yohai Dejorno --- assets/scss/_content_project.scss | 2 -- assets/scss/_navbar_project.scss | 48 ----------------------------- assets/scss/_variables_project.scss | 3 ++ 3 files changed, 3 insertions(+), 50 deletions(-) diff --git a/assets/scss/_content_project.scss b/assets/scss/_content_project.scss index 74cfb75c16d..0e2218a8265 100644 --- a/assets/scss/_content_project.scss +++ b/assets/scss/_content_project.scss @@ -323,8 +323,6 @@ th { } // Shared ecosystem callout box (emitted by the `ecosystem-box` shortcode). -$ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em 1em #ebc01733; - %ecosystem-box-base { display: flex; align-items: center; diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index 5bb51dad447..2779c27a524 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -219,51 +219,3 @@ img.grid-icon { filter: invert(.6); } } - -// Shared ecosystem callout box (emitted by the `ecosystem-box` shortcode). -$ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em 1em #ebc01733; - -%ecosystem-box-base { - display: flex; - align-items: center; - font-style: italic; - gap: 0.5rem; - padding: 1rem; - margin: auto -1rem; - transition: box-shadow 0.3s ease; - text-decoration: none; - color: inherit; - - img { - height: 65px; - width: 65px; - border: 0; - background: transparent; - } -} - -.highlight-box { - @extend %ecosystem-box-base; - box-shadow: $ecosystem-box-glow; - - /* Yield the glow when a following hidden box is hovered/focused */ - &:has(~ .hidden-highlight-box:hover), - &:has(~ .hidden-highlight-box:focus) { - box-shadow: none; - } -} - -.hidden-highlight-box { - @extend %ecosystem-box-base; - box-shadow: none; - - &:hover { - box-shadow: $ecosystem-box-glow; - } - - /* Hide the sibling highlight-box's shadow when this one is hovered/focused */ - &:hover ~ .highlight-box, - &:focus ~ .highlight-box { - box-shadow: none; - } -} diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 3d20aa8f6e4..846d2daf36b 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -124,3 +124,6 @@ $site-max-width: 1920px; // Footer $list-inline-padding: $spacer; + +// Ecosystem callout box (emitted by the `ecosystem-box` shortcode) +$ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em 1em #ebc01733; From 28a248b2c38d32f605eddfa62df4842aa329ab3a Mon Sep 17 00:00:00 2001 From: Yohai Dejorno Date: Tue, 7 Jul 2026 18:19:41 +0300 Subject: [PATCH 3/3] Retrigger CI Signed-off-by: Yohai Dejorno