From 366993bee14ecd07d4c87cdcfb5c4f069d68c5ca Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 28 Feb 2022 19:49:02 +0800
Subject: [PATCH] docs: enhance market theme

---
 docs/.vuepress/layouts/home/screen-2.vue  |  2 +
 docs/.vuepress/layouts/home/screen-3.vue  |  6 ++
 docs/.vuepress/layouts/home/screen-4.vue  |  6 ++
 docs/.vuepress/layouts/home/screen-5.vue  |  6 ++
 docs/.vuepress/layouts/home/screen-6.vue  |  2 +
 docs/.vuepress/layouts/market/index.vue   | 25 +++++++-
 docs/.vuepress/layouts/market/package.vue | 69 +++++++++++++++++++----
 docs/.vuepress/styles/index.scss          |  4 ++
 docs/.vuepress/styles/palette.scss        | 19 ++++++-
 docs/.vuepress/theme.js                   |  3 -
 10 files changed, 124 insertions(+), 18 deletions(-)

diff --git a/docs/.vuepress/layouts/home/screen-2.vue b/docs/.vuepress/layouts/home/screen-2.vue
index fcb3bf0b18..5319f2f0d6 100644
--- a/docs/.vuepress/layouts/home/screen-2.vue
+++ b/docs/.vuepress/layouts/home/screen-2.vue
@@ -22,4 +22,6 @@
 
 import Carousel from './Carousel.vue'
 
+defineEmits(['scroll-screen'])
+
 </script>
diff --git a/docs/.vuepress/layouts/home/screen-3.vue b/docs/.vuepress/layouts/home/screen-3.vue
index c601ad532c..12e2ef4437 100644
--- a/docs/.vuepress/layouts/home/screen-3.vue
+++ b/docs/.vuepress/layouts/home/screen-3.vue
@@ -9,3 +9,9 @@
     </div>
   </div>
 </template>
+
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>
diff --git a/docs/.vuepress/layouts/home/screen-4.vue b/docs/.vuepress/layouts/home/screen-4.vue
index 8cd9adbb4a..a357e9febb 100644
--- a/docs/.vuepress/layouts/home/screen-4.vue
+++ b/docs/.vuepress/layouts/home/screen-4.vue
@@ -6,3 +6,9 @@
     </div>
   </div>
 </template>
+
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>
diff --git a/docs/.vuepress/layouts/home/screen-5.vue b/docs/.vuepress/layouts/home/screen-5.vue
index 5d06c7bf0d..692389613c 100644
--- a/docs/.vuepress/layouts/home/screen-5.vue
+++ b/docs/.vuepress/layouts/home/screen-5.vue
@@ -27,6 +27,12 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>
+
 <style lang="scss" scoped>
 
 .advantages {
diff --git a/docs/.vuepress/layouts/home/screen-6.vue b/docs/.vuepress/layouts/home/screen-6.vue
index 026d3a0a60..0822303596 100644
--- a/docs/.vuepress/layouts/home/screen-6.vue
+++ b/docs/.vuepress/layouts/home/screen-6.vue
@@ -23,6 +23,8 @@ import { useWindowSize } from '@vueuse/core'
 import { useThemeLocaleData, resolveArraySidebarItems } from '@vuepress/theme-default/lib/client/composables'
 import SidebarItem from '@vuepress/theme-default/lib/client/components/SidebarItem.vue'
 
+defineEmits(['scroll-screen'])
+
 const { width, height } = useWindowSize()
 
 function getSidebarItems(route: string) {
diff --git a/docs/.vuepress/layouts/market/index.vue b/docs/.vuepress/layouts/market/index.vue
index 4572fe29bf..dd92a10486 100644
--- a/docs/.vuepress/layouts/market/index.vue
+++ b/docs/.vuepress/layouts/market/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="search-box"></div>
   <div class="market-container">
     <package-view v-for="data in market.packages" :key="data.name" :data="data" v-model:query="query"></package-view>
   </div>
@@ -16,12 +17,32 @@ const query = ref('')
 
 <style lang="scss">
 
+$max-width: 480px;
+$min-width: 420px;
+
 .market-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   gap: 2rem;
-  margin: 5rem 2rem 2rem;
+  margin: var(--navbar-height) auto 0;
+  padding: 2rem 2rem;
   justify-items: center;
+  justify-content: center;
+
+  .package-view {
+    max-width: $max-width;
+  }
+
+  @media (min-width: 2 * $max-width + 90px) {
+    grid-template-columns: repeat(2, $max-width);
+  }
+
+  @media (max-width: 2 * $max-width + 90px) and (min-width: 2 * $min-width + 90px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 2 * $min-width + 90px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 </style>
diff --git a/docs/.vuepress/layouts/market/package.vue b/docs/.vuepress/layouts/market/package.vue
index b40b5d01c9..3196e11b9f 100644
--- a/docs/.vuepress/layouts/market/package.vue
+++ b/docs/.vuepress/layouts/market/package.vue
@@ -7,7 +7,7 @@
       </a> -->
     </div>
     <p class="desc" v-html="data.description"></p>
-    <div class="badges">
+    <div class="badge-container">
       <badge type="tip"
         v-if="data.official"
         @click="$emit('update:query', 'is:official')"
@@ -84,6 +84,49 @@ const email = computed(() => props.data.author?.email)
 
 <style lang="scss">
 
+:root {
+  --c-card-bg: #ffffff;
+  --c-card-border: transparent;
+  --c-card-badge: #ffffff;
+}
+
+html.dark {
+  --c-card-bg: #1F1D26;
+  --c-card-border: var(--c-border);
+  --c-card-badge: var(--c-text);
+}
+
+html:not(.dark) {
+  .package-view {
+    --shadow-left-1: -1px 2px 4px hsl(250deg 40% 40% / 12%);
+    --shadow-left-2: -2px 4px 8px hsl(250deg 40% 40% / 12%);
+    --shadow-left-3: -4px 8px 16px hsl(250deg 40% 40% / 6%);
+    --shadow-left-4: -6px 12px 24px hsl(250deg 40% 40% / 6%);
+    --shadow-right-1: 2px 2px 4px hsl(250deg 40% 40% / 12%);
+    --shadow-right-2: 4px 4px 8px hsl(250deg 40% 40% / 12%);
+    --shadow-right-3: 8px 8px 16px hsl(250deg 40% 40% / 6%);
+    --shadow-right-4: 12px 12px 24px hsl(250deg 40% 40% / 6%);
+
+    &:nth-child(2n) {
+      box-shadow: var(--shadow-right-1), var(--shadow-right-2);
+    }
+
+    &:nth-child(2n + 1) {
+      box-shadow: var(--shadow-left-1), var(--shadow-left-2);
+    }
+
+    &:hover {
+      &:nth-child(2n) {
+        box-shadow: var(--shadow-right-3), var(--shadow-right-4);
+      }
+
+      &:nth-child(2n + 1) {
+        box-shadow: var(--shadow-left-3), var(--shadow-left-4);
+      }
+    }
+  }
+}
+
 .package-view {
   width: 100%;
   height: 12rem;
@@ -91,10 +134,9 @@ const email = computed(() => props.data.author?.email)
   flex-direction: column;
   border-radius: 8px;
   overflow: hidden;
-  background-color: #1F1D26;
-  border: 1px solid #4f515cbf;
-  box-shadow: 0 6px 10px -4px rgb(0 0 0 / 15%);
-  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
+  background-color: var(--c-card-bg);
+  border: 1px solid var(--c-card-border);
+  transition: var(--color-transition);
 
   > * {
     padding: 0 1.5rem;
@@ -115,16 +157,23 @@ const email = computed(() => props.data.author?.email)
   .desc {
     margin: 0;
     font-size: 15px;
-    flex-grow: 1;
+    flex-grow: 3;
   }
 
-  .badges {
-    flex-grow: 0.5;
+  .badge-container {
+    flex-grow: 1;
   }
 
-  .k-badge {
+  .badge {
     cursor: pointer;
     user-select: none;
+    padding: 2px 6px;
+    color: var(--c-card-badge);
+    font-weight: 500;
+  }
+
+  .badge.primary {
+    background-color: var(--c-primary);
   }
 
   .info {
@@ -139,7 +188,7 @@ const email = computed(() => props.data.author?.email)
 
     svg {
       height: 12px;
-      margin-right: 8px;
+      margin-right: 6px;
       vertical-align: -1px;
     }
 
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index 849390d433..91ba511b31 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -41,6 +41,10 @@ code {
   font-size: 0.9em;
 }
 
+.badge + .badge {
+  margin-left: 0.5rem;
+}
+
 aside.sidebar {
   font-size: 15px;
 
diff --git a/docs/.vuepress/styles/palette.scss b/docs/.vuepress/styles/palette.scss
index 949ad7ce40..6e432aad78 100644
--- a/docs/.vuepress/styles/palette.scss
+++ b/docs/.vuepress/styles/palette.scss
@@ -1,5 +1,5 @@
 :root {
-  --c-bg: #FDFCFF; // hsv(250, 1, 100)
+  --c-bg: #FBFAFF; // hsv(250, 2, 100)
   --c-bg-home: #F7F5FF; // hsv(250, 4, 100)
   --c-bg-dark: #F2F0FA; // hsv(250, 4, 98)
   --c-text: #212126; // hsv(250, 15, 15)
@@ -14,18 +14,26 @@
   --c-border: #E4E1F2; // hsv(250, 7, 95)
   --c-border-dark: #C0BECC; // hsv(250, 7, 80)
 
+  --c-primary: #5546a3;
   --c-brand: #5546a3;
   --c-brand-light: #473a88;
   --c-scroll-track: #eaecef;
+
+  --color-transition:
+    color 0.3s ease,
+    border-color 0.3s ease,
+    background-color 0.3s ease,
+    box-shadow 0.3s ease,
+    opacity 0.3s ease;
 }
 
 .dark:root {
   --c-bg: #0A061A; // hsv(250, 60, 15)
   --c-bg-home: #181526; // hsv(250, 45, 15)
   --c-bg-dark: #221F33; // hsv(250, 40, 20)
-  --c-text: #DFD9FF; // hsv(250, 15, 100)
+  --c-text: #EAE6FF; // hsv(250, 10, 100)
   --c-text-home: #D4CCFF; // hsv(250, 20, 100)
-  --c-text-dark: #EAE6FF; // hsv(250, 10, 100)
+  --c-text-dark: #F4F2FF; // hsv(250, 5, 100)
   --c-text-darker: #F4F2FF; // hsv(250, 5, 100)
   --c-text-darkest: #FFFFFF;
   --c-text-lightest: #9F99BF; // hsv(250, 20, 75)
@@ -33,6 +41,7 @@
   --c-border: #262433; // hsv(250, 30, 25)
   --c-border-dark: #4C4766; // hsv(250, 30, 40)
 
+  --c-primary: #7459ff;
   --c-brand: #40DFFF; // hsv(190, 75, 100)
   --c-brand-light: #7289da;
   --c-scroll-track: #151310;
@@ -54,4 +63,8 @@ html.dark .DocSearch {
   --docsearch-searchbox-focus-background: #{alpha(25%)};
 }
 
+.DocSearch-Button {
+  transition: var(--color-transition);
+}
+
 $textShadow: 1px 1px 1px rgba(23, 31, 35, 0.5);
diff --git a/docs/.vuepress/theme.js b/docs/.vuepress/theme.js
index e64888ebac..654da946a9 100644
--- a/docs/.vuepress/theme.js
+++ b/docs/.vuepress/theme.js
@@ -7,9 +7,6 @@ module.exports = {
   },
 
   plugins: [
-    ['@vuepress/palette', {
-      preset: 'sass',
-    }],
     [require('./markdown/highlight')],
     [require('./markdown/github')],
     ['medium-zoom', {