Merge pull request #2667 from owid/site-touchups

Site touchups
owid · Sep 27, 2023 · 91e2c53 · 91e2c53
2 parents 48cb429 + 02608f6
commit 91e2c53
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/site/gdocs/AllCharts.scss b/site/gdocs/AllCharts.scss
@@ -1,6 +1,6 @@
 .article-block__all-charts {
     h1.h1-semibold {
-        text-align: center;
+        margin-bottom: 40px;
     }
 
     figure[data-grapher-src] {

diff --git a/site/gdocs/Footnotes.tsx b/site/gdocs/Footnotes.tsx
@@ -1,6 +1,7 @@
 import { ENDNOTES_ID, RefDictionary } from "@ourworldindata/utils"
 import React from "react"
 import ArticleBlock from "./ArticleBlock.js"
+import cx from "classnames"
 
 export default function Footnotes({
     definitions,
@@ -10,12 +11,19 @@ export default function Footnotes({
     if (!definitions) {
         return null
     }
+
+    const definitionsArray = Object.values(definitions)
     return (
         <section className="footnote-container grid grid-cols-12-full-width col-start-1 col-end-limit">
             <div className="col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12">
                 <h3 id={ENDNOTES_ID}>Endnotes</h3>
-                <ol className="footnote-list">
-                    {Object.values(definitions)
+                <ol
+                    className={cx("footnote-list", {
+                        "footnote-list--single-column":
+                            definitionsArray.length === 1,
+                    })}
+                >
+                    {definitionsArray
                         .sort((a, b) => a.index - b.index)
                         .map((ref) => {
                             return (

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
@@ -15,11 +15,12 @@
 }
 
 .centered-article-container {
+    // !important because we never want this to be overwritten
     .ref {
-        color: $vermillion;
-        text-decoration: none;
+        color: $vermillion !important;
+        text-decoration: none !important;
         &:visited {
-            color: $vermillion;
+            color: $vermillion !important;
         }
     }
 }
@@ -328,6 +329,9 @@ h3.article-block__heading.has-supertitle {
     }
     .footnote-list {
         column-count: 2;
+        &.footnote-list--single-column {
+            column-count: 1;
+        }
         column-span: none;
         column-gap: 48px;
         color: $blue-60;
@@ -498,7 +502,7 @@ h3.article-block__heading.has-supertitle {
 .article-block__explorer {
     // width is necessary for containerNode.getBoundingClientRect() in Grapher.renderGrapherIntoContainer
     width: 100%;
-    margin: 24px 0 48px 0;
+    margin: 16px 0 48px 0;
 
     figure {
         margin: 0;

diff --git a/site/gdocs/topic-page.scss b/site/gdocs/topic-page.scss
@@ -173,12 +173,22 @@
     }
 }
 
-.article-block__gray-section {
+// small amount of extra padding to match figma designs which is 40px total for key-insights heading
+.article-block__heading + .wp-block-owid-key-insights {
+    margin-top: 8px;
+}
+
+.centered-article-container--topic-page .article-block__gray-section {
     > h1 {
-        text-align: center;
         // Countering the gray-section padding to make this have 32px 16px
         margin-top: -16px;
         margin-bottom: 16px;
+
+        // Special exception for the "Explore data on Blah" heading (which is a gdoc .article-block__heading)
+        // so that it's left-aligned like the rest of the topic page component headings
+        &[id^="explore"] {
+            grid-column-start: 2;
+        }
     }
 
     .article-block__text,