feat(author): dark header

owid · Mar 13, 2024 · c838fec · c838fec
1 parent c6293c3
commit c838fec
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -9,6 +9,7 @@ $amber: #f7c020;
 
 // Blue shades
 $blue-100: #002147;
+$blue-95: #112e4f;
 $blue-90: #1d3d63;
 $blue-60: #577291;
 $blue-65: #46688f;

diff --git a/site/gdocs/pages/Author.scss b/site/gdocs/pages/Author.scss
@@ -1,15 +1,24 @@
 .author-header {
-    margin: 56px 0;
+    padding-bottom: 24px;
+    padding-top: 16px;
+    @include sm-up {
+        padding-top: 40px;
+    }
+    background-color: $blue-95;
+
+    .article-block__text {
+        @include body-2-regular;
+        color: $white;
+    }
 }
 
-.author-header__role {
-    @include body-2-regular;
-    color: $blue-60;
+.author-header__name {
+    color: $amber;
 }
 
-.article-block__text {
+.author-header__role {
     @include body-2-regular;
-    color: $blue-90;
+    color: $blue-40;
 }
 
 .author-header__portrait {
@@ -21,7 +30,6 @@
 }
 
 .article-block__socials {
-    color: $blue-60;
     @include body-3-medium;
 
     ul {
@@ -30,14 +38,19 @@
     }
 
     a {
-        @include owid-link-60;
+        color: $blue-20;
+        &:hover {
+            text-decoration: underline;
+            text-underline-offset: 4px;
+        }
     }
     svg {
         margin-right: 8px;
+        color: $blue-50;
     }
 }
 
-.author-header--sm {
+.author-header__sm {
     @include sm-up {
         display: none;
     }
@@ -66,7 +79,7 @@
     }
 }
 
-.author-header--md {
+.author-header__md {
     display: none;
     @include sm-up {
         display: grid;

diff --git a/site/gdocs/pages/Author.tsx b/site/gdocs/pages/Author.tsx
@@ -22,8 +22,8 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
     } = gdoc.content
 
     return (
-        <>
-            <section className="author-header author-header--sm grid grid-cols-12-full-width span-cols-14">
+        <div className="author-header grid grid-cols-12-full-width span-cols-14">
+            <section className="author-header__sm grid grid-cols-12-full-width span-cols-14">
                 <div className="col-start-2 span-cols-8">
                     <h1 className="author-header__name">{title}</h1>
                     <div className="author-header__role">{role}</div>
@@ -48,7 +48,7 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
                     <ArticleBlocks blocks={bio} containerType="author-header" />
                 )}
             </section>
-            <section className="author-header author-header--md grid grid-cols-12-full-width span-cols-14">
+            <section className="author-header__md grid grid-cols-12-full-width span-cols-14">
                 <div className="grid grid-cols-8 span-cols-8 col-start-2">
                     <h1 className="author-header__name span-cols-8">{title}</h1>
                     <div className="author-header__role span-cols-8">
@@ -81,14 +81,10 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
                     )}
                 </div>
             </section>
-        </>
+        </div>
     )
 }
 
 export const Author = (gdoc: OwidGdocAuthorInterface): JSX.Element => {
-    return (
-        <div className="grid grid-cols-12-full-width">
-            <AuthorHeader {...gdoc} />
-        </div>
-    )
+    return <AuthorHeader {...gdoc} />
 }