RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-09-09 15:42:25 +06:00
parent 7d7d737294
commit 83a5dbe156
25 changed files with 1244 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/blog/Header.vue
View File

@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
<template>
<header>
<h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center">
<h1 class="text-xl dark:text-zinc-300 md:text-3xl lg:text-4xl m-7 font-bold text-center">
{{ title || '' }}
</h1>
<NuxtImg
@@ -28,11 +28,11 @@ withDefaults(defineProps<Props>(), {
:alt="alt || ''"
class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
/>
<p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600">
<p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400">
{{ description }}
</p>
<div class="flex w-full justify-center text-xs md:text-base my-8">
<div class="md:flex text-black content-center gap-8 text-xs sm:text-sm">
<div class="md:flex text-black dark:text-zinc-300 content-center gap-8 text-xs sm:text-sm">
<div class="flex items-center font-semibold">
<LogoDate />
<p>{{ date || '' }}</p>
@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
<div class="flex items-center gap-2 flex-wrap my-5">
<LogoTag />
<template v-for="tag in tags" :key="tag">
<span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
<span class="bg-gray-200 dark:bg-zinc-700 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
</template>
</div>
</div>

6
components/blog/card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<article class="group border m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700">
<article class="group border dark:border-gray-800 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300 ">
<NuxtLink :to="path">
<NuxtImg
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
@@ -33,7 +33,7 @@ withDefaults(defineProps<Props>(), {
:alt="alt"
/>
<div class="px-3 pb-4">
<div class="text-black pt-3 pb-2">
<div class="text-black dark:text-zinc-300 pt-3 pb-2">
<div class="flex items-center">
<LogoDate />
{{ date }}
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
</template>
</div>
</div>
<h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700">
<h2 class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700">
{{ title }}
</h2>
<p class="text-ellipsis line-clamp-2 text-base">

4
components/blog/empty.vue
View File

@@ -1,5 +1,5 @@
<template>
<article class="group border m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
<article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
<NuxtLink to="/">
<div
class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500"
@@ -7,7 +7,7 @@
<LogoConfused />
</div>
<div class="p-5">
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-700">
<h2 class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700">
No Post Available
</h2>