From 489ed32566f77421fa35df7ef39c019ab696a7ab Mon Sep 17 00:00:00 2001
From: prrao87 <prrao87@gmail.com>
Date: Fri, 31 May 2024 15:08:11 -0700
Subject: [PATCH] Fix containers in home page

---
 content/_index.md |  2 +-
 sass/main.scss    | 36 ++++++++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/content/_index.md b/content/_index.md
index ab496f3..48a7920 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -24,7 +24,7 @@ knowledge-sharing. If you like what you're reading in the [blog](./posts), consi
   </div>
 
   <div class="home-image">
-    <img src="./prao.png" alt="Me, on a glorious spring day in Toronto 🇨🇦" width="200" />
+    <img src="./prao.png" alt="Me, on a glorious spring day in Toronto 🇨🇦" width="200" class="img-rounded" />
   </div>
 
 </div>
diff --git a/sass/main.scss b/sass/main.scss
index 7968958..0e430f7 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -62,26 +62,28 @@ a:focus-visible {
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .home-container {
-    display: flex;
+    // display: flex;
     align-items: start;
     /* Makes sure items start from the top */
 }
 
 .home-image {
-    flex: 1;
-    /* Takes up 1 portion of the flex container */
     max-width: 200px;
     /* Example width, adjust as needed */
-    margin-left: 20px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .home-content {
-    flex: 2;
-    /* Takes up 2 portions of the flex container */
     font-size: var(--paragraph-font-size);
     hyphens: none;
 }
 
+.img-rounded {
+    border-radius: 50%;
+    /* Rounds the image */
+    width: 100%;
+}
 
 /* prose
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -521,6 +523,28 @@ body.prose-page {
         margin: 2.5px 5px;
         padding: 5px 10px;
       }
+
+      .home-container {
+        flex-direction: column;
+        align-items: center;
+        padding: 10px;
+      }
+
+      .home-image {
+        margin-left: 0;
+        margin-bottom: 20px;
+        /* Add some space below the image */
+        max-width: 100%;
+        /* Allows the image to be fully responsive */
+      }
+
+      .home-image img {
+        max-width: 150px;
+        /* or any other appropriate size */
+        display: block;
+        margin: 0 auto;
+        /* Centers the image */
+      }
     }
 
     .date {