docs: update home page styles
This commit is contained in:
braks
@@ -3,31 +3,35 @@ import Heart from '~icons/mdi/heart'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="acknowledgement mt-12">
|
||||
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
|
||||
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
|
||||
<div id="acknowledgement">
|
||||
<div class="border-t-1 border-secondary pt-6">
|
||||
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
|
||||
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
|
||||
|
||||
<p>
|
||||
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to the
|
||||
developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
|
||||
<p>
|
||||
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
|
||||
the developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
|
||||
|
||||
<span class="inline-block">
|
||||
Without their continuous, amazing, open-source work, this project would not have been possible.
|
||||
</span>
|
||||
</p>
|
||||
<span class="inline-block">
|
||||
Without their continuous, amazing, open-source work, this project would not have been possible.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
|
||||
<a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
|
||||
React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc. you
|
||||
know and love from Vue. If you're happy with Vue Flow,
|
||||
<p>
|
||||
<span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
|
||||
<a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
|
||||
React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
|
||||
you know and love from Vue. If you're happy with Vue Flow,
|
||||
|
||||
<span class="inline-block text-xl font-medium">
|
||||
please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
|
||||
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
|
||||
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary"> subscribing to React Flow Pro. </a>
|
||||
</span>
|
||||
</p>
|
||||
<span class="inline-block text-xl font-medium">
|
||||
please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
|
||||
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
|
||||
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary">
|
||||
subscribing to React Flow Pro.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
|
||||
<template>
|
||||
<div ref="el" class="w-full">
|
||||
<div
|
||||
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
|
||||
class="flex flex-col divide-y divide-secondary md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl 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" />
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)">
|
||||
<div class="max-w-5/6 2xl:max-w-7xl mx-auto py-4 md:py-12 lg:py-12">
|
||||
<div
|
||||
class="border-t-1 border-secondary w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)"
|
||||
>
|
||||
<div class="max-w-5/6 2xl:max-w-7xl mx-auto py-12 md:py-16">
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<h1>Putting Ideas into Action: The Showcase</h1>
|
||||
|
||||
<p class="font-medium max-w-3/4 xl:max-w-1/2">
|
||||
<p class="font-medium max-w-3/4 text-center">
|
||||
Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
|
||||
insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left">
|
||||
<div
|
||||
class="divide-y divide-secondary md:divide-y-0 flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left"
|
||||
>
|
||||
<div class="flex-1 flex flex-col items-center md:items-start">
|
||||
<div
|
||||
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
|
||||
@@ -30,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<div class="pt-12 md:pt-0 flex-1 flex flex-col justify-center">
|
||||
<div
|
||||
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
|
||||
>
|
||||
|
||||
@@ -143,6 +143,10 @@
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.VPFooter {
|
||||
@apply dark:(border-secondary)
|
||||
}
|
||||
|
||||
.VPNavBar.has-sidebar .content, .VPNav {
|
||||
background-color: rgba(var(--vp-c-bg), 0.75);
|
||||
backdrop-filter: blur(1px);
|
||||
|
||||
Reference in New Issue
Block a user