From 2ca5202d7b7d9b0b88e5b8393965841fe0ca857e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Tue, 10 Dec 2024 15:09:26 +0100
Subject: [PATCH] Update about page styles

---
 db/model/Gdoc/rawToEnriched.ts         |  1 -
 site/gdocs/components/ArticleBlock.tsx |  6 +++
 site/gdocs/components/People.scss      |  2 +-
 site/gdocs/components/Person.scss      |  3 +-
 site/gdocs/pages/AboutPage.scss        | 66 +++++++++++++++++++-------
 5 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
index b964cb04364..5f74a325b4f 100644
--- a/db/model/Gdoc/rawToEnriched.ts
+++ b/db/model/Gdoc/rawToEnriched.ts
@@ -823,7 +823,6 @@ const parsePerson = (raw: RawBlockPerson): EnrichedBlockPerson => {
         return createError({ message: "Person must have a name" })
     }
 
-    console.log("value", raw.value)
     return {
         type: "person",
         image: raw.value.image,
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index a6b7cb1592a..a10831d52c9 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -122,6 +122,12 @@ const layouts: { [key in Container]: Layouts} = {
         ["default"]: "grid col-start-2 span-cols-12",
         ["people"]: "col-start-2 span-cols-8 col-md-start-2 span-md-cols-12",
         ["donors"]: "grid grid-cols-12-full-width col-start-1 col-end-limit",
+        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left"]: "grid span-cols-12 col-start-2",
+        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right"]: "grid span-cols-12 col-start-2",
     },
     ["author-header"]: {
         ["default"]: "span-cols-8",
diff --git a/site/gdocs/components/People.scss b/site/gdocs/components/People.scss
index d605aea0df3..7dd5d37879b 100644
--- a/site/gdocs/components/People.scss
+++ b/site/gdocs/components/People.scss
@@ -1,5 +1,5 @@
 .people {
-    gap: var(--grid-gap);
+    row-gap: 16px;
 }
 
 .people-cols-2 {
diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
index 6e9dedea7a2..6f49bc591d5 100644
--- a/site/gdocs/components/Person.scss
+++ b/site/gdocs/components/Person.scss
@@ -1,6 +1,7 @@
 .person {
     display: flex;
     gap: var(--grid-gap);
+    margin-bottom: 8px;
 
     @include sm-only {
         flex-direction: column;
@@ -46,7 +47,7 @@
 
 .person-socials {
     margin-top: 16px;
-    margin-bottom: var(--grid-gap);
+    margin-bottom: 16px;
 
     ul {
         display: flex;
diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
index 643ba07e605..91651cb23e9 100644
--- a/site/gdocs/pages/AboutPage.scss
+++ b/site/gdocs/pages/AboutPage.scss
@@ -50,37 +50,71 @@
         margin-bottom: 0;
     }
 
-    h2 {
+    h2.article-block__heading {
         @include h1-semibold;
         color: $blue-60;
+        margin-top: 0;
+
+        &:has(+ .article-block__side-by-side) {
+            margin-bottom: 8px;
+        }
+    }
+
+    h3.article-block__heading {
+        @include h2-bold;
+        margin-bottom: 16px;
+        margin-top: 16px;
+    }
+
+    h4.article-block__heading {
+        @include h3-bold;
+        margin-bottom: 16px;
+    }
+
+    h5.article-block__heading {
+        color: $blue-60;
     }
 
-    h2:first-of-type {
+    .article-block__heading + .article-block__heading {
         margin-top: 0;
     }
 
+    .grid .article-block__text + .h2-bold,
+    .grid .article-block__list + .h2-bold,
+    .grid .article-block__text + .h3-bold,
+    .grid .article-block__list + .h3-bold,
+    .grid .article-block__text + .h4-semibold,
+    .grid .article-block__list + .h4-semibold {
+        margin-top: 16px;
+    }
+
     hr {
-        margin: 40px 0;
+        margin: 16px 0 40px 0;
     }
 
-    // Remove some margins since margins don't collapse in display: grid.
-    .article-block__side-by-side {
-        margin: 0;
+    .article-block__callout {
+        margin-top: 0;
+        margin-bottom: 24px;
     }
 
-    hr + .article-block__side-by-side {
-        h2 {
-            margin-top: 0;
-        }
+    .article-block__image {
+        margin: 0 0 24px;
+    }
 
-        *:last-child {
-            margin-bottom: 0;
-        }
+    .article-block__chart {
+        margin-bottom: 24px;
     }
 
-    .article-block__side-by-side:has(+ hr) {
-        *:last-child {
-            margin-bottom: 0;
+    .article-block__prominent-link {
+        margin-bottom: 24px;
+    }
+
+    // Remove some margins since margins don't collapse in display: grid.
+    .article-block__side-by-side,
+    .article-block__sticky-left,
+    .article-block__sticky-right {
+        @include md-up {
+            margin: 0;
         }
     }