✨ improve explorer index page header

owid · Nov 25, 2024 · c4c196d · c4c196d
1 parent cfb10a1
commit c4c196d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/site/ExplorerIndexPage.scss b/site/ExplorerIndexPage.scss
@@ -1,7 +1,19 @@
 .explorer-index-page {
     .explorer-index-page__header {
-        background-color: $gray-10;
-        margin-bottom: 24px;
+        background-color: #f0f4fa;
+        margin-bottom: 16px;
+        padding-bottom: 24px;
+        .h1-semibold {
+            margin-top: 24px;
+            margin-bottom: 8px;
+            @include sm-up {
+                font-size: 2rem;
+            }
+        }
+        p {
+            margin: 0;
+            color: #46688f;
+        }
     }
     .explorer-index-page-list {
         background-color: #fff;

diff --git a/site/ExplorerIndexPage.tsx b/site/ExplorerIndexPage.tsx
@@ -28,10 +28,10 @@ export const ExplorerIndexPage = ({
                 <SiteHeader baseUrl={baseUrl} />
                 <main className="explorer-index-page grid grid-cols-12-full-width">
                     <header className="explorer-index-page__header grid grid-cols-12-full-width span-cols-14">
-                        <h1 className="display-2-semibold span-cols-12 col-start-2 collection-title">
+                        <h1 className="h1-semibold span-cols-12 col-start-2 collection-title">
                             Data Explorers
                         </h1>
-                        <p className="span-cols-8 col-start-2 span-md-cols-12 col-md-start-2 body-1-regular collection-explanation">
+                        <p className="span-cols-8 col-start-2 span-md-cols-12 col-md-start-2 body-2-regular collection-explanation">
                             Our data explorers gather many indicators together
                             to provide comprehensive overviews of their topics.
                         </p>