Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 15:05:34 +00:00
Code Issues Projects Releases Wiki Activity

Drop website dark mode feature

Browse Source
This commit is contained in:
khatabwedaa
2021-09-20 00:04:36 +02:00
parent c1aa6de033
commit 2ffe742ebb
7 changed files with 30 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/index.vue
View File

@@ -36,7 +36,7 @@
</div>
</div>
<div class="hidden w-full mt-6 md:flex md:items-center md:justify-center lg:w-1/2 lg:mt-0">
<div class="flex items-center justify-center w-full mt-6 lg:w-1/2 lg:mt-0">
<div class="w-full animate-float">
<img src="../assets/images/header-img.png" alt="moon">
</div>
@@ -48,7 +48,7 @@
<div class="container px-4 mx-auto">
<div class="py-16 text-center">
<h1
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl dark:text-white"
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
>
<span>Discover new components. Build amazing things. </span> &nbsp;
@@ -66,11 +66,11 @@
>
<app-button
@click="activeCategory = category.name"
class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 focus:outline-none"
class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 focus:outline-none"
:class="
category.name === activeCategory
? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200'
: 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'"
? 'bg-gray-700 text-gray-200'
: 'bg-gray-200 text-gray-700'"
>
{{ category.name }}
</app-button>
@@ -87,7 +87,7 @@
<div class="w-full max-w-6xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name">
<h1
class="mb-6 text-2xl font-semibold text-gray-800 capitalize dark:text-white"
class="mb-6 text-2xl font-semibold text-gray-800 capitalize"
v-text="category.name"
></h1>

28
pages/resources.vue
View File

@@ -4,11 +4,11 @@
<div class="container px-4 py-12 mx-auto">
<div class="max-w-xl mx-auto text-center">
<h1 class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white">
<h1 class="text-xl font-medium text-gray-800 md:text-3xl">
Resources 👌
</h1>
<p class="mt-4 text-gray-600 dark:text-gray-400 md:text-xl">
<p class="mt-4 text-gray-600 md:text-xl">
We are using many design resources on building
<a href="/components" target="_blank" class="text-blue-500 hover:underline">Meraki UI Components</a>
you can check them all the resources are free.
@@ -25,9 +25,9 @@
<img class="object-cover" src="~/assets/images/tailwindcss.jpg" alt="tailwindcss">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Tailwind CSS</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Tailwind CSS</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. </p>
<p class="mt-2 text-gray-700">A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. </p>
</div>
<div>
@@ -44,9 +44,9 @@
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Heroicons</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Heroicons</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.</p>
<p class="mt-2 text-gray-700">A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.</p>
</div>
<div>
@@ -63,9 +63,9 @@
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Heropatterns</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Heropatterns</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">A set of free MIT-licensed high-quality SVG patterns for you to use in your web projects. </p>
<p class="mt-2 text-gray-700">A set of free MIT-licensed high-quality SVG patterns for you to use in your web projects. </p>
</div>
<div>
@@ -91,9 +91,9 @@
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Storyset</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Storyset</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">Awesome free customizable illustrations for your next project Customize, animate and download our illustrations to make incredible landing pages, app or presentations. </p>
<p class="mt-2 text-gray-700">Awesome free customizable illustrations for your next project Customize, animate and download our illustrations to make incredible landing pages, app or presentations. </p>
</div>
<div>
@@ -101,9 +101,9 @@
<img class="object-cover" src="~/assets/images/coolicons-cover.png" alt="cool icons">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Coolicons</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Coolicons</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">coolicons are perfect for use in web and mobile. Support for SVG, your favourite design tool and webfont. Completely free and open source. </p>
<p class="mt-2 text-gray-700">coolicons are perfect for use in web and mobile. Support for SVG, your favourite design tool and webfont. Completely free and open source. </p>
</div>
<div>
@@ -111,9 +111,9 @@
<img class="object-cover" src="~/assets/images/unsplash.jpg" alt="unsplash">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800 dark:text-white">Unsplash</h4>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Unsplash</h4>
<p class="mt-2 text-gray-700 dark:text-gray-400">Unsplash is an amazing resource for finding beautiful, high-resolution, free photos that you can use in your projects. </p>
<p class="mt-2 text-gray-700">Unsplash is an amazing resource for finding beautiful, high-resolution, free photos that you can use in your projects. </p>
</div>
</div>
</div>