refactor: refine global layout system

src/client/theme-default/components/VPFeature.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <article class="VPBox">
+  <article class="VPFeature">
     <div v-if="icon" class="icon">{{ icon }}</div>
     <h2 class="title">{{ title }}</h2>
     <p class="details">{{ details }}</p>
@@ -15,8 +15,8 @@ defineProps<{
 </template>
 
 <style scoped>
-.VPBox {
+.VPFeature {
-  border: 1px solid var(--vp-c-divider-light);
+  border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
   padding: 24px;
   height: 100%;

src/client/theme-default/components/VPFeatures.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VPFeature from './VPFeature.vue'
+
+export interface Feature {
+  icon?: string
+  title: string
+  details: string
+}
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+
+  if (!length) {
+    return
+  } else if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length % 2 === 0) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="features" class="VPFeatures">
+    <div class="container">
+      <div class="items">
+        <div v-for="feature in features" :key="feature.title" class="item" :class="[grid]">
+          <VPFeature
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>

src/client/theme-default/components/VPHero.vue

@@ -64,11 +64,17 @@ defineProps<{
   }
 }
 
+@media (min-width: 960px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 1152px;
 }
 
 @media (min-width: 960px) {
@@ -98,13 +104,11 @@ defineProps<{
 @media (min-width: 960px) {
   .main {
     order: 1;
+    width: calc((100% / 3) * 2);
   }
-}
 
-@media (min-width: 960px) {
+  .VPHero.has-image .main {
-  .main {
+    max-width: 592px;
-    width: 100%;
-    max-width: calc((100% / 3) * 2);
   }
 }
 
@@ -157,7 +161,7 @@ defineProps<{
 }
 
 .tagline {
-  padding-top: 16px;
+  padding-top: 8px;
   max-width: 392px;
   line-height: 28px;
   font-size: 18px;
@@ -172,7 +176,7 @@ defineProps<{
 
 @media (min-width: 640px) {
   .tagline {
-    padding-top: 24px;
+    padding-top: 12px;
     max-width: 576px;
     line-height: 32px;
     font-size: 20px;
@@ -181,7 +185,6 @@ defineProps<{
 
 @media (min-width: 960px) {
   .tagline {
-    padding-top: 24px;
     line-height: 36px;
     font-size: 24px;
   }
@@ -232,9 +235,9 @@ defineProps<{
 
 @media (min-width: 960px) {
   .image {
+    flex-grow: 1;
     order: 2;
     margin: 0;
-    width: calc(100% / 3);
     min-height: 100%;
   }
 }

src/client/theme-default/components/VPHomeFeatures.vue

@@ -1,97 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useData } from 'vitepress'
-import VPBox from './VPBox.vue'
+import VPFeatures from './VPFeatures.vue'
 
 const { frontmatter: fm } = useData()
-
-const grid = computed(() => {
-  const length = fm.value.features?.length
-
-  if (!length) {
-    return
-  }
-
-  if (length === 2) {
-    return 'grid-2'
-  } else if (length === 3) {
-    return 'grid-3'
-  } else if (length % 3 === 0) {
-    return 'grid-6'
-  } else if (length % 2 === 0) {
-    return 'grid-4'
-  }
-})
 </script>
 
 <template>
-  <div v-if="fm.features" class="VPHomeFeatures">
+  <VPFeatures
-    <div class="container">
+    v-if="fm.features"
-      <div class="items">
+    class="VPHomeFeatures"
-        <div v-for="feature in fm.features" :key="feature.title" class="item" :class="[grid]">
+    :features="fm.features"
-          <VPBox
-            :icon="feature.icon"
-            :title="feature.title"
-            :details="feature.details"
   />
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
-
-<style scoped>
-.VPHomeFeatures {
-  position: relative;
-  padding: 0 24px;
-}
-
-@media (min-width: 640px) {
-  .VPHomeFeatures {
-    padding: 0 48px;
-  }
-}
-
-.container {
-  margin: 0 auto;
-  max-width: 960px;
-}
-
-.items {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -8px;
-}
-
-.item {
-  padding: 8px;
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .item.grid-2,
-  .item.grid-4,
-  .item.grid-6 {
-    width: calc(100% / 2);
-  }
-}
-
-@media (min-width: 768px) {
-  .item.grid-2,
-  .item.grid-4 {
-    width: calc(100% / 2);
-  }
-
-  .item.grid-3,
-  .item.grid-6 {
-    width: calc(100% / 3);
-  }
-}
-
-@media (min-width: 960px) {
-  .item.grid-4 {
-    width: calc(100% / 4);
-  }
-}
-
-</style>

src/client/theme-default/components/VPHomeHero.vue

@@ -6,13 +6,13 @@ const { frontmatter: fm } = useData()
 </script>
 
 <template>
-  <div v-if="fm.hero" class="VPHomeHero">
   <VPHero
+    v-if="fm.hero"
+    class="VPHomeHero"
     :name="fm.hero.name"
     :text="fm.hero.text"
     :tagline="fm.hero.tagline"
     :image="fm.hero.image"
     :actions="fm.hero.actions"
   />
-  </div>
 </template>

src/client/theme-default/components/VPHomeSponsors.vue

@@ -55,7 +55,7 @@ defineProps<{
 
 .container {
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 1152px;
 }
 
 .love {