Fix callout block styles (#4636)

owid · Mar 7, 2025 · 5327913 · 5327913
1 parent 36d436c
commit 5327913
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/site/gdocs/components/Callout.scss b/site/gdocs/components/Callout.scss
@@ -1,3 +1,10 @@
+.callout-heading {
+    @include h4-semibold;
+    margin-top: 0;
+    margin-bottom: 8px;
+    color: $blue-90;
+}
+
 .callout-icon {
     margin-right: 8px;
 }
diff --git a/site/gdocs/components/Callout.tsx b/site/gdocs/components/Callout.tsx
@@ -17,9 +17,13 @@ export default function Callout({
     const icon = block.icon ? iconMap[block.icon] : null
     return (
         <div className={className}>
-            {icon && <FontAwesomeIcon className="callout-icon" icon={icon} />}
             {block.title ? (
-                <h4 className="h4-semibold">{block.title}</h4>
+                <h4 className="callout-heading">
+                    {icon && (
+                        <FontAwesomeIcon className="callout-icon" icon={icon} />
+                    )}
+                    {block.title}
+                </h4>
             ) : null}
             <ArticleBlocks blocks={block.text} />
         </div>

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -1167,23 +1167,26 @@ div.raw-html-table__container {
 
 // A small grey block
 .article-block__callout {
-    h4 {
-        display: inline;
-        color: $blue-90;
-        margin-bottom: 8px;
-        margin-top: 8px;
+    .article-block__text,
+    .article-block__list,
+    .article-block__html,
+    .article-block__numbered-list {
+        @include body-3-regular;
+        margin-bottom: 0;
+
+        &:not(:last-child) {
+            margin-bottom: 8px;
+        }
     }
+
     a {
         @include owid-link-90;
     }
     color: $blue-60;
     background: $gray-10;
     padding: 16px 24px;
     border-radius: 8px;
-    margin: 32px 0;
-    p:last-child {
-        margin-bottom: 8px;
-    }
+    margin: 8px 0 32px;
 
     + .article-block__horizontal-rule {
         margin-top: 24px;

diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
@@ -91,10 +91,6 @@
     .article-block__callout {
         margin-top: 0;
         margin-bottom: 24px;
-
-        .article-block__text {
-            font-size: 14px;
-        }
     }
 
     .article-block__code-snippet {