🎨 compatible pro mx

tw93 · Jan 1, 2025 · f2a781b · f2a781b
1 parent c05c9e4
commit f2a781b
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 16 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -10,24 +10,24 @@ const { pic, desc, date } = post.frontmatter;
   href={post.url}
   data-astro-prefetch
   data-image={pic}
-  class="pb-3 md:mt-5 mt-4 md:mr-5 flex flex-col justify-center rounded-b-md shadow-md overflow-hidden mx-auto md:w-80 w-96 card-content preload-link"
+  class='pb-3 md:mt-5 mt-4 md:mr-5 flex flex-col justify-center rounded-b-md shadow-md overflow-hidden mx-auto md:w-80 sm:w-96 w-full card-content preload-link'
 >
   <img
-    data-placeholder-background="linear-gradient(to bottom, var(--placeholder-gradient-start), var(--placeholder-gradient-end))"
+    data-placeholder-background='linear-gradient(to bottom, var(--placeholder-gradient-start), var(--placeholder-gradient-end))'
     data-src={`${pic}?x-oss-process=image/resize,w_640/format,webp`}
     data-alt={title}
-    class="lozad block md:w-80 md:h-48 w-96 h-52 rounded-t-md"
+    class='lozad block md:w-80 md:h-48 sm:w-96 w-full sm:h-52 h-56 rounded-t-md'
   />
   <div
-    class="w-full flex justify-between items-center leading-tight pt-4 pl-3 pr-3"
+    class='w-full flex justify-between items-center leading-tight pt-4 sm:pl-3 sm:pr-3 pl-1 pr-1'
   >
-    <div class="text-gray-800 dark:text-gray-200">{title}</div>
-    <div class="text-grey-darker text-sm text-gray-600 dark:text-gray-300">
+    <div class='text-gray-800 dark:text-gray-200'>{title}</div>
+    <div class='text-grey-darker text-sm text-gray-600 dark:text-gray-300'>
       {date}
     </div>
   </div>
   <p
-    class="text-gray-600 dark:text-gray-300 text-sm md:w-78 w-94 overflow-hidden pt-2.5 line-clamp-2 px-3 w-full h-12"
+    class='text-gray-600 dark:text-gray-300 text-sm md:w-78 w-94 overflow-hidden pt-2.5 line-clamp-2 sm:px-3 px-1 w-full h-12'
   >
     {desc}
   </p>

diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
@@ -6,10 +6,10 @@ import HeaderRight from "./HeaderRight.astro";
 
 <header>
   <nav
-    class="nav-wrapper md:-ml-3 xl:max-w-7xl md:w-full lg:max-w-5xl md:max-w-2xl w-96 ml-4"
+    class="nav-wrapper md:-ml-3 xl:max-w-7xl md:w-full lg:max-w-5xl md:max-w-2xl sm:w-96 w-full ml-3"
     title={SITE.title}
   >
-    <div class="logo flex md:ml-0 ml-3">
+    <div class="logo flex md:ml-0 ml-3.5">
       <a href="/" class="logo-image">
         <AstroLogo size={40} />
       </a>
@@ -29,7 +29,6 @@ import HeaderRight from "./HeaderRight.astro";
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
     top: 0;
   }
 

diff --git a/src/components/Header/HeaderRight.astro b/src/components/Header/HeaderRight.astro
@@ -6,7 +6,7 @@ import Search from "./Search.astro";
 const { blogPage, twitterId, githubId } = SITE;
 ---
 
-<div class="flex-grow text-right md:mr-1 -mr-1">
+<div class="flex-grow text-right md:mr-1 -mr-2.5">
   <Search />
   <HeaderLink href={blogPage} target="_blank">Blog</HeaderLink>
   <HeaderLink href={`https://twitter.com/${twitterId}`} target="_blank"

diff --git a/src/components/ThemeSwitch.astro b/src/components/ThemeSwitch.astro
@@ -1,4 +1,4 @@
-<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+<button id="theme-toggle" class="theme-toggle fixed bottom-6 right-6" aria-label="Toggle theme">
   <svg
     class="sun-and-moon"
     aria-hidden="true"
@@ -32,9 +32,6 @@
 
 <style is:global>
   .theme-toggle {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
     background: none;
     border: none;
     cursor: pointer;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -21,7 +21,7 @@ const allPosts = sortPosts(posts);
   <body>
     <Header />
     <div
-      class="mx-auto -mt-5 mb-12 xl:max-w-7xl w-full lg:max-w-5xl md:max-w-2xl max-w-xl md:box-border box-content md:px-0 px-3"
+      class="mx-auto -mt-5 mb-12 xl:max-w-7xl w-full lg:max-w-5xl md:max-w-2xl max-w-xl md:box-border box-content md:px-0 sm:px-3 px-4"
     >
       <div
         class="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 mx-0 md:-mr-5 mr-0 overflow-hidden"