fix(#980): Implement consistent padding and margins across all sections

Diksha78-bot · Diksha78-bot · commit eb64e4c9ef96 · 2025-11-10T19:39:38.000+05:30
diff --git a/src/components/Community/LandingCommunity.css b/src/components/Community/LandingCommunity.css
@@ -1,15 +1,16 @@
 .landing-community {
   width: 100%;
-  padding: 16px;
+  padding: 2rem;
+  margin: 2rem 0;
 }
 
 .landing-community .landing-community__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 100%;
-  margin-bottom: 1rem;
-  padding: auto 1rem;
+  margin-bottom: 2rem;
+  padding: 0 1rem;
   flex-wrap: wrap;
 }
 
@@ -46,10 +47,7 @@
   gap: 1rem;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -62,47 +60,28 @@
   position: relative;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item.clickable {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable {
   cursor: pointer;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item.clickable:hover,
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item.clickable:focus {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover,
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:focus {
   transform: scale(1.02);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   outline: none;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item.loading {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.loading {
   opacity: 0.7;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item:hover {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item:hover {
   cursor: pointer;
   transform: scale(1.01);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item
-  .landing-community__stat-value {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-value {
   font-size: 3.5rem;
   font-weight: 600;
   color: var(--ifm-color-primary);
@@ -126,11 +105,7 @@
   text-shadow: inherit;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item
-  .landing-community__loading {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__loading {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -145,6 +120,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -157,19 +133,11 @@
   transition: opacity 0.2s ease;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item.clickable:hover
-  .external-link-icon {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover .external-link-icon {
   opacity: 1;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__stats
-  .landing-community__stat-item
-  .landing-community__stat-description {
+.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-description {
   font-size: 1rem;
   text-shadow: 0 0 1px var(--ifm-color-primary);
 }
@@ -184,58 +152,38 @@
   position: relative;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info.clickable {
+.landing-community .landing-community__content .landing-community__info.clickable {
   cursor: pointer;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info.clickable:hover,
-.landing-community
-  .landing-community__content
-  .landing-community__info.clickable:focus {
+.landing-community .landing-community__content .landing-community__info.clickable:hover,
+.landing-community .landing-community__content .landing-community__info.clickable:focus {
   transform: scale(1.01);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   outline: none;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info
-  .landing-community__image {
+.landing-community .landing-community__content .landing-community__info .landing-community__image {
   width: 100%;
   object-fit: cover;
   border-radius: 1rem;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info
-  .landing-community__info-text {
+.landing-community .landing-community__content .landing-community__info .landing-community__info-text {
   margin-top: 1rem;
   padding: 0;
   font-size: 1rem;
   text-shadow: 0 0 1px var(--ifm-color-primary);
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info
-  .landing-community__info-text
-  .landing-community__link {
+.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link {
   color: var(--ifm-color-primary);
   text-shadow: 0 0 1px var(--ifm-color-primary);
   text-decoration: none;
   font-weight: 600;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info
-  .landing-community__info-text
-  .landing-community__link:hover {
+.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link:hover {
   text-decoration: underline;
 }
 
@@ -249,10 +197,7 @@
   transition: opacity 0.2s ease;
 }
 
-.landing-community
-  .landing-community__content
-  .landing-community__info.clickable:hover
-  .external-link-indicator {
+.landing-community .landing-community__content .landing-community__info.clickable:hover .external-link-indicator {
   opacity: 1;
 }
 
@@ -269,20 +214,14 @@
     width: 100%;
   }
 
-  .landing-community
-    .landing-community__content
-    .landing-community__info
-    .landing-community__image {
+  .landing-community .landing-community__content .landing-community__info .landing-community__image {
     width: 100%;
   }
 
-  .landing-community
-    .landing-community__content
-    .landing-community__info
-    .landing-community__info-text {
+  .landing-community .landing-community__content .landing-community__info .landing-community__info-text {
     margin-top: 1rem;
     padding: 0;
     font-size: 1rem;
     text-shadow: 0 0 1px var(--ifm-color-primary);
   }
-}
+}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -1,11 +1,12 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 2rem;
+  margin: 2rem 0;
   width: 100%;
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
-}
+}
diff --git a/src/components/StatsSection/styles.module.css b/src/components/StatsSection/styles.module.css
@@ -1,7 +1,8 @@
 /* Stats Section */
 .section {
   width: 100%;
-  padding: 4rem 1rem;
+  padding: 3rem 1rem;
+  margin: 2rem 0;
   background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
   position: relative;
   overflow: hidden;
@@ -143,21 +144,25 @@
 
 /* Animation keyframes */
 @keyframes float {
+
   0%,
   100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-10px);
   }
 }
 
 @keyframes pulse {
+
   0%,
   100% {
     transform: scale(1);
     opacity: 1;
   }
+
   50% {
     transform: scale(1.05);
     opacity: 0.8;
@@ -168,10 +173,12 @@
   0% {
     box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
   }
+
   50% {
     box-shadow: 0 0 20px rgba(79, 70, 229, 0.8);
   }
+
   100% {
     box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
   }
-}
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1793,3 +1793,53 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
 .blog-page .margin-bottom--xl {
   margin-bottom: 0rem !important;
 }
+
+/* ===== CONSISTENT SPACING SYSTEM FOR ALL SECTIONS ===== */
+/* Issue #980: Fix inconsistent padding and margins across sections */
+
+/* Standard section spacing: 2rem vertical, 1.5rem horizontal on smaller screens */
+main > div:not(.m-0) {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.blog-carousel-section {
+  padding: 2rem 0 !important;
+  margin: 2rem 0 !important;
+}
+
+/* Responsive: reduce spacing on mobile devices */
+@media (max-width: 768px) {
+  main > div:not(.m-0) {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .blog-carousel-section {
+    padding: 1.5rem 0 !important;
+    margin: 1.5rem 0 !important;
+  }
+
+  /* Reduce section padding on mobile */
+  section,
+  [role="region"] {
+    padding: 1.5rem 0;
+    margin: 1.5rem 0;
+  }
+}
+
+/* Typography spacing for consistency */
+h1:not(:first-child),
+h2:not(:first-child),
+h3:not(:first-child) {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+h1:first-child,
+h2:first-child,
+h3:first-child {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -4,7 +4,8 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 3rem 0;
+  margin: 2rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
