chore(docs): update styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/DocsRepl.vue

@@ -3,7 +3,6 @@ import type { SFCOptions } from '@vue/repl'
 import { ReplStore, Repl as VueRepl } from '@vue/repl'
 import { useVueFlow } from '@vue-flow/core'
 import '@vue/repl/style.css'
-import { isClient } from '@vueuse/core'
 import { exampleImports } from './examples'
 
 const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
@@ -89,12 +88,6 @@ const sfcOptions = {
     reactivityTransform: true,
   },
 } as SFCOptions
-
-onMounted(() => {
-  if (isClient) {
-    document.body.className = 'examples'
-  }
-})
 </script>
 
 <template>
@@ -122,8 +115,4 @@ onMounted(() => {
 
   height: calc(var(--vh) - 72px);
 }
-
-.msg.err {
-  @apply hidden;
-}
 </style>

docs/components/home/Home.vue

@@ -47,29 +47,30 @@ onMounted(() => {
   </div>
 </template>
 
-<style>
-button:focus {
-  outline: none;
-}
-
+<style lang="scss">
 .VPHome {
   @apply !pb-24;
 }
 
-h1 {
-  @apply text-xl lg:text-4xl mb-4 font-bold;
-}
+.is-home {
+  h1,
+  h2 {
+    @apply mb-4;
+  }
 
-h2 {
-  @apply text-lg lg:text-2xl mb-4 font-semibold;
-}
+  p {
+    @apply text-md lg:text-lg;
+    line-height: inherit;
+    margin: revert;
+  }
 
-p {
-  @apply text-md lg:text-lg;
-}
+  p ~ h1,
+  p ~ h2 {
+    @apply mt-6;
+  }
 
-p ~ h1,
-p ~ h2 {
-  @apply mt-6;
+  button:focus {
+    outline: none;
+  }
 }
 </style>

docs/src/.vitepress/theme/layouts/default.vue

@@ -1,12 +1,28 @@
 <script setup>
+import { watch } from 'vue'
+import { useRoute } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { webVitals } from '../../plugins/vercel-web-vitals-api'
 
 const { Layout: ParentLayout } = DefaultTheme
 
+const route = useRoute()
+
 onMounted(() => {
   webVitals({ analyticsId: '__ANALYTICS_ID__', debug: false })
 })
+
+watch(
+  route,
+  (nextRoute) => {
+    if (nextRoute.path.includes('/examples')) {
+      document.body.className = 'examples'
+    } else {
+      document.body.className = ''
+    }
+  },
+  { deep: true },
+)
 </script>
 
 <template>

docs/src/assets/index.css

@@ -11,11 +11,11 @@
 }
 
 .examples .VPDoc {
-  @apply !px-8 !py-6 md:!px-12 lg:!px-24;
+  @apply !px-8 !py-6;
 }
 
 .examples .content-container {
-  @apply max-w-full;
+  @apply !w-full !max-w-7xl;
 }
 
 .examples .aside {
@@ -26,19 +26,6 @@ html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
 }
 
-h1 {
-  @apply text-xl lg:text-4xl mb-4 font-bold;
-}
-
-h2 {
-  @apply text-lg lg:text-2xl mb-4 font-semibold;
-}
-
-p {
-  line-height: inherit;
-  margin: revert;
-}
-
 ul li {
   @apply mt-2;
 }