Section metadata grid-width styles for mobile and tablet viewports (a…

…dobecom#1259) * initial section grid support for respective VP, text block margin support * icon styles for nested grid-width * Refactored some code for accurate max-widths, included max-width-8-desktop etc * fixed .icon.inline in small grid-widths * minor btm margin for icon-area * better selector * fixed icon block scoped in grid-width * fixed margin scope on foreground * format and remove comments * revert fragment.js change * removed unneeded selector * fixed whitespace lint --------- Co-authored-by: thi64146 <[email protected]> Co-authored-by: Ruchika Sinha <[email protected]>
Ruchika4 · Sep 14, 2023 · 55afc5c · 55afc5c
1 parent 0986b98
commit 55afc5c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 37 deletions.
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
@@ -62,7 +62,7 @@
 }
 
 .icon-block .foreground .icon-area {
-  margin: 0 auto;
+  margin: 0 auto var(--spacing-xs);
   max-height: var(--icon-size-xxl);
   max-width: 234px;
   overflow: hidden;
@@ -73,6 +73,21 @@
   width: auto;
 }
 
+.icon-block.inline .foreground {
+  max-width: max-content;
+  margin: 0 auto;
+}
+
+.icon-block.inline .foreground .text-content {
+  flex-flow: row nowrap;
+  text-align: start;
+  gap: 16px;
+}
+
+.icon-block.inline .body-s.action-area {
+  padding-top: 24px;
+}
+
 .icon-block.inline .icon-area,
 .icon-block.inline .icon-area picture img {
   min-width: var(--icon-size-xxl);
@@ -251,6 +266,12 @@
   margin: 0 auto;
 }
 
+[class*='grid-width-'] .icon-block.fullwidth .foreground,
+[class*='grid-width-'] .icon-block.bio .foreground {
+  width: unset;
+  max-width: unset;
+}
+
 .icon-block.bio.center .foreground,
 .icon-block.vertical.center .foreground {
   text-align: center;
@@ -424,14 +445,3 @@
     grid-template-columns: repeat(5, 1fr) !important;
   }
 }
-
-.icon-block.inline .foreground .text-content {
-  flex-flow: row nowrap;
-  text-align: start;
-  gap: 16px;
-}
-
-
-.icon-block.inline .body-s.action-area {
-  padding-top: 24px;
-}
diff --git a/libs/blocks/section-metadata/section-metadata.css b/libs/blocks/section-metadata/section-metadata.css
@@ -88,13 +88,13 @@
   width: 100%;
 }
 
-.section.center .content>h1,
-.section.center .content>h2,
-.section.center .content>h3,
-.section.center .content>h4,
-.section.center .content>h5,
-.section.center .content>h6,
-.section.center .content>p {
+.section.center .content > h1,
+.section.center .content > h2,
+.section.center .content > h3,
+.section.center .content > h4,
+.section.center .content > h5,
+.section.center .content > h6,
+.section.center .content > p {
   text-align: center;
 }
 
@@ -110,11 +110,6 @@
   justify-items: center;
 }
 
-main>.section[class*='-up']>.content {
-  max-width: initial;
-  margin: 0;
-}
-
 .section[class*='-up'].no-gap {
   gap: 0;
 }
@@ -177,10 +172,17 @@ main>.section[class*='-up']>.content {
   background-color: var(--color-white);
 }
 
-@media (min-width: 900px) {
-  .section.sticky-top {
-    top: 64px;
-  }
+.section[class*='grid-width-'] {
+  padding-left: var(--grid-margins-width);
+  padding-right: var(--grid-margins-width);
+  display: grid;
+  gap: var(--spacing-m);
+}
+
+.section[class*='grid-width-'] > .content,
+main > .section[class*='-up'] > .content {
+  max-width: initial;
+  margin: 0;
 }
 
 @media screen and (min-width: 600px) and (max-width: 1200px) {
@@ -189,22 +191,34 @@ main>.section[class*='-up']>.content {
   }
 }
 
-@media screen and (min-width: 1200px) {
-  .section.grid-width-10 {
-    padding-left: var(--grid-margins-width-10);
-    padding-right: var(--grid-margins-width-10);
+@media screen and (min-width: 720px) {
+  .section.grid-width-6 {
+    padding-left: calc((100vw - 600px) / 2);
+    padding-right: calc((100vw - 600px) / 2);
   }
+}
 
+@media screen and (min-width: 920px) {
   .section.grid-width-8 {
-    padding-left: var(--grid-margins-width-8);
-    padding-right: var(--grid-margins-width-8);
+    padding-left: calc((100vw - 800px) / 2);
+    padding-right: calc((100vw - 800px) / 2);
   }
+}
 
-  .section.grid-width-6 {
-    padding-left: var(--grid-margins-width-6);
-    padding-right: var(--grid-margins-width-6);
+@media (min-width: 900px) {
+  .section.sticky-top {
+    top: 64px;
+  }
+}
+
+@media screen and (min-width: 1120px) {
+  .section.grid-width-10 {
+    padding-left: calc((100vw - 1000px) / 2);
+    padding-right: calc((100vw - 1000px) / 2);
   }
+}
 
+@media screen and (min-width: 1200px) {
   .section.two-up {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -236,4 +250,19 @@ main>.section[class*='-up']>.content {
   .section.grid-template-columns-3-1 {
     grid-template-columns: 3fr 1fr;
   }
+
+  .section.grid-width-6-desktop {
+    padding-left: var(--grid-margins-width-6);
+    padding-right: var(--grid-margins-width-6);
+  }
+
+  .section.grid-width-8-desktop {
+    padding-left: var(--grid-margins-width-8);
+    padding-right: var(--grid-margins-width-8);
+  }
+
+  .section.grid-width-10-desktop {
+    padding-left: var(--grid-margins-width-10);
+    padding-right: var(--grid-margins-width-10);
+  }
 }
diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css
@@ -175,6 +175,10 @@
   text-decoration: double underline;
 }
 
+.section[class*='grid-width-'] .text-block .foreground {
+  max-width: unset;
+}
+
 /* Tablet up */
 @media screen and (min-width: 600px) {
   .link-farm.text-block h2 {