feat(author): header mobile styles

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

Hide file tree

Showing 3 changed files with 134 additions and 45 deletions.
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
@@ -113,9 +113,10 @@ const layouts: { [key in Container]: Layouts} = {
         ["chart"]: "span-cols-8 span-lg-cols-9 span-md-cols-12",
     },
     ["author-header"]: {
-        ["default"]: "span-cols-6",
-        ["image"]: "span-cols-2",
-        ["socials"]: "span-cols-3",
+        ["default"]: "span-cols-8",
+        ["image"]: "span-cols-2 span-md-cols-3",
+        ["text"]: "span-cols-6 span-md-cols-8 col-sm-start-2 span-sm-cols-12",
+        ["socials"]: "span-cols-3 col-sm-start-2 span-sm-cols-12",
     },
     ["sticky-right-left-column"]: {
         ["chart"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",

diff --git a/site/gdocs/pages/Author.scss b/site/gdocs/pages/Author.scss
@@ -2,26 +2,19 @@
     margin: 56px 0;
 }
 
-.author-header__name {
-    @include display-1-semibold;
-    margin-top: 0;
-    margin-bottom: 8px;
-}
-
 .author-header__role {
-    @include body-1-regular;
+    @include body-2-regular;
     color: $blue-60;
 }
 
-.author-header__bio {
-    @include body-1-regular;
-    margin-top: 8px;
+.article-block__text {
+    @include body-2-regular;
     color: $blue-90;
 }
 
 .author-header__portrait {
     margin-top: 0;
-    margin-bottom: 24px;
+    margin-bottom: 0;
     img {
         border-radius: 50%;
     }
@@ -32,22 +25,87 @@
     @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;
     }
 }
+
+.author-header--sm {
+    @include sm-up {
+        display: none;
+    }
+
+    .author-header__name {
+        @include h2-bold;
+        margin-top: 8px;
+        margin-bottom: 4px;
+    }
+
+    .author-header__role {
+        margin-bottom: 24px;
+    }
+
+    .article-block__socials {
+        margin-bottom: 32px;
+        ul {
+            display: flex;
+            li {
+                margin-right: 16px;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
+
+.author-header--md {
+    display: none;
+    @include sm-up {
+        display: grid;
+    }
+
+    .author-header__name {
+        @include display-2-semibold;
+        margin-top: 0;
+        margin-bottom: 4px;
+
+        @include md-up {
+            @include display-1-semibold;
+            margin-top: 0;
+            margin-bottom: 8px;
+        }
+    }
+
+    .article-block__text {
+        margin-top: 8px;
+        @include md-up {
+            @include body-1-regular;
+        }
+    }
+
+    .author-header__role {
+        @include md-up {
+            @include body-1-regular;
+        }
+    }
+
+    .article-block__socials {
+        margin-top: 24px;
+        margin-left: 24px;
+
+        li {
+            margin-bottom: 16px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
diff --git a/site/gdocs/pages/Author.tsx b/site/gdocs/pages/Author.tsx
@@ -22,36 +22,66 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
     } = gdoc.content
 
     return (
-        <section className="author-header 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-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">
-                        <ArticleBlocks
-                            blocks={bio}
+        <>
+            <section className="author-header 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>
+                </div>
+                {featuredImage && (
+                    <div className="grid grid-cols-3 col-start-11 span-cols-3">
+                        <Image
+                            filename={featuredImage}
+                            alt={`Portrait of ${title}`}
+                            className={cx(
+                                "author-header__portrait",
+                                getLayout("image", "author-header")
+                            )}
                             containerType="author-header"
                         />
                     </div>
                 )}
-            </div>
-            <div className="grid grid-cols-3 span-cols-3 col-start-10">
-                {featuredImage && (
-                    <Image
-                        filename={featuredImage}
-                        alt={`Portrait of ${title}`}
-                        className={cx(
-                            "author-header__portrait",
-                            getLayout("image", "author-header")
-                        )}
-                        containerType="author-header"
-                    />
-                )}
                 {socials && (
                     <ArticleBlock b={socials} containerType="author-header" />
                 )}
-            </div>
-        </section>
+                {bio?.length && (
+                    <ArticleBlocks blocks={bio} containerType="author-header" />
+                )}
+            </section>
+            <section className="author-header 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">
+                        {role}
+                    </div>
+                    {bio?.length && (
+                        <ArticleBlocks
+                            blocks={bio}
+                            containerType="author-header"
+                        />
+                    )}
+                </div>
+                <div className="grid grid-cols-3 col-start-11 span-cols-3">
+                    {featuredImage && (
+                        <Image
+                            filename={featuredImage}
+                            alt={`Portrait of ${title}`}
+                            className={cx(
+                                "author-header__portrait",
+                                getLayout("image", "author-header")
+                            )}
+                            containerType="author-header"
+                        />
+                    )}
+                    {socials && (
+                        <ArticleBlock
+                            b={socials}
+                            containerType="author-header"
+                        />
+                    )}
+                </div>
+            </section>
+        </>
     )
 }