talos/docs/website/components/Header.vue
Tim Gerla 8610a3f387 docs: more whitespace, wording, and responsiveness changes
- tweak whitespace between sections
- fix the top menu for small screens
- fix the terminal overlapping on small screens
- tweak wording on a few of the bullet points
- clean up the display of the "certified" logo on small screens
- clean up the "features" grid on medium/large screens

Signed-off-by: Tim Gerla <tim@gerla.net>
2019-10-28 10:50:01 -07:00

44 lines
1.0 KiB
Vue

<template>
<header id="header" class="flex flex-wrap">
<div class="flex items-center justify-start max-w-6xl mx-auto py-2">
<Logo></Logo>
</div>
<div class="flex items-center justify-end max-w-6xl mx-auto py-6">
<ul class="flex flex-wrap items-center justify-end">
<li class="link min-w-full md:min-w-0">
<a href="/docs/v0.2">
<span class="font-semibold mr-1">Documentation</span>
</a>
</li>
<li class="link min-w-full md:min-w-0">
<CommunityDropdown></CommunityDropdown>
</li>
<li class="link min-w-full md:min-w-0">
<a href="/faqs">
<span class="font-semibold mr-1">FAQs</span>
</a>
</li>
</ul>
</div>
</header>
</template>
<script>
import Logo from '~/components/Logo.vue'
import CommunityDropdown from '~/components/CommunityDropdown.vue'
export default {
name: 'Header',
components: {
Logo,
CommunityDropdown
}
}
</script>
<style scoped>
li {
margin-left: 1.25rem;
}
</style>