docs: enhance market theme

docs/.vuepress/layouts/home/screen-2.vue

@@ -22,4 +22,6 @@
 
 import Carousel from './Carousel.vue'
 
+defineEmits(['scroll-screen'])
+
 </script>

docs/.vuepress/layouts/home/screen-3.vue

@@ -9,3 +9,9 @@
     </div>
   </div>
 </template>
+
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>

docs/.vuepress/layouts/home/screen-4.vue

@@ -6,3 +6,9 @@
     </div>
   </div>
 </template>
+
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>

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 {

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) {

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>

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,17 +84,59 @@ 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;
   display: flex;
   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;
     }
 

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;
 

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,25 +14,34 @@
   --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)
   --c-love: #C079F2; // hsv(275, 50, 95)
   --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);

docs/.vuepress/theme.js

@@ -7,9 +7,6 @@ module.exports = {
   },
 
   plugins: [
-    ['@vuepress/palette', {
-      preset: 'sass',
-    }],
     [require('./markdown/highlight')],
     [require('./markdown/github')],
     ['medium-zoom', {