From e209766d52b94b283e6643a54c59e672f77d4d31 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 13:34:11 +0200
Subject: [PATCH] docs(site): make homepage responsive and accessible

---
 website/.vitepress/components/HomePage.vue |  8 ++++-
 website/.vitepress/theme/custom.css        | 39 ++++++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index e3952c1a..0339bcda 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -25,6 +25,12 @@ const copyAnnouncement = computed(() => {
   return '';
 });
 
+const copyAriaLabel = computed(() => {
+  if (copyState.value === 'copied') return 'Install command copied';
+  if (copyState.value === 'failed') return 'Copy install command again';
+  return 'Copy install command';
+});
+
 function resetCopyState() {
   window.clearTimeout(copyResetTimer);
   copyResetTimer = window.setTimeout(() => {
@@ -68,7 +74,7 @@ function track(event: string) {
         <code>{{ installCommand }}</code>
         <button
           type="button"
-          :aria-label="`${copyLabel} install command`"
+          :aria-label="copyAriaLabel"
           @click="copyInstallCommand"
         >
           {{ copyLabel }}
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 0c7456e0..79590773 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -141,9 +141,8 @@ img[src*='custom-icon-badges.demolab.com'] {
   }
 }
 
-
 .VPTeamPage > .VPTeamPageTitle {
-  padding-top: 0
+  padding-top: 0;
 }
 
 /* VitePress greys out sponsor logos by default. Show them in their brand
@@ -169,3 +168,39 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
 .dark .vp-sponsor-grid-item.has-dark-logo:hover .logo-light {
   display: block;
 }
+
+@media (max-width: 639px) {
+  .VPHomeHero {
+    overflow: hidden;
+  }
+
+  .VPHomeHero .main,
+  .VPHomeHero .heading,
+  .VPHomeHero .text,
+  .VPHomeHero .tagline {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .VPHomeHero .text {
+    width: 100%;
+    overflow-wrap: anywhere;
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .VPHomeHero .actions {
+    align-items: stretch;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .VPHomeHero .action {
+    min-width: min(100%, 15rem);
+  }
+
+  .VPHomeHero .VPButton {
+    justify-content: center;
+    width: 100%;
+  }
+}