update(docs): mobile styles

docs/.vitepress/components/home/Additional.vue

@@ -97,7 +97,7 @@ onPaneReady((i) => emit('pane', i))
       <Background variant="lines" pattern-color="#aaa" :gap="46" />
     </VueFlow>
   </div>
-  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center">
+  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Additional Components</h1>
       <p>

docs/.vitepress/components/home/Basic.vue

@@ -25,7 +25,7 @@ const { onPaneReady } = useVueFlow({
       type: "input",
       label: "input",
       position: { x: 250, y: 5 },
-      class: getClass,
+      class: getClass
     },
     {
       id: "2",
@@ -47,7 +47,10 @@ const { onPaneReady } = useVueFlow({
       label: "animated edge",
       target: "2",
       animated: true,
-      class: "transition-all duration-1000",
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? "font-semibold" : ""];
+        return classes.join(" ");
+      },
       style: (el: GraphEdge) => {
         const sourceNodeSelected = el.sourceNode.selected;
         return {
@@ -57,7 +60,15 @@ const { onPaneReady } = useVueFlow({
       }
     },
     {
-      id: "e1-3", source: "1", label: "default edge", target: "3", style: (el: GraphEdge) => {
+      id: "e1-3",
+      source: "1",
+      target: "3",
+      label: "default edge",
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(" ")
+      },
+      style: (el: GraphEdge) => {
         const sourceNodeSelected = el.sourceNode.selected;
         return {
           transition: "stroke ease-in-out 300ms",
@@ -66,7 +77,16 @@ const { onPaneReady } = useVueFlow({
       }
     },
     {
-      id: "e2-4", source: "2", type: "step", target: "4", animated: true, style: (el: GraphEdge) => {
+      id: "e2-4",
+      source: "2",
+      target: "4",
+      type: "step",
+      animated: true,
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(" ")
+      },
+      style: (el: GraphEdge) => {
         const sourceNodeSelected = el.sourceNode.selected;
         return {
           transition: "stroke ease-in-out 300ms",
@@ -95,9 +115,22 @@ onPaneReady((i) => emit("pane", i));
   </div>
   <div
     class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
-    <VueFlow>
+    <VueFlow class="basic">
       <Controls class="md:!left-auto md:!right-[10px]" />
       <Background pattern-color="#aaa" :gap="16" />
     </VueFlow>
   </div>
 </template>
+<style>
+.basic .vue-flow__node-input.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+
+.basic .vue-flow__node-default.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+
+.basic .vue-flow__node-output.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+</style>

docs/.vitepress/components/home/Features.vue

@@ -32,14 +32,14 @@ watch(
 <template>
   <div class="w-full bg-gray-50">
     <div
-      class="flex flex-col gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
+      class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
       <div class="flex flex-col md:flex-row gap-12 md:gap-24">
         <Basic @pane="onLoad" />
       </div>
       <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
         <RGB @pane="onLoad" />
       </div>
-      <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
+      <div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
         <Nested @pane="onLoad" />
       </div>
       <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">

docs/.vitepress/components/home/Home.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { VueFlow, Handle, Position, useVueFlow } from "@braks/vue-flow";
 import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
-import Book from "~icons/codicon/book";
 import BoxNode from "./nodes/Box.vue";
 import { watch } from "vue";
 
@@ -81,7 +80,6 @@ onPaneReady(({ fitView }) => {
         <template v-else-if="props.id === 'documentation'">
           <div class="flex">
             <a class="link group bg-orange-500" href="/docs">
-              <Book class="text-blue-700 group-hover:text-emerald-500" />
               Read The Documentation
             </a>
           </div>
@@ -91,7 +89,7 @@ onPaneReady(({ fitView }) => {
         <template v-else-if="props.id === 'examples'">
           <div class="flex">
             <a class="link group bg-purple-500" href="/examples">
-              <i class="icon-sun icon-sm !text-yellow-300" />Check The Examples
+              Check The Examples
             </a>
           </div>
           <Handle type="target" :position="Position.Top" />

docs/.vitepress/components/home/Nested.vue

@@ -41,7 +41,7 @@ const { onPaneReady } = useVueFlow({
 onPaneReady((i) => emit('pane', i))
 </script>
 <template>
-  <div class="md:max-w-1/3 flex flex-col justify-center">
+  <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Nested- & Subflows</h1>
       <p>

docs/.vitepress/components/home/RGB.vue

@@ -89,7 +89,7 @@ const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
                :node-color="nodeColor" />
     </VueFlow>
   </div>
-  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center">
+  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>