From 58d25ca54ad69718616010f8c73b77f35bb0d6db Mon Sep 17 00:00:00 2001
From: Abhi Murali <113867502+Abhi-MS@users.noreply.github.com>
Date: Thu, 9 Jan 2025 01:06:59 +0530
Subject: [PATCH] Feature/cross browser compatibility (#932)

* standardize width and justification

* Update fourth panel css

* Update Eigth panel css

* Update Second panel css

* Update Sixth panel css

* Remove commented css from custom.css

* Remove commented styles from index.css
---
 src/css/custom.css | 95 ++++++++++++++++++----------------------------
 src/css/index.css  | 88 ++++--------------------------------------
 2 files changed, 44 insertions(+), 139 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index b9ffabf80dd..754cac0d117 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -13,9 +13,6 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.29);
-
-  /* New */
-
   --secondary-blue-900: #001c63;
   --sidebar-bg-color: #f3f4f6;
   --secondary-blue-500: #3970fd;
@@ -33,7 +30,6 @@
   --next-prev-border-color: #e5e7eb;
   --ifm-color-emphasis-100: #f4f8fb;
   --ifm-color-emphasis-0: #fff;
-  /* New */
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -110,9 +106,6 @@ html[data-theme="dark"] {
   --ifm-table-stripe-background: #001242;
   --ifm-navbar-search-input-placeholder-color: var(--ifm-color-gray-200);
   --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%23C9C9CC" alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
-
-  /* New */
-
   --ifm-hover-overlay: rgba(0, 0, 0, 0);
   --ifm-color-primary: #1e56e3;
   --secondary-blue-900: #c6d6ff;
@@ -146,15 +139,9 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   font-size: var(--ifm-h1-font-size);
   margin-bottom: 1.5rem;
 }
-
-/* New */
-
 .menu {
   background-color: var(--sidebar-bg-color);
 }
-
-/* New */
-
 .menu__link,
 .menu * {
   line-height: 1.5;
@@ -174,18 +161,13 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   margin-right: 15px;
 }
 
-/* New */
-
 @media (min-width: 997px) {
   .menu_SIkG {
-      flex-grow: 1;
-      padding: 1rem !important;
+    flex-grow: 1;
+    padding: 1rem !important;
   }
 }
 
-/* New */
-
-
 .markdown > h2 {
   --ifm-h2-font-size: 1.875rem;
   margin-bottom: 0.8rem;
@@ -197,9 +179,6 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   margin-bottom: 0.8rem;
   margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * 0rem);
 }
-
-/* New */
-
 .navbar {
   background-color: var(--sidebar-bg-color);
   box-shadow: var(--ifm-navbar-shadow);
@@ -216,25 +195,16 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   color: var(--primary-blue-600);
   text-decoration: none;
 }
-
-/* New */
-
 .navbar__items--right > .navbar__item:not(:first-of-type) {
   margin-left: 0.25px;
 }
-
-/* New */
-
 .dropdown__link:hover {
   color: #2563eb;
 }
-
 .dropdown__link--active {
   background-color: transparent;
 }
 
-/* New */
-
 .dropdown__link {
   color: var(--ifm-navbar-link-color);
 }
@@ -277,7 +247,6 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   display: inline-flex;
   margin-right: 2.75rem;
 }
-
 .github-button:hover {
   color: #fff;
   text-decoration: none;
@@ -316,26 +285,18 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   right: 8px;
   top: 4.5px;
 }
-
-/* New */
-
 .footer--dark {
   --ifm-footer-background-color: #111927;
 }
-
 .footer--dark li {
   margin-bottom: 0;
   line-height: normal;
 }
-
-/* New */
-
 .footer__icon {
   margin: 0;
   padding: 2px;
   color: #fff;
 }
-
 .footer__icon:before {
   content: "";
   display: inline-flex;
@@ -475,8 +436,6 @@ html[data-theme="dark"] .header-youtube-link:before {
   }
 }
 
-/* New */
-
 h1 {
   font-size: 1.75rem;
   font-weight: 700;
@@ -516,7 +475,6 @@ a:hover {
   color: #86a7ef;
 }
 
-/* Image */
 .custom-image {
   width: 140%;
   padding: 10px;
@@ -524,8 +482,6 @@ a:hover {
   opacity: 2;
 }
 
-/* New for Cards */
-
 .my-svg-icon path {
   fill: var(--secondary-blue-900);
 }
@@ -534,7 +490,7 @@ a:hover {
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin: 0 3rem;
+  margin: auto;
   gap: 2rem;
 }
 
@@ -557,13 +513,11 @@ a:hover {
   padding-left: 1rem;
 }
 
-/* Wide Card */
-
 .card__wide {
   display: flex;
   gap: calc(2rem + 2px);
   padding: 1.5rem 0;
-  margin: 0 10rem;
+  margin: auto;
 }
 
 .card__wide ul {
@@ -628,11 +582,13 @@ a:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
-  justify-content: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .organization-feature-card {
   max-width: 320px;
+  gap: auto;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -734,9 +690,6 @@ a:hover {
 .app-feature-card {
   display: flex;
   flex-direction: row;
-  padding: 4rem;
-  gap: 5rem;
-  height: 60vh;
 }
 .app-feature-card__image {
   flex: 1;
@@ -758,7 +711,6 @@ a:hover {
   align-items: center;
 }
 
-
 @media only screen and (max-width: 1199px) {
   .app-feature-card {
     flex-direction: column;
@@ -790,7 +742,8 @@ a:hover {
 /* Section - 6 */
 
 .SixthPanel .TwoColumns {
-  grid-template-columns: 2fr 3fr;
+  grid-template-columns: 4fr 7fr;
+  align-items: center;
 }
 
 .SixthPanel .left div {
@@ -961,6 +914,10 @@ a:hover {
     padding-left: 0 !important;
   }
 
+  .SixthPanel .column.right .prism-code{
+    margin-right: 0px !important;
+  }
+
   /* Section 7 - Participation-feature-card */
   .participation-feature-card__image img {
     width: 50vw;
@@ -991,6 +948,10 @@ a:hover {
     height: 50vh;
     overflow: hidden;
   }
+
+  .app-feature-card__image {
+    justify-content: end;
+  }
 }
 
 /* Styles for screens larger than 1440px */
@@ -998,11 +959,11 @@ a:hover {
 @media (min-width: 1920px) {
   .card__description,
   .SixthPanel .left div,
-  .EightPanel p, .card__wide li {
+  .EightPanel p,
+  .card__wide li {
     font-size: 1rem;
   }
   .card__wide li {
-    /* font-size: 1rem; */
     padding-left: 3rem !important;
   }
 }
@@ -1019,4 +980,22 @@ a:hover {
   .SixthPanel {
     align-items: center;
   }
+
+  /* Section - 2  */
+  
+  .organization-feature-cards {
+    height: 30vh;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .TwoColumns,
+  .card__container,
+  .card__wide {
+    width: 70vw;
+    max-width: 1280px !important;
+  }
+  .EightPanel .column {
+    padding-right: 0 !important;
+  }
 }
diff --git a/src/css/index.css b/src/css/index.css
index 0d42736f43e..d2aa00cec4d 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -82,7 +82,6 @@
 
 .HeaderHero .title {
   font-size: 3rem;
-  /* color: #ffffff; */
   line-height: 1;
   margin-top: 0;
   margin-bottom: 20px;
@@ -95,7 +94,6 @@
   font-size: 1.5rem;
   line-height: 1.3;
   font-weight: 500;
-  /* color: #ffffff; */
   margin-top: -7px;
   opacity: 1.1;
   left: -250px;
@@ -134,17 +132,6 @@
   }
 }
 
-/* @media only screen and (min-width: 481px) and (max-width: 960px) {
-  .HeaderHero .column.first {
-    display: flex;
-    justify-content: center;
-  }
-
-  .HeaderHero .column.last {
-    text-align: center;
-  }
-} */
-
 @media only screen and (max-width: 760px) {
   .HeaderHero .title {
     font-size: 60px;
@@ -162,7 +149,6 @@
   }
 }
 
-/* Bounce animation- HeaderHero */
 @keyframes bounce {
   0%,
   20%,
@@ -240,6 +226,9 @@
 .NativeDevelopment {
   overflow-y: hidden;
 }
+.NativeDevelopment .left {
+  margin: auto;
+}
 
 .NativeDevelopment .dissection {
   position: relative;
@@ -273,7 +262,7 @@
 
 @media only screen and (min-width: 961px) {
   .NativeDevelopment .dissection {
-    height: 300px;
+    height: auto;
   }
 }
 
@@ -309,15 +298,6 @@
   padding-top: 95px;
 }
 
-/* Sixth Panel */
-
-/* Correct for whitespace in the image of phones */
-.SixthPanel .column.left {
-  margin-top: -25px;
-  padding-top: 30px;
-  left: 300px;
-}
-
 /* Correction for the bottom space in section six*/
 #docusaurus_skipToContent_fallback
   > section.Section.SixthPanel.tint
@@ -346,7 +326,7 @@
   border-radius: 0;
   font-size: 80%;
   height: 450px;
-  width: fit-content;
+  width: 100%;
 }
 
 @media only screen and (max-width: 480px) {
@@ -378,23 +358,17 @@
     border-radius: 0;
     font-size: 80%;
     background-color: #fff;
-    /* Monokai background color */
     color: #f8f8f2;
-    /* Monokai default text color */
   }
 }
 
 @media only screen and (min-width: 961px) {
   .SixthPanel .TwoColumns .column.right {
-    /* Make flush with top and bottom */
-    margin-top: -50px;
-    /* Get rid of default left padding */
-    padding-left: 6rem;
+    max-width: 100%;
+    padding-left: 0;
   }
 
   .SixthPanel .TwoColumns {
-    margin-left: 8rem;
-    margin-right: 8rem;
     justify-content: space-between;
   }
 
@@ -433,13 +407,6 @@
   flex-direction: column;
 }
 
-/* .seventh-panel .content .firstP img {
-  float: left;
-  width: 56px;
-  height: 56px;
-  margin-right: 20px;
-} */
-
 @media only screen and (max-width: 480px) {
   .seventh-panel .Heading {
     width: 100%;
@@ -535,41 +502,6 @@
   }
 }
 
-/* responsiveness for tablets */
-
-/* @media only screen and (min-width: 481px) and (max-width: 960px) {
-  .ActionButton {
-    max-width: 100%;
-    width: 100%;
-    display: block;
-    white-space: nowrap;
-  }
-
-  .ActionButton.secondary {
-    margin-top: 1rem;
-    margin-left: auto;
-  }
-
-  .custom-image {
-    width: 80%;
-    padding-top: 6rem;
-  }
-
-} */
-
-/* Heading */
-
-/* .Heading {
-  font-size: 25px;
-  color: #29db2c;
-  line-height: 1.2;
-  margin-top: 0;
-  margin-bottom: 20px;
-  font-weight: 700;
-} */
-
-/* Home page */
-
 .HomePage {
   width: 100%;
   overflow-x: hidden;
@@ -592,10 +524,6 @@
   }
 }
 
-/* .Section+.Section {
-  border-top: 1px solid var(--ifm-table-border-color);
-} */
-
 .Section.tint {
   background-color: var(--ifm-hover-overlay);
 }
@@ -624,9 +552,7 @@
 
 @media only screen and (min-width: 961px) {
   .TwoColumns {
-    width: 80vw;
     margin: 0 auto;
-    max-width: 900px;
     grid-template-columns: repeat(2, 1fr);
     grid-template-areas: "first last";
   }