tweak styles

pnpm-lock.yaml

@@ -83,7 +83,6 @@ specifiers:
   unocss: ^0.34.1
   use-onclickoutside: ^0.4.0
   uuid: ^8.3.2
-  uvu: ^0.5.3
   vitest: ^0.12.9
   zod: ^3.15.1
   zustand: 4.0.0-rc.1
@@ -175,7 +174,6 @@ devDependencies:
   tailwindcss: 3.0.24
   typescript: 4.6.4
   unocss: 0.34.1
-  uvu: 0.5.3
   vitest: 0.12.9
 
 packages:
@@ -1771,6 +1769,7 @@ packages:
   /dequal/2.0.2:
     resolution: {integrity: sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==}
     engines: {node: '>=6'}
+    dev: false
 
   /destr/1.1.1:
     resolution: {integrity: sha512-QqkneF8LrYmwATMdnuD2MLI3GHQIcBnG6qFC2q9bSH430VTCDAVjcspPmUaKhPGtAtPAftIUFqY1obQYQuwmbg==}
@@ -1804,6 +1803,7 @@ packages:
   /diff/5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
+    dev: false
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -3109,6 +3109,7 @@ packages:
   /kleur/4.1.4:
     resolution: {integrity: sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==}
     engines: {node: '>=6'}
+    dev: false
 
   /kolorist/1.5.1:
     resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
@@ -3671,6 +3672,7 @@ packages:
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
+    dev: false
 
   /mrmime/1.0.0:
     resolution: {integrity: sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==}
@@ -4418,6 +4420,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
+    dev: false
 
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
@@ -4952,6 +4955,7 @@ packages:
       diff: 5.1.0
       kleur: 4.1.4
       sade: 1.8.1
+    dev: false
 
   /v8-compile-cache/2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}

src/components/site/SiteArchives.tsx

@@ -43,7 +43,7 @@ export const SiteArchives: React.FC<{
                 {posts.map((post) => {
                   return (
                     <Link key={post.id} href={`/${post.slug}`}>
-                      <a className="flex justify-between items-center p-1 px-2 rounded-lg -mx-2 hover:bg-zinc-50">
+                      <a className="flex justify-between items-center p-1 px-2 rounded-lg -mx-2 hover:bg-zinc-100">
                         <span className="text-accent font-medium">
                           {post.title}
                         </span>

src/components/site/SiteHome.tsx

@@ -12,24 +12,22 @@ export const SiteHome: React.FC<{
     <div className="">
       {posts.total === 0 && <EmptyState />}
       {posts.total > 0 && (
-        <div className="space-y-14">
+        <div className="space-y-8">
           {posts.nodes.map((post) => {
             const excerpt = post.excerpt || post.autoExcerpt
             return (
-              <div key={post.id} className="block">
-                <h3 className="text-2xl font-bold">
-                  <Link href={`/${post.slug}`}>
-                    <a className="hover:text-indigo-500">{post.title}</a>
-                  </Link>
-                </h3>
-                <div className="text-sm text-zinc-400 mt-1">
-                  {formatDate(post.publishedAt)}
-                </div>
-                <div className="mt-3 text-zinc-500">
-                  {excerpt}
-                  {excerpt && "..."}
-                </div>
-              </div>
+              <Link key={post.id} href={`/${post.slug}`}>
+                <a className="block hover:bg-zinc-100 p-5 -mx-5 -my-5 rounded-xl">
+                  <h3 className="text-2xl font-bold">{post.title}</h3>
+                  <div className="text-sm text-zinc-400 mt-1">
+                    {formatDate(post.publishedAt)}
+                  </div>
+                  <div className="mt-3 text-zinc-500">
+                    {excerpt}
+                    {excerpt && "..."}
+                  </div>
+                </a>
+              </Link>
             )
           })}
         </div>