Update about page styles

owid · Dec 11, 2024 · 1cfc6ca · 1cfc6ca
1 parent c2edb20
commit 1cfc6ca
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
         }
     }