fix(r&w): smaller row-gap for small thumbnails in "more" section

owid · Mar 4, 2024 · 751e8db · 751e8db
1 parent 3c8db82
commit 751e8db
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/site/gdocs/components/ResearchAndWriting.scss b/site/gdocs/components/ResearchAndWriting.scss
@@ -20,13 +20,8 @@ $rw-margin-bottom-grid-cell: 4px;
     color: $blue-50;
 }
 
-.research-and-writing-link__title {
-    margin-top: 0;
-    margin-bottom: $rw-margin-bottom-grid-cell;
-}
-
 .research-and-writing-row__links {
-    row-gap: 32px - $rw-margin-bottom-grid-cell;
+    row-gap: 40px - $rw-margin-bottom-grid-cell;
 
     @include sm-only {
         display: flex;
@@ -35,6 +30,10 @@ $rw-margin-bottom-grid-cell: 4px;
     }
 }
 
+.research-and-writing-row__links--condensed {
+    row-gap: 32px - $rw-margin-bottom-grid-cell;
+}
+
 .research-and-writing-link {
     @include sm-only {
         flex: 1 0 80%;
@@ -68,6 +67,11 @@ $rw-margin-bottom-grid-cell: 4px;
     }
 }
 
+.research-and-writing-link__title {
+    margin-top: 0;
+    margin-bottom: $rw-margin-bottom-grid-cell;
+}
+
 .research-and-writing-link__description {
     color: $blue-90;
     margin-bottom: $rw-margin-bottom-grid-cell;

diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
@@ -149,7 +149,7 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
                     <h2 className="h2-bold research-and-writing-row__heading">
                         {more.heading}
                     </h2>
-                    <div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links">
+                    <div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links research-and-writing-row__links--condensed">
                         {more.articles.map((link, i) => (
                             <ResearchAndWritingLink
                                 shouldHideThumbnail