update(docs): styling of sidebar and header

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

update(docs): target server generation

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-06 15:42:05 +01:00
parent ea7db92b6e
commit 412a84a898
6 changed files with 46 additions and 66 deletions
+21 -4
View File
@@ -1,5 +1,5 @@
<template>
<header class="flex items-center py-4 px-8 text-white">
<header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
<span class="text-xs text-gray-800 mt-2"
@@ -7,10 +7,27 @@
Based on <a href="https://reactflow.dev">React Flow</a>
</span>
</div>
<div class="flex-1">Docs</div>
<div class="flex-1"><span class="button text-gray-400">Docs</span></div>
<div class="flex-1">
<router-link to="/examples"> Examples </router-link>
<router-link class="link" to="/examples"> Examples</router-link>
</div>
<div class="flex-1"><a href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
<div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
</header>
</template>
<style scoped>
a {
@apply hover:text-gray-300;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
.link {
@apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
}
</style>