diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
index d3a9d6e1912..b11d4a36b08 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -293,7 +293,12 @@ export { Url, setWindowUrl, getWindowUrl } from "./urls/Url.js"
export { type UrlMigration, performUrlMigrations } from "./urls/UrlMigration.js"
-export { camelCaseProperties, titleCase, toAsciiQuotes } from "./string.js"
+export {
+ camelCaseProperties,
+ titleCase,
+ toAsciiQuotes,
+ removeDiacritics,
+} from "./string.js"
export { serializeJSONForHTML, deserializeJSONFromHTML } from "./serializers.js"
diff --git a/packages/@ourworldindata/utils/src/string.ts b/packages/@ourworldindata/utils/src/string.ts
index b6dae99eaee..056fe1e7c8e 100644
--- a/packages/@ourworldindata/utils/src/string.ts
+++ b/packages/@ourworldindata/utils/src/string.ts
@@ -35,3 +35,8 @@ export const titleCase = (str: string): string => {
export function toAsciiQuotes(str: string): string {
return str.replace(/[“”]/g, '"').replace(/[‘’]/g, "'")
}
+
+// https://stackoverflow.com/a/37511463/9846837
+export function removeDiacritics(str: string): string {
+ return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+}
diff --git a/site/gdocs/components/Donors.tsx b/site/gdocs/components/Donors.tsx
index 34970caffb3..f3d05db2475 100644
--- a/site/gdocs/components/Donors.tsx
+++ b/site/gdocs/components/Donors.tsx
@@ -1,12 +1,14 @@
import * as React from "react"
-import { groupBy } from "@ourworldindata/utils"
+import { groupBy, removeDiacritics } from "@ourworldindata/utils"
import { useDonors } from "../utils.js"
export default function Donors({ className }: { className?: string }) {
const donors = useDonors()
if (!donors) return null
- const donorsByLetter = groupBy(donors, (donor) => donor[0])
+ const donorsByLetter = groupBy(donors, (donor) =>
+ removeDiacritics(donor[0].toUpperCase())
+ )
return (
diff --git a/site/gdocs/components/People.scss b/site/gdocs/components/People.scss
index 2537255eea7..fa4ac6ac264 100644
--- a/site/gdocs/components/People.scss
+++ b/site/gdocs/components/People.scss
@@ -1,5 +1,11 @@
.people {
row-gap: 16px;
+
+ .article-block__text,
+ .article-block__list,
+ .article-block__numbered-list {
+ font-size: 16px;
+ }
}
.people-cols-2 {
@@ -15,6 +21,10 @@
}
.people-cols-4 {
+ .person-heading {
+ font-size: 18px;
+ }
+
@include lg-up {
.article-block__text {
@include body-3-medium;
diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
index 6f49bc591d5..26ad65283a4 100644
--- a/site/gdocs/components/Person.scss
+++ b/site/gdocs/components/Person.scss
@@ -21,6 +21,10 @@
}
.person-image {
+ picture {
+ display: flex; // Fix extra padding at the bottom.
+ }
+
img {
border-radius: 50%;
}
@@ -42,6 +46,7 @@
}
.person-title {
+ line-height: 19px;
color: $blue-60;
}
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index d91a4cf958c..0fe67ca4bf9 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -464,14 +464,11 @@ h3.article-block__heading {
}
}
-.image--has-outline + .article-block__image-caption {
- margin-top: 8px;
-}
-
.article-block__image-caption {
@include body-3-medium-italic;
color: $blue-60;
text-align: center;
+ margin-top: 16px;
}
.article-block__chart + .article-block__heading {
diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
index 7a32487fd0a..436b27a151d 100644
--- a/site/gdocs/pages/AboutPage.scss
+++ b/site/gdocs/pages/AboutPage.scss
@@ -54,10 +54,6 @@
@include h1-semibold;
color: $blue-60;
margin-top: 0;
-
- &:has(+ .article-block__side-by-side) {
- margin-bottom: 8px;
- }
}
h3.article-block__heading {
@@ -97,18 +93,19 @@
margin-bottom: 24px;
}
- .article-block__chart {
- margin-bottom: 24px;
- }
-
.article-block__code-snippet {
margin-bottom: 16px;
}
+ .article-block__chart,
.article-block__image {
margin: 0 0 24px;
}
+ .article-block__people + .article-block__heading {
+ margin-top: 40px;
+ }
+
.article-block__prominent-link {
margin-bottom: 24px;
}
@@ -122,6 +119,12 @@
}
}
+ .article-block__side-by-side {
+ :first-child {
+ margin-top: 0;
+ }
+ }
+
.article-block__donors {
margin-top: 32px;
padding-top: 40px;