From 2ab2b05233bd39ecf4d6d0a4745434a8420becaa Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 11 Nov 2022 22:52:14 +0000
Subject: [PATCH] feat: small mobile styles

---
 src/components/site/SiteHeader.tsx | 6 +++---
 src/components/site/SiteHome.tsx   | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 178c4dc5..a7c42852 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -110,15 +110,15 @@ export const SiteHeader: React.FC<{
               </div>
               {site?.bio && (
                 <div
-                  className="xlog-site-description text-gray-500 text-xs mt-1"
+                  className="xlog-site-description text-gray-500 text-xs leading-8"
                   dangerouslySetInnerHTML={{ __html: site?.description || "" }}
                 ></div>
               )}
-              <div className="xlog-site-others mt-3 text-sm">
+              <div className="xlog-site-others text-sm">
                 <FollowingCount siteId={site?.username} />
                 <FollowingButton
                   siteId={site?.username}
-                  className="text-accent mx-5"
+                  className="text-accent mr-5 min-[438px]:mx-5"
                   variant="text"
                 />
                 <div className="relative inline-block align-middle h-7 group">
diff --git a/src/components/site/SiteHome.tsx b/src/components/site/SiteHome.tsx
index 6a075506..860907d9 100644
--- a/src/components/site/SiteHome.tsx
+++ b/src/components/site/SiteHome.tsx
@@ -23,9 +23,9 @@ export const SiteHome: React.FC<{
               <Link
                 key={post.id}
                 href={`/${post.slug || post.id}`}
-                className="xlog-post hover:bg-zinc-100 transition-colors px-5 py-7 -mx-5 first:-mt-5 md:rounded-xl flex items-center"
+                className="xlog-post hover:bg-zinc-100 transition-colors px-5 py-7 -mx-5 first:-mt-5 sm:rounded-xl flex flex-col sm:flex-row items-center"
               >
-                <div className="flex-1 flex justify-center flex-col">
+                <div className="flex-1 flex justify-center flex-col w-full sm:w-auto">
                   <h3 className="xlog-post-title text-2xl font-bold">
                     {post.title}
                   </h3>
@@ -61,9 +61,9 @@ export const SiteHome: React.FC<{
                   </div>
                 </div>
                 {post.cover && (
-                  <div className="xlog-post-cover flex items-center relative w-24 h-24 ml-4">
+                  <div className="xlog-post-cover flex items-center relative w-full sm:w-24 h-24 mt-2 sm:ml-4 sm:mt-0">
                     <Image
-                      className="object-cover rounded w-24 h-24"
+                      className="object-cover rounded"
                       alt="cover"
                       fill={true}
                       src={post.cover}