fix style conflicts with team page and sponsor components

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

@@ -32,17 +32,12 @@ const { frontmatter } = useData()
 
 <style scoped>
 .VPHome {
-  padding-bottom: 96px;
+  margin-bottom: 96px;
-}
-
-.VPHome :deep(.VPHomeSponsors) {
-  margin-top: 112px;
-  margin-bottom: -128px;
 }
 
 @media (min-width: 768px) {
   .VPHome {
-    padding-bottom: 128px;
+    margin-bottom: 128px;
   }
 }
 </style>

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

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+
+const { width: vw } = useWindowSize({ includeScrollbar: false })
+</script>
+
 <template>
-  <div class="vp-doc container">
+  <div
+    class="vp-doc container"
+    :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
+  >
     <slot />
   </div>
 </template>
@@ -24,4 +33,20 @@
     padding: 0 64px;
   }
 }
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+  margin-left: var(--vp-offset, calc(50% - 50vw));
+  margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+  border-top: none;
+  letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a){
+  text-decoration: none;
+}
 </style>

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

@@ -49,8 +49,33 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-gutter);
-  padding: 88px 24px 96px;
+  padding-top: 88px !important;
-  background-color: var(--vp-c-bg);
+}
+
+.VPHomeSponsors {
+  margin: 96px 0;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    margin: 128px 0;
+  }
+}
+
+.VPHomeSponsors {
+  padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHomeSponsors {
+    padding: 0 64px;
+  }
 }
 
 .container {

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

@@ -6,15 +6,20 @@
 
 <style scoped>
 .VPTeamPage {
-  padding-bottom: 96px;
+  margin: 96px 0;
 }
 
 @media (min-width: 768px) {
   .VPTeamPage {
-    padding-bottom: 128px;
+    margin: 128px 0;
   }
 }
 
+.VPHome :slotted(.VPTeamPageTitle) {
+  border-top: 1px solid var(--vp-c-gutter);
+  padding-top: 88px !important;
+}
+
 :slotted(.VPTeamPageSection + .VPTeamPageSection),
 :slotted(.VPTeamMembers + .VPTeamPageSection) {
   margin-top: 64px;

src/client/theme-default/styles/components/vp-doc.css

@@ -540,6 +540,10 @@
   max-width: calc((100% - 24px) / 2) !important;
 }
 
+/**
+ * External links
+ * -------------------------------------------------------------------------- */
+
 /* prettier-ignore */
 :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(.no-icon)::after {
   display: inline-block;

src/client/theme-default/styles/components/vp-sponsor.css

@@ -16,9 +16,9 @@
 }
 
 .vp-sponsor-tier {
-  margin-bottom: 4px;
+  margin: 0 0 4px !important;
   text-align: center;
-  letter-spacing: 1px;
+  letter-spacing: 1px !important;
   line-height: 24px;
   width: 100%;
   font-weight: 600;