From b952b4aa3ebddf7bd555e3af1d8dc5d5da5e1d60 Mon Sep 17 00:00:00 2001
From: moiSentineL <nibir.patowary@gmail.com>
Date: Sat, 24 Aug 2024 12:19:29 +0530
Subject: [PATCH 1/2] homepage centering

---
 src/styles/home.scss | 90 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 79 insertions(+), 11 deletions(-)

diff --git a/src/styles/home.scss b/src/styles/home.scss
index 2590d118..13b301ae 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -2,27 +2,87 @@
 // reduced workload to css.scss
 
 html {
-    display: flex;
-    justify-content: center;
+    position: fixed;
+    height: 100vh;
+    max-width: 75ch;
     line-height: 1.6;
     font-size: 1.1em;
     font-family: Recursive, monospace;
-    align-items: center;
 }
 
+// body {
+//     position: fixed;
+//     top: 50%;
+//     left: 50%;
+//     max-width: 75ch;
+//     height: auto;
+//     -webkit-transform: translate(-50%,-50%);
+//     -moz-transform: translate(-50%,-50%);
+//     -ms-transform: translate(-50%,-50%);
+//     -o-transform: translate(-50%,-50%);
+//     transform: translate(-50%,-50%);
+// }
+
+/* Base styles for the body */
 body {
+    // position: absolute;
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
+    // width: 50%;
+    // height: 50%;
+        // widthr: 100px;
     position: fixed;
+    max-width: 100%;
+    max-height: 100%;
     top: 50%;
     left: 50%;
-    width: 75ch;
-    height: auto;
-    -webkit-transform: translate(-50%,-50%);
-    -moz-transform: translate(-50%,-50%);
-    -ms-transform: translate(-50%,-50%);
-    -o-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
 }
 
+// /* Medium screens */
+// @media screen and (min-width: 768px) {
+//     body {
+//         width: 80%;
+//     }
+// }
+
+// /* Large screens */
+// @media screen and (min-width: 1024px) {
+//     body {
+//         width: 70%;
+//     }
+// }
+
+// /* Extra large screens */
+// @media screen and (min-width: 1440px) {
+//     body {
+//         width: 60%;
+//     }
+// }
+
+// /* Ensure the body doesn't get too small on very narrow screens */
+// // @media screen and (max-width: 640px) {
+// //     body {
+// //         width: 95%;
+// //         padding: 10px;
+// //     }
+// //     html, body {
+// //         height: 100%;
+// //         overflow: auto;
+// //     }
+// // }
+
+// /* Additional styles to handle overflow */
+// html, body {
+//     height: 100vh;
+//     overflow: auto;
+// }
+
 .header{
     display: flex;
     flex-direction: row;
@@ -47,7 +107,15 @@ body {
     font-weight: 500;
 }
 
+@media screen and (max-width: 700px) {
+    body {
+        position: relative;
+    }
+}
+
 @media screen and (max-width: 650px) {
+
+
     html{
         font-size: 100%;
     }
@@ -57,7 +125,7 @@ body {
         flex-direction: column;
     }
     .name{
-        margin-top: 0rem;
+        margin-top: 0em;
         padding-top: 0rem;
         padding-bottom: 0rem;
         margin-bottom: 0.75rem;

From 144555c091a76eb907174de7648dd7daf5fea9b1 Mon Sep 17 00:00:00 2001
From: moiSentineL <nibir.patowary@gmail.com>
Date: Sat, 24 Aug 2024 13:00:07 +0530
Subject: [PATCH 2/2] i gave up upon it...

---
 src/styles/home.scss | 108 ++++++++++++-------------------------------
 1 file changed, 29 insertions(+), 79 deletions(-)

diff --git a/src/styles/home.scss b/src/styles/home.scss
index 13b301ae..db2f0e0e 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -2,87 +2,40 @@
 // reduced workload to css.scss
 
 html {
-    position: fixed;
-    height: 100vh;
+    height: 100%;
     max-width: 75ch;
     line-height: 1.6;
     font-size: 1.1em;
     font-family: Recursive, monospace;
+    // border: 10px solid red;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    // overflow: hidden;
+    padding: 0  ;
 }
 
-// body {
-//     position: fixed;
-//     top: 50%;
-//     left: 50%;
-//     max-width: 75ch;
-//     height: auto;
-//     -webkit-transform: translate(-50%,-50%);
-//     -moz-transform: translate(-50%,-50%);
-//     -ms-transform: translate(-50%,-50%);
-//     -o-transform: translate(-50%,-50%);
-//     transform: translate(-50%,-50%);
-// }
-
-/* Base styles for the body */
 body {
-    // position: absolute;
+    height: calc(100% - 1em);   
+    // position: fixed;
+    // max-width: 100%;
+    // max-height: 100%;
     // top: 50%;
     // left: 50%;
     // transform: translate(-50%, -50%);
-    // width: 50%;
-    // height: 50%;
-        // widthr: 100px;
-    position: fixed;
-    max-width: 100%;
-    max-height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
+    // -webkit-transform: translate(-50%, -50%);
+    // -moz-transform: translate(-50%, -50%);
+    // -o-transform: translate(-50%, -50%);
+    // -ms-transform: translate(-50%, -50%);
+    // display: flex;
+    // flex-direction: column;
+    // position: relative;
+    // align-items: center;
+    // justify-content: center;
+  
 }
 
-// /* Medium screens */
-// @media screen and (min-width: 768px) {
-//     body {
-//         width: 80%;
-//     }
-// }
-
-// /* Large screens */
-// @media screen and (min-width: 1024px) {
-//     body {
-//         width: 70%;
-//     }
-// }
-
-// /* Extra large screens */
-// @media screen and (min-width: 1440px) {
-//     body {
-//         width: 60%;
-//     }
-// }
-
-// /* Ensure the body doesn't get too small on very narrow screens */
-// // @media screen and (max-width: 640px) {
-// //     body {
-// //         width: 95%;
-// //         padding: 10px;
-// //     }
-// //     html, body {
-// //         height: 100%;
-// //         overflow: auto;
-// //     }
-// // }
-
-// /* Additional styles to handle overflow */
-// html, body {
-//     height: 100vh;
-//     overflow: auto;
-// }
-
 .header{
     display: flex;
     flex-direction: row;
@@ -107,15 +60,14 @@ body {
     font-weight: 500;
 }
 
-@media screen and (max-width: 700px) {
-    body {
-        position: relative;
-    }
-}
+// @media screen and (max-width: 700px) {
+//     body {
+//         position: relative;
+//     }
+// }
 
 @media screen and (max-width: 650px) {
 
-
     html{
         font-size: 100%;
     }
@@ -144,9 +96,7 @@ body {
 }
 
 img {
-    max-width: 100%;
     margin: 0.5rem auto;
-    display: block;
 }
 
 .profile {
@@ -154,7 +104,7 @@ img {
     width: 30%;
     margin: auto 0 0 auto;
     border-radius: 50%;
-    height: auto;
+    // height: auto;
 
     @media screen and (max-width:650px) {
         align-self: center;
@@ -163,6 +113,6 @@ img {
         margin-top:1.5em;
         margin-bottom: 0em;
         border-radius: 50%;
-        height: auto; 
+        // height: auto; 
     }
 }
\ No newline at end of file