💄 (sources) minor css tweaks (#3051)

* 💄 (sources) make data citation smaller on smaller screens * 💄 (sources) minor style tweaks
owid · Jan 3, 2024 · 80956e3 · 80956e3
1 parent 9bc5aa7
commit 80956e3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
@@ -6,12 +6,11 @@ export const DataCitation = (props: {
     citationLong: string
 }) => {
     return (
-        <>
+        <div className="data-citation">
             {props.citationShort && (
                 <>
                     <p className="citation__paragraph">
                         <span className="citation__type">In-line citation</span>
-                        <br />
                         If you have limited space (e.g. in data visualizations),
                         you can use this abbreviated in-line citation:
                     </p>
@@ -34,6 +33,6 @@ export const DataCitation = (props: {
                     />
                 </>
             )}
-        </>
+        </div>
     )
 }
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -125,12 +125,19 @@
             margin-right: $tab-gap;
         }
 
+        .data-citation .wp-code-snippet {
+            margin-bottom: 16px;
+        }
+
         .citation__paragraph {
             color: $light-text;
         }
 
         .citation__type {
+            display: block;
+            line-height: 1.5;
             color: $dark-text;
+            font-weight: 500;
         }
 
         .indicator-processing .indicator-processing__link {
@@ -147,11 +154,6 @@
             &:hover {
                 text-decoration: none;
             }
-
-            svg {
-                //display: inline-block;
-                //transform: rotate(-90deg);
-            }
         }
     }
 }
@@ -188,7 +190,9 @@
         }
 
         .indicator-descriptions .key-info__learn-more,
-        .indicator-processing .indicator-processing__link {
+        .indicator-processing .indicator-processing__link,
+        .citation__paragraph,
+        .citation__type {
             font-size: var(--text-small);
         }
     }

diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
@@ -498,6 +498,7 @@
     }
 
     .citation__type {
+        display: block;
         color: $blue-90;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -498,6 +498,7 @@ @@
         }
         .citation__type {
+            display: block;
             color: $blue-90;
         }
@@ Expand Down @@