Merge pull request #280 from nubenetes/bot/v2-index-mosaic-premium-hover

feat: optimize channel mosaic scaling and hover transitions

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[2.3.15]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.15) - 2026-05-27
+
+### Changed
+- **Homepage YouTube Mosaic Scaling & Transitions**: Refactored the icon layout styling to use uniform responsive sizing (48px) instead of viewport percentage widths. Added hover micro-animations (scale-up scale factor 1.15x and brightness filters) for both light and dark modes to enhance aesthetic premium quality.
+
 ## [[2.3.14]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.14) - 2026-05-27
 
 ### Changed

docs/static/extra.css

@@ -35,4 +35,18 @@ reset max-width with the following CSS: */
 .someid { color: green; }
 */
 
+.channel-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  margin: 6px;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
+  vertical-align: middle;
+}
+
+.channel-logo:hover {
+  transform: scale(1.15);
+  filter: brightness(1.2);
+}
+
 

docs/static/v2_elite.css

@@ -178,3 +178,19 @@ a {
   text-shadow: 0 0 5px rgba(251, 191, 36, 0.4);
 }
 
+.channel-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  margin: 6px;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
+  vertical-align: middle;
+}
+
+.channel-logo:hover {
+  transform: scale(1.15);
+  filter: brightness(1.25);
+  box-shadow: 0 0 12px var(--md-accent-fg-color);
+  border-radius: 4px;
+}
+

src/reorganize_mosaic.py

@@ -32,7 +32,7 @@ def build_mosaic_markdown(yaml_path):
         # Channel links
         chan_links = []
         for chan in cat['channels']:
-            chan_links.append(f"[![{chan['title']}]({chan['image']}){{: style=\"width:7%\"}}]({chan['url']})")
+            chan_links.append(f"[![{chan['title']}]({chan['image']}){{: style=\"width:48px; height:48px; object-fit:contain; margin:6px;\" .channel-logo}}]({chan['url']})")
         
         lines.append(" ".join(chan_links))
         lines.append('')