From 70604b965695d413f6184a9d11ba287d37dc354d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 23 Apr 2023 23:50:04 +0200
Subject: [PATCH] chore(docs): update styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/DocsRepl.vue                  | 11 ------
 docs/components/home/Home.vue                 | 35 ++++++++++---------
 docs/src/.vitepress/theme/layouts/default.vue | 16 +++++++++
 docs/src/assets/index.css                     | 17 ++-------
 4 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/docs/components/DocsRepl.vue b/docs/components/DocsRepl.vue
index 58eb8726..2d101a7e 100644
--- a/docs/components/DocsRepl.vue
+++ b/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>
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index 44a7130a..e024446f 100644
--- a/docs/components/home/Home.vue
+++ b/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>
diff --git a/docs/src/.vitepress/theme/layouts/default.vue b/docs/src/.vitepress/theme/layouts/default.vue
index e966721f..ee7e7329 100644
--- a/docs/src/.vitepress/theme/layouts/default.vue
+++ b/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>
diff --git a/docs/src/assets/index.css b/docs/src/assets/index.css
index 9e0338a3..29744a41 100644
--- a/docs/src/assets/index.css
+++ b/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;
 }