enhance(dp): line break before title fragments

owid · Jul 18, 2024 · 7ca92b2 · 7ca92b2
1 parent c518c5c
commit 7ca92b2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/site/KeyDataTable.scss b/site/KeyDataTable.scss
@@ -27,6 +27,14 @@
 }
 
 .key-data-description-short__title {
+    color: $blue-50;
     @include h5-black-caps;
+}
+
+.key-data-description-short__title-fragments {
+    color: $blue-50;
+    @include h6-black-caps;
+    font-weight: 600;
+    letter-spacing: 0.05rem;
     margin-bottom: 8px;
 }
diff --git a/site/KeyDataTable.tsx b/site/KeyDataTable.tsx
@@ -34,20 +34,17 @@ export default function KeyDataTable({
         <div className="key-data-block grid grid-cols-4 grid-sm-cols-12">
             {datapageData.descriptionShort && (
                 <div className="key-data span-cols-4 span-sm-cols-12">
-                    <div className="key-data__title key-data-description-short__title">
+                    <div className="key-data-description-short__title">
                         {datapageData.title.title}
-                        {(datapageData.attributionShort ||
-                            datapageData.titleVariant) && (
-                            <>
-                                {" "}
-                                <span className="title-fragments">
-                                    {joinTitleFragments(
-                                        datapageData.attributionShort,
-                                        datapageData.titleVariant
-                                    )}
-                                </span>
-                            </>
-                        )}
+                    </div>
+                    <div className="key-data-description-short__title-fragments">
+                        {
+                            // This method may return undefined if both fields are empty
+                            joinTitleFragments(
+                                datapageData.attributionShort,
+                                datapageData.titleVariant
+                            )
+                        }
                     </div>
                     <div>
                         <SimpleMarkdownText