From 103a788f7f6f24d6405d6ae61daf71e7b1bc1fb4 Mon Sep 17 00:00:00 2001
From: zthxxx <zthxxx.me@gmail.com>
Date: Tue, 27 Jun 2023 22:00:00 +0800
Subject: [PATCH] style(docs): fix responsive style with home-page custom
 components

---
 .../theme/components/HomePreviewWebUI.vue     | 17 +++++++++++++--
 docs/index.md                                 | 21 ++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/docs/.vitepress/theme/components/HomePreviewWebUI.vue b/docs/.vitepress/theme/components/HomePreviewWebUI.vue
index f2f79948..2f572a19 100644
--- a/docs/.vitepress/theme/components/HomePreviewWebUI.vue
+++ b/docs/.vitepress/theme/components/HomePreviewWebUI.vue
@@ -18,12 +18,25 @@
   display: flex;
   justify-content: center;
   margin: 0 auto;
+  padding-inline: 24px;
+  padding-block: 60px 20px;
   /**
    * same as VPHero.vue
    * https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
    */
-  max-width: 1152px;
-  padding-block: 60px 20px;
+  max-width: 1280px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding-inline: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    padding-inline: 64px;
+  }
 }
 
 .webui-preview {
diff --git a/docs/index.md b/docs/index.md
index f07b411e..53b43406 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -72,16 +72,31 @@ Thanks to
 <style scoped>
 .container {
   display: flex;
-  flex-direction: column;
+  position: relative;
   margin: 0 auto;
+  padding: 0 24px;
   /**
    * same as VPHero.vue
    * https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
    */
-  max-width: 1152px;
+  max-width: 1280px;
 }
+
+@media (min-width: 640px) {
+  .container {
+    padding-inline: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    padding-inline: 64px;
+  }
+}
+
+
 .contributors-avatar {
-  max-width: 600px;
+  width: 600px;
 }
 </style>