(karaf-site) branch trunk updated: Fix homepage hero background gradient and add CSS cache buster

[jbonofre]

This is an automated email from the ASF dual-hosted git repository.

asf-gitbox-commits pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/karaf-site.git


The following commit(s) were added to refs/heads/trunk by this push:
     new 17f7055  Fix homepage hero background gradient and add CSS cache buster
17f7055 is described below

commit 17f70550028776412a65833adada751cb7cdec86
Author: JB Onofré <jb.ono...@dremio.com>
AuthorDate: Sun Sep 27 18:27:27 2026 +0200

    Fix homepage hero background gradient and add CSS cache buster
---
 _includes/head.html          |  2 +-
 _scss/_karaf-components.scss | 11 +++++++----
 _scss/_karaf-tokens.scss     |  4 ++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 5545424..2f0106c 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -12,7 +12,7 @@
 <link rel="icon" type="image/svg+xml" href="/images/feather.svg">
 
 <!-- Bootstrap 5 + FontAwesome + Inter/JetBrains Mono (all bundled into 
karaf.css, see _scss/karaf.scss) + Karaf theme -->
-<link href="/assets/css/karaf.css" rel="stylesheet">
+<link href="/assets/css/karaf.css?v=4.4.12" rel="stylesheet">
 
 <!-- Set theme before paint to avoid flash -->
 <script>
diff --git a/_scss/_karaf-components.scss b/_scss/_karaf-components.scss
index 5f1e16b..988b3c6 100644
--- a/_scss/_karaf-components.scss
+++ b/_scss/_karaf-components.scss
@@ -158,6 +158,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--k-text); }
 
 .k-hero {
   position: relative;
+  background-color: var(--k-surface-muted);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -183,10 +184,12 @@ h1, h2, h3, h4, h5, h6 { color: var(--k-text); }
   color: var(--k-text);
   background-color: var(--k-bg-subtle);
   background-image:
-    radial-gradient(circle at 1px 1px, var(--k-border) 1px, transparent 0),
-    linear-gradient(135deg, var(--k-accent-soft) 0%, transparent 60%);
-  background-size: 24px 24px, auto;
-  background-position: -12px -12px, 0 0;
+    radial-gradient(ellipse 70% 60% at 50% 38%, var(--k-hero-glow) 0%, 
transparent 75%),
+    linear-gradient(135deg, var(--k-hero-gradient) 0%, transparent 50%),
+    radial-gradient(circle at 1px 1px, var(--k-border) 1px, transparent 0);
+  background-size: auto, auto, 24px 24px;
+  background-position: center, 0 0, -12px -12px;
+  background-repeat: no-repeat, no-repeat, repeat;
 
   &::before { background-color: transparent; }
 
diff --git a/_scss/_karaf-tokens.scss b/_scss/_karaf-tokens.scss
index 8fb1e03..9888258 100644
--- a/_scss/_karaf-tokens.scss
+++ b/_scss/_karaf-tokens.scss
@@ -23,6 +23,8 @@
   --k-code-text:     #c22020;
   --k-hero-text:     #ffffff;
   --k-hero-overlay:  rgba(24, 26, 32, 0.62);
+  --k-hero-glow:     rgba(223, 42, 42, 0.12);
+  --k-hero-gradient: rgba(223, 42, 42, 0.08);
 
   --k-github-icon-filter: none;
   --k-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
@@ -50,6 +52,8 @@
   --k-code-text:     #ff8a80;
   --k-hero-text:     #ffffff;
   --k-hero-overlay:  rgba(8, 9, 12, 0.72);
+  --k-hero-glow:     rgba(240, 87, 79, 0.20);
+  --k-hero-gradient: rgba(240, 87, 79, 0.12);
 
   --k-github-icon-filter: invert(1);
   --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);