feat(author): style header

site/gdocs/components/ArticleBlock.tsx

@@ -113,7 +113,7 @@ const layouts: { [key in Container]: Layouts} = {
         ["chart"]: "span-cols-8 span-lg-cols-9 span-md-cols-12",
     },
     ["author-header"]: {
-        ["default"]: "span-cols-8",
+        ["default"]: "span-cols-6",
         ["image"]: "span-cols-2",
         ["socials"]: "span-cols-3",
     },

site/gdocs/pages/Author.scss

@@ -0,0 +1,53 @@
+.author-header {
+    margin: 56px 0;
+}
+
+.author-header__name {
+    @include display-1-semibold;
+    margin-top: 0;
+    margin-bottom: 8px;
+}
+
+.author-header__role {
+    @include body-1-regular;
+    color: $blue-60;
+}
+
+.author-header__bio {
+    @include body-1-regular;
+    margin-top: 8px;
+    color: $blue-90;
+}
+
+.author-header__portrait {
+    margin-top: 0;
+    margin-bottom: 24px;
+    img {
+        border-radius: 50%;
+    }
+}
+
+.article-block__socials {
+    color: $blue-60;
+    @include body-3-medium;
+
+    ul {
+        margin-left: 24px;
+        list-style-type: none;
+        list-style-position: inside;
+    }
+
+    li {
+        margin-bottom: 16px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    a {
+        @include owid-link-60;
+    }
+    svg {
+        margin-right: 8px;
+    }
+}

site/gdocs/pages/Author.tsx

@@ -6,6 +6,7 @@ import {
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import Image from "../components/Image.js"
 import ArticleBlock, { getLayout } from "../components/ArticleBlock.js"
+import cx from "classnames"
 
 export interface AuthorProps {
     content: OwidGdocAuthorContent
@@ -22,11 +23,11 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
 
     return (
         <section className="author-header grid grid-cols-12-full-width span-cols-14">
-            <div className="author-header__content span-cols-8 col-start-2">
-                <h1 className="author-header__name h1-bold">{title}</h1>
-                <div className="author-header__role body-2-regular">{role}</div>
+            <div className="grid grid-cols-8 span-cols-8 col-start-2">
+                <h1 className="author-header__name span-cols-7">{title}</h1>
+                <div className="author-header__role span-cols-7">{role}</div>
                 {bio?.length && (
-                    <div className="author-header__bio grid grid-cols-8 span-cols-8 body-2-regular">
+                    <div className="author-header__bio grid grid-cols-8 span-cols-8">
                         <ArticleBlocks
                             blocks={bio}
                             containerType="author-header"
@@ -39,7 +40,10 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
                     <Image
                         filename={featuredImage}
                         alt={`Portrait of ${title}`}
-                        className={getLayout("image", "author-header")}
+                        className={cx(
+                            "author-header__portrait",
+                            getLayout("image", "author-header")
+                        )}
                         containerType="author-header"
                     />
                 )}

site/owid.scss

@@ -103,6 +103,7 @@
 @import "./DataPageContent.scss";
 @import "./detailsOnDemand.scss";
 @import "./gdocs/pages/DataInsight.scss";
+@import "./gdocs/pages/Author.scss";
 
 @import "css/donate.scss";
 @import "./ThankYouPage.scss";