dark mode and light mode support

This commit is contained in:
rei
2022-12-30 15:01:25 +01:00
parent d397503c66
commit 4d9092ae3d
10 changed files with 148 additions and 146 deletions

View File

@@ -13,13 +13,15 @@ const ProjectCard = ({
slug: string;
}) => {
return (
<div className="p-4 rounded-md border border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
<div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
<div className="order-last xl:order-1">
<div className="text-sm font-medium text-gray-500">
{formatDate(project.date)}
</div>
<h2 className="text-2xl font-bold">{project.title}</h2>
<p className="text-gray-400 text-lg">{project.description}</p>
<p className="text-gray-600 dark:text-gray-400 text-lg">
{project.description}
</p>
<Link href={`project/${slug}`}>
<button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
Read more
@@ -40,8 +42,8 @@ const ProjectCard = ({
const Projects = ({ posts }: { posts: Post[] }) => {
return (
<MainLayout>
<h1 className="text-3xl font-bold">Projects</h1>
<div className="w-full h-0.5 bg-white/50 my-4 rounded-full" />
<h1 className="text-3xl font-bold text-gray-800">Projects</h1>
<div className="w-full h-0.5 bg-gray-200 dark:bg-gray-800 my-4 rounded-full" />
<div className="grid grid-cols-1 gap-4">
{posts.map((post, index) => (
<ProjectCard