(airflow-site) branch main updated: Improve community page layout alignment and accordion hover interaction (#1400)

[potiuk]

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

potiuk pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git


The following commit(s) were added to refs/heads/main by this push:
     new 52d33576a0 Improve community page layout alignment and accordion hover 
interaction (#1400)
52d33576a0 is described below

commit 52d33576a03105ab21071748a5189faa55dc4e52
Author: Shashiranjan singh <singhshashiranja...@gmail.com>
AuthorDate: Mon Jan 26 22:13:38 2026 +0530

    Improve community page layout alignment and accordion hover interaction 
(#1400)
    
    * enhancing the ui
    
    * enhancing ui
    
    * enhancing the ui
---
 landing-pages/site/assets/scss/_accordion.scss     | 26 +++++++++++++++++++++-
 .../site/layouts/shortcodes/accordion.html         |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/landing-pages/site/assets/scss/_accordion.scss 
b/landing-pages/site/assets/scss/_accordion.scss
index 76abfe362e..41f7466a32 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -51,8 +51,16 @@ details.accordion {
     }
 
     &--header {
+      text-align: center;
       margin-bottom: 20px;
     }
+
+    &--text {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
   }
 
   .accordion__arrow {
@@ -60,7 +68,7 @@ details.accordion {
     position: absolute;
     width: 36px;
     height: 36px;
-    top: 0;
+    top: 60px;
     right: 0;
     justify-content: center;
     align-items: center;
@@ -78,6 +86,14 @@ details.accordion {
         transform: rotate(180deg);
       }
     }
+
+    .accordion__summary-content {
+      &--text {
+        -webkit-line-clamp: unset;
+        line-clamp: unset;
+      }
+
+    }
   }
 
   .accordion__content {
@@ -119,3 +135,11 @@ details.accordion {
     }
   }
 }
+
+details.accordion:hover {
+  background-color: rgb(236, 226, 226);
+}
+
+[data-bs-theme="dark"] details.accordion:hover {
+  background-color: rgba(88, 76, 76, 0.244);
+}
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html 
b/landing-pages/site/layouts/shortcodes/accordion.html
index e13613b135..a916f55bc5 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -20,6 +20,7 @@
 {{ $icon := .Get "logo_path" }}
 <details class="accordion" {{if .Get "open" }}open{{ end }}>
     <summary>
+        <h4 class="accordion__summary-content--header {{ if $icon }} 
subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end 
}}">{{ .Get "title" }}</h4>
         <div class="accordion__arrow">
             {{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . | 
minify).Content | safeHTML }}{{ end }}
         </div>
@@ -30,7 +31,6 @@
                 </div>
             {{ end }}
             <div class="accordion__summary-content--text">
-                <h4 class="accordion__summary-content--header {{ if $icon }} 
subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end 
}}">{{ .Get "title" }}</h4>
                 <span class="bodytext__medium--brownish-grey">{{ .Get 
"description" | markdownify }}</span>
             </div>
         </div>