Add search box

This commit is contained in:
samaradel
2020-11-15 16:59:37 +02:00
parent 303e940a41
commit 9fa5716b3d
2 changed files with 131 additions and 103 deletions

View File

@@ -5,11 +5,10 @@
// To restart press CTRL + C in terminal and run `gridsome develop`
module.exports = {
siteName: 'Alliance for a Conscious Internet',
siteName: 'ACI',
siteDescription: 'ThreeFold Partners',
siteUrl: 'http://localhost:8080',
plugins: [
{
plugins: [{
use: 'gridsome-plugin-tailwindcss',
options: {
tailwindConfig: './tailwind.config.js',
@@ -84,8 +83,7 @@ module.exports = {
transformers: {
remark: {
plugins: [
'@noxify/gridsome-remark-table-align',
['@noxify/gridsome-remark-classes', {
'@noxify/gridsome-remark-table-align', ['@noxify/gridsome-remark-classes', {
'table': 'table table-striped',
'tableCell[align=center]': 'text-center',
'tableCell[align=right]': 'text-right'

View File

@@ -75,7 +75,7 @@
<li
:key="element.name"
v-for="(element, index) in $static.metadata.navigation"
class="hover:text-white"
class="hover:text-white py-1"
v-bind:class="{
'mr-4':
index != Object.keys($static.metadata.navigation).length - 1,
@@ -94,11 +94,35 @@
}}</g-link>
</li>
</ul>
<div class="md:hidden inline-flex rounded-full border-grey-light border w-1/2">
<button>
<span class="w-auto flex justify-end items-center text-grey p-2">
<font-awesome :icon="['fas', 'search']" />
</span>
</button>
<input
class="w-full rounded mr-4 bg-black"
type="text"
placeholder="Search..."
/>
</div>
</nav>
<div
class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last"
>
<ul class="list-none flex justify-center md:justify-end">
<div class="inline-flex rounded-full border-grey-light border w-1/2">
<button>
<span class="w-auto flex justify-end items-center text-grey p-2">
<font-awesome :icon="['fas', 'search']" />
</span>
</button>
<input
class="w-full rounded mr-4 bg-black"
type="text"
placeholder="Search..."
/>
</div>
<ul class="list-none inline-flex justify-center md:justify-end">
<li class="mr-0 sm:mr-6">
<theme-switcher v-on="$listeners" :theme="theme" />
</li>
@@ -190,3 +214,9 @@ query {
}
}
</static-query>
<style scoped>
input:focus {
outline: 0;
}
</style>