diff --git a/site/gdocs/AllCharts.scss b/site/gdocs/AllCharts.scss index 33275ef188e..2cc769a98a5 100644 --- 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 index 05c15d4a697..990ca383fe4 100644 --- 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 (

Endnotes

-
    - {Object.values(definitions) +
      + {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 index 2463ddb2bc7..ffe9ea1deeb 100644 --- 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 index 405914ff0bb..4e5ffa41d05 100644 --- 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,