improve styling on phones and laptop

mohdibntarek · mohdibntarek · commit 624d20eb0701 · 2025-04-16T17:06:53.000+04:00
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,18 +10,15 @@ import SearchBar from "../components/SearchBar.astro";
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="lg:w-300">
   <head>
     <meta charset="utf-8" />
     <title>Mohamed Tarek's Personal Website</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="https://fav.farm/👨🏻‍💻" />
   </head>
 
-  <body class="m-0 bg-[var(--primary_bg_color)] w-300">
+  <body class="m-0 p-0 bg-[var(--primary_bg_color)] lg:w-full">
     <header class="site-header">
       <h1 class="mb-5 text-4xl mt-5 font-bold text-white">
         Mohamed Tarek, PhD
@@ -32,14 +29,16 @@ import SearchBar from "../components/SearchBar.astro";
         Research Affiliate @ University of Sydney
       </p>
     </header>
-    <main class="flex my-5 ml-10 pr-0">
-      <aside>
+    <main class="flex my-5 ml-10 pr-0 mr-0 pr-0">
+      <aside class="h-screen sticky ml-4 p-0 w-50 lg:w-60 pt-15 lg:pt-0">
         <LeftSide text_color_1="text-blue-500" text_color_2="text-black" />
       </aside>
-      <div class="w-200 ml-110 absolute z-50">
+      <div class="w-55 m-0 p-0 lg:w-200 lg:ml-90 absolute z-50">
         <SearchBar />
       </div>
-      <div class="grid grid-cols-3 gap-x-50 gap-y-8 ml-40 mb-10 mt-20">
+      <div
+        class="lg:h-120 grid lg:grid-cols-3 gap-x-40 gap-y-10 lg:gap-y-8 ml-20 mb-10 mt-20 mr-0 pr-0"
+      >
         <!-- About -->
         <a href="/about" class="card">
           <img src={userIcon.src} alt="user icon" class="card-img" />
@@ -104,11 +103,11 @@ import SearchBar from "../components/SearchBar.astro";
   }
 
   aside {
-    @apply pr-5 pl-5 mt-3 sticky top-0 bg-[var(--primary_bg_color)] px-4;
+    @apply pr-5 lg:pl-5 mt-3 sticky top-0 bg-[var(--primary_bg_color)] lg:pr-4;
   }
 
   .card {
-    @apply p-2 pt-5 w-65 border-1 border-slate-300 bg-blue-200 rounded-3xl container hover:scale-105 transition-shadow duration-300 hover:shadow-lg;
+    @apply p-2 pt-5 m-0 w-65 h-50 border-1 border-slate-300 bg-blue-200 rounded-3xl container hover:scale-105 transition-shadow duration-300 hover:shadow-lg;
   }
 
   @utility card-img {
@@ -128,6 +127,6 @@ import SearchBar from "../components/SearchBar.astro";
   } */
 
   .site-header {
-    @apply bg-black bg-[url("../assets/home-page-background.png")] bg-size-[auto_350px] lg:bg-size-[auto_350px] bg-position-[right_bottom_-6rem] bg-no-repeat pt-5 pb-15 pl-90 text-slate-200 h-30 w-full lg:w-full;
+    @apply bg-black lg:bg-[url("../assets/home-page-background.png")] lg:bg-size-[auto_350px] bg-position-[right_15rem_bottom_-6rem] bg-no-repeat pt-5 pb-15 pl-55 lg:pl-90 text-slate-200 h-30 w-full;
   }
 </style>
