Mobile optimise

cyrus01337 · Jun 25, 2024 · b84d7b3 · b84d7b3
1 parent 9cd3ffa
commit b84d7b3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/components/github.astro b/src/components/github.astro
@@ -3,7 +3,7 @@
     href="https://github.com/cyrus01337/cyrus01337.co.uk"
 >
     <img
-        class="transition-size h-8 w-8 rounded-full border-2 border-black bg-black shadow-md group-hover:h-10 group-hover:w-10"
+        class="transition-size h-8 w-8 rounded-full border-2 border-black bg-black shadow-md duration-300 group-active:h-7 group-active:w-7 lg:group-hover:h-10 lg:group-hover:w-10"
         src="/github.svg"
     />
 </a>
diff --git a/src/components/social.astro b/src/components/social.astro
@@ -10,19 +10,19 @@ const properties = Astro.props;
 ---
 
 <a
-    class="group card box-border w-96 rounded-2xl bg-base-100 hover:cursor-pointer"
+    class="group card box-border w-96 rounded-2xl bg-base-100 shadow-lg transition-transform active:scale-95 lg:hover:cursor-pointer"
     href={properties.href}
 >
-    <figure class="relative rounded-2xl">
+    <figure class="relative rounded-t-2xl lg:rounded-b-2xl">
         <img
-            class="transition-filter group-hover:brightness-30 brightness-100 duration-300"
+            class="brightness-100 transition-filter duration-300 lg:group-hover:brightness-30"
             src={properties.graphic}
             alt="Shoes"
         />
     </figure>
 
     <div
-        class="card-body absolute h-full w-full text-left text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        class="card-body h-full w-full p-4 text-left lg:absolute lg:p-6 lg:text-white lg:opacity-0 lg:transition-opacity lg:duration-300 lg:group-hover:opacity-100"
     >
         <h2 class="card-title">{properties.title}</h2>
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -24,7 +24,7 @@ import Layout from "@/layouts/base.astro";
                 <p class="py-6 italic">"I write code to improve myself and itself."</p>
             </div>
 
-            <div class="flex flex-wrap content-center items-center justify-center gap-4">
+            <div class="flex flex-wrap content-center items-center justify-center gap-6 lg:gap-4">
                 <Social
                     graphic="https://cdna.artstation.com/p/assets/images/images/022/502/864/large/alena-aenami-eternity-1080px.jpg"
                     href="https://github.com/cyrus01337"