beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update heros

Browse source
This commit is contained in:
khatabwedaa 2020-09-06 20:47:13 +02:00
parent a52399a4ea
commit 4b9abdca4d
4 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Main.vue
View file

@ -15,7 +15,7 @@
<p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
</div>
<div class="w-full max-w-5xl mx-auto">
<div class="w-full max-w-6xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name">
<h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>

16
src/components/ui/Heros/WithImage.vue
View file

@ -29,7 +29,7 @@
</nav>
<div class="md:flex">
<div class="flex items-center justify-center px-6 py-8 md:h-96 w-full md:w-1/2">
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
<div class="max-w-xl">
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
@ -43,7 +43,7 @@
</div>
<div class="w-full h-64 md:w-1/2 md:h-auto">
<div class="h-full w-full object-cover object-center" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
<div class="h-full w-full bg-black opacity-25"></div>
</div>
</div>
@ -61,7 +61,7 @@
isOpen: false,
code: `
<header class="bg-white">
<nav class="px-6 py-2 shadow">
<nav class="px-6 py-3 shadow">
<div class="md:flex items-center justify-between">
<div class="flex justify-between items-center">
<div>
@ -87,8 +87,8 @@
</div>
</nav>
<div class="flex py-8 md:py-0 md:h-96">
<div class="flex items-center justify-center px-6 md:w-1/2">
<div class="md:flex">
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
<div class="max-w-xl">
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
@ -101,9 +101,9 @@
</div>
</div>
<div class="hidden md:block md:w-1/2">
<div class="h-full object-cover object-center" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
<div class="h-full bg-black opacity-25"></div>
<div class="w-full h-64 md:w-1/2 md:h-auto">
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
<div class="h-full w-full bg-black opacity-25"></div>
</div>
</div>
</div>

4
src/components/ui/Heros/WithPattern.vue
View file

@ -14,7 +14,7 @@
</div>
</nav>
<div class="flex items-center flex-col py-6 md:h-96 md:flex-row">
<div class="flex items-center flex-col py-6 md:h-128 md:flex-row">
<div class="md:w-1/2">
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
@ -71,7 +71,7 @@
</div>
</nav>
<div class="flex items-center flex-col py-6 md:h-96 md:flex-row">
<div class="flex items-center flex-col py-6 md:h-128 md:flex-row">
<div class="md:w-1/2">
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>

5
tailwind.config.js
View file

@ -6,8 +6,9 @@ module.exports = {
roboto: ["Roboto"],
},
spacing: {
96: "24rem",
112: "28rem",
'80': '20rem',
'96': '24rem',
'128': '32rem',
},
},
},