Drop website dark mode feature
This commit is contained in:
khatabwedaa
parent
c1aa6de033
commit
2ffe742ebb
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container px-6 mx-auto">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="py-6 text-center">
|
||||
<p class="flex items-center text-sm text-gray-500 sm:text-base dark:text-gray-300">
|
||||
<p class="flex items-center text-sm text-gray-500 sm:text-base">
|
||||
Build with
|
||||
<svg class="w-5 h-5 mx-1 text-gray-700" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 8.40001C1.99975 6.95035 2.58239 5.56146 3.61681 4.54584C4.65124 3.53022 6.05058 2.97317 7.5 3.00001C9.21732 2.99089 10.856 3.71919 12 5.00001C13.144 3.71919 14.7827 2.99089 16.5 3.00001C17.9494 2.97317 19.3488 3.53022 20.3832 4.54584C21.4176 5.56146 22.0002 6.95035 22 8.40001C22 13.756 15.621 17.8 12 21C8.387 17.773 2 13.76 2 8.40001Z" fill="currentColor"></path>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@
|
|||
<span>Share on twitter</span>
|
||||
</a>
|
||||
|
||||
<dark-mode />
|
||||
|
||||
<a class="text-white hover:text-blue-400" href="https://github.com/bakateam/merakiui" target="_blink">
|
||||
<svg class="w-5 h-5 fill-current sm:w-6 sm:h-6" viewBox="0 0 30 30">
|
||||
<path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
|
||||
|
|
@ -40,10 +38,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import DarkMode from './utilities/DarkMode.vue';
|
||||
|
||||
export default {
|
||||
components: { DarkMode },
|
||||
data() {
|
||||
return {
|
||||
SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<button @click="toggle" class="text-white hover:text-blue-400 focus:outline-none" aria-label="Color Mode">
|
||||
<svg v-if="darkMode" class="w-5 h-5 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg v-if="!darkMode" class="w-5 h-5 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
darkMode: false,
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.darkMode = JSON.parse(localStorage.getItem('darkMode'))
|
||||
|
||||
this.set()
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.darkMode = ! this.darkMode
|
||||
localStorage.setItem('darkMode', this.darkMode)
|
||||
this.set()
|
||||
},
|
||||
|
||||
set() {
|
||||
if (this.darkMode) {
|
||||
document.querySelector('html').classList.add('dark')
|
||||
return
|
||||
}
|
||||
document.querySelector('html').classList.remove('dark')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,18 +2,18 @@
|
|||
<div class="mb-16">
|
||||
<div class="flex flex-col items-center justify-between md:flex-row">
|
||||
<div class="flex items-center">
|
||||
<h3 class="text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }} </h3>
|
||||
<h3 class="text-gray-700 capitalize md:text-lg">{{ name }} </h3>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 space-x-4 md:mt-0">
|
||||
<app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
|
||||
<app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
|
||||
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
|
||||
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
|
||||
</svg>
|
||||
</app-button>
|
||||
|
||||
<app-button @click="dark =! dark" class="p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="dark mode button">
|
||||
<app-button @click="dark =! dark" class="p-1 text-gray-600 bg-gray-200 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none" aria-label="dark mode button">
|
||||
<svg v-if="dark" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
|
|
@ -22,19 +22,19 @@
|
|||
</svg>
|
||||
</app-button>
|
||||
|
||||
<app-button @click="viewCode =! viewCode" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
|
||||
<app-button @click="viewCode =! viewCode" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="View code snippet">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
</app-button>
|
||||
|
||||
<a target="_blank" :href="playUrl" class="block p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:hover:bg-gray-500 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:text-gray-200 focus:outline-none">
|
||||
<a target="_blank" :href="playUrl" class="block p-1 text-gray-600 bg-gray-200 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="Copy">
|
||||
<app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="p-1 text-gray-600 bg-gray-200 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none" aria-label="Copy">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
|
||||
<div :class="{ 'dark': dark }">
|
||||
<div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-200 border rounded-lg dark:border-gray-600 dark:bg-gray-600">
|
||||
<div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-200 border rounded-lg dark:border-gray-600">
|
||||
<div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
|
||||
<slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="bg-white">
|
||||
<Nuxt />
|
||||
<footer-component />
|
||||
|
||||
<back-to-top visibleoffset="800">
|
||||
<app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
|
||||
<app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 focus:outline-none" aria-label="Back to top">
|
||||
<svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue