fix(finances): sm layout of revenue

- fix overflow issues at large mobile sizes - add balanced text wrapping to quotes and titles
PRX · Dec 5, 2024 · 72a1d2b · 72a1d2b
1 parent debe8fa
commit 72a1d2b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/_data/financials.json b/_data/financials.json
@@ -35,9 +35,12 @@
     "type": "revenue",
     "color": "yellow",
     "positions": [
+      {
+        "value": "auto / 1 / span 2 / -1"
+      },
       {
         "breakpoint": "sm",
-        "value": "auto / 1 / span 1 / span 3"
+        "value": "auto / 1 / span 1 / -1"
       }
     ]
   },
@@ -49,7 +52,7 @@
     "positions": [
       {
         "breakpoint": "sm",
-        "value": "auto / 4 / span 1 / span 3"
+        "value": "auto / 1 / span 1 / span 6"
       }
     ]
   },

diff --git a/_sass/_content.scss b/_sass/_content.scss
@@ -84,6 +84,7 @@
   grid-column: wide;
   justify-self: center;
   margin-bottom: 0;
+  text-wrap: balance;
 }
 
 .content-quote {
@@ -112,12 +113,15 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   blockquote.image {
     display: grid;
     column-gap: var(--_content--column-gap);
     row-gap: var(--_content--row-gap);
 
+    text-wrap: balance;
+
     img {
       border-radius: 20px;
       box-shadow: 10px -10px 0px 0px var(--_content--accent--color1), -10px 10px 0px 0px var(--_content--accent--color2);
@@ -143,6 +147,7 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   .quote-text {
     &::before {

diff --git a/_sass/_finances.scss b/_sass/_finances.scss
@@ -3,6 +3,7 @@
 
   .content-main {
     grid-column: full-width;
+    padding-inline: 2rem;
   }
 }
 
@@ -27,7 +28,6 @@
 
   max-width: 1600px;
 
-  padding-inline: 2rem;
   margin-inline: auto;
 
   @container (width > #{$min-width}) {

diff --git a/_sass/_show.scss b/_sass/_show.scss
@@ -95,6 +95,7 @@
   grid-column: wide;
   justify-self: center;
   margin-bottom: 0;
+  text-wrap: balance;
 }
 
 .show-quote {
@@ -115,6 +116,7 @@
   blockquote {
     padding: calc(var(--_show--row-gap) / 1.5);
     border-left: 3px dotted var(--_show--accent--color1);
+    text-wrap: balance;
   }
 }
 
@@ -444,6 +446,7 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   .quote-text {
     &::before {