Skip to content

Commit

Permalink
fix(r&w): font sizes and row gap (#3263)
Browse files Browse the repository at this point in the history 
closes #3265, #3264 

Small design fixes to the research and writing block used on topic pages, and soon on author pages (#3224)

Testing page: http://staging-site-fix-style-research-writing/co2-and-greenhouse-gas-emissions#research-writing

see [figma](https://www.figma.com/file/Tm4bd2QXmrAR4m7UfWKAle/%5BProject%5D-Author-Pages?type=design&node-id=153-1701&mode=design&t=9eSHnR0VM8SBgAVD-0)
  • Loading branch information
@mlbrgl
mlbrgl authored Mar 4, 2024
2 parents 745c75e + 751e8db commit 4749caa
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 77 deletions.
84 changes: 40 additions & 44 deletions site/gdocs/components/ResearchAndWriting.scss
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,49 @@
$rw-margin-bottom-grid-cell: 4px;

.article-block__research-and-writing {
margin-bottom: 40px;

> h1 {
font-size: 32px;
margin-bottom: 40px;

// Only the first large thumbnail, the "shorts" section has a margin
// so the second thumbnail doesn't need any
+ .research-and-writing-link {
@include md-down {
margin-bottom: 16px;
}
}
}
}

.research-and-writing-row h2 {
margin-top: 32px;
.research-and-writing-row__heading {
// The assumption here is that the last item of the cell always has a
// margin-bottom of 8px, whether it is author names (topic pages) or an
// excerpt (author pages). The calculation is kept visible as a way to
// better document what is happening, and to preserve the design intent in
// code.
margin-top: 32px - $rw-margin-bottom-grid-cell;
margin-bottom: 24px;
color: $blue-50;
}

.research-and-writing-row__link-container {
.research-and-writing-row__links {
row-gap: 40px - $rw-margin-bottom-grid-cell;

@include sm-only {
display: flex;
overflow-x: auto;
scrollbar-width: thin;
}
.research-and-writing-link {
h3 {
@include h3-bold;
margin-top: 16px;
margin-bottom: 8px;
}
@include sm-only {
flex: 1 0 80%;
}
}
}

.research-and-writing-link {
h2,
h3 {
@include owid-link-90;
margin-top: 16px;
margin-bottom: 8px;
text-decoration: none;
}
.research-and-writing-row__links--condensed {
row-gap: 32px - $rw-margin-bottom-grid-cell;
}

&:hover {
h2,
h3 {
text-decoration: underline;
}
.research-and-writing-link {
@include sm-only {
flex: 1 0 80%;
}

.research-and-writing-link__description {
color: $blue-90;
margin-bottom: 8px;
margin-top: 0;
}
@include owid-link-90;
text-decoration: none;

.research-and-writing-link__authors {
color: $blue-60;
margin-bottom: 8px;
margin-top: 0;
&:hover .research-and-writing-row-link__title {
text-decoration: underline;
}

figure {
Expand All @@ -75,7 +54,7 @@
box-sizing: border-box;
position: relative;
overflow: hidden;
margin: 0;
margin: 0 0 12px;
}

img {
Expand All @@ -88,6 +67,23 @@
}
}

.research-and-writing-link__title {
margin-top: 0;
margin-bottom: $rw-margin-bottom-grid-cell;
}

.research-and-writing-link__description {
color: $blue-90;
margin-bottom: $rw-margin-bottom-grid-cell;
margin-top: 0;
}

.research-and-writing-link__authors {
color: $blue-60;
margin-bottom: $rw-margin-bottom-grid-cell;
margin-top: 0;
}

.research-and-writing-link--error {
background-color: rgba(255, 0, 0, 0.1);
padding: 24px;
Expand Down
79 changes: 46 additions & 33 deletions site/gdocs/components/ResearchAndWriting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type ResearchAndWritingProps = {
className?: string
} & EnrichedBlockResearchAndWriting

function ResearchAndWritingLinkContainer(
function ResearchAndWritingLink(
props: EnrichedBlockResearchAndWritingLink & {
className?: string
isSmall?: boolean
Expand Down Expand Up @@ -51,7 +51,12 @@ function ResearchAndWritingLinkContainer(

const heading = React.createElement(
isSmall ? "h3" : "h2",
{ className: isSmall ? "h3-bold" : "h2-bold" },
{
className: cx(
"research-and-writing-link__title",
isSmall ? "h3-bold" : "h2-bold"
),
},
title
)

Expand All @@ -62,28 +67,31 @@ function ResearchAndWritingLinkContainer(
target="_blank"
rel="noopener noreferrer"
>
<div>
{filename && !shouldHideThumbnail ? (
<figure>
<Image
filename={filename}
shouldLightbox={false}
containerType={isSmall ? "thumbnail" : "default"}
/>
</figure>
) : null}
{heading}
{subtitle && !shouldHideSubtitle ? (
<p className="research-and-writing-link__description body-1-regular">
{subtitle}
</p>
) : null}
{authors ? (
<p className="research-and-writing-link__authors body-3-medium-italic">
{formatAuthors({ authors })}
</p>
) : null}
</div>
{filename && !shouldHideThumbnail ? (
<figure>
<Image
filename={filename}
shouldLightbox={false}
containerType={isSmall ? "thumbnail" : "default"}
/>
</figure>
) : null}
{heading}
{subtitle && !shouldHideSubtitle ? (
<p
className={cx(
"research-and-writing-link__description",
isSmall ? "body-3-medium" : "body-2-regular"
)}
>
{subtitle}
</p>
) : null}
{authors ? (
<p className="research-and-writing-link__authors body-3-medium-italic">
{formatAuthors({ authors })}
</p>
) : null}
</a>
)
}
Expand All @@ -100,29 +108,32 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
<a className="deep-link" href={`#${RESEARCH_AND_WRITING_ID}`} />
</h1>
<div className="span-cols-12 research-and-writing-row">
<div className="grid research-and-writing-row__link-container">
<div className="grid research-and-writing-row__links">
{primary.map((link, i) => (
<ResearchAndWritingLinkContainer
<ResearchAndWritingLink
className="span-cols-6 span-sm-cols-12"
key={i}
{...link}
/>
))}
{secondary.map((link, i) => (
<ResearchAndWritingLinkContainer
<ResearchAndWritingLink
key={i}
className="span-cols-3 span-md-cols-6 span-sm-cols-12"
isSmall
{...link}
/>
))}
</div>
</div>
{rows.map((row, i) => (
<div key={i} className="span-cols-12 research-and-writing-row">
<h2 className="h2-bold">{row.heading}</h2>
<div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__link-container">
<h2 className="h2-bold research-and-writing-row__heading">
{row.heading}
</h2>
<div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links">
{row.articles.map((link, i) => (
<ResearchAndWritingLinkContainer
<ResearchAndWritingLink
shouldHideSubtitle
isSmall
className="span-cols-1"
Expand All @@ -135,10 +146,12 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
))}
{more ? (
<div className="span-cols-12 research-and-writing-row">
<h2 className="h2-bold">{more.heading}</h2>
<div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__link-container">
<h2 className="h2-bold research-and-writing-row__heading">
{more.heading}
</h2>
<div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links research-and-writing-row__links--condensed">
{more.articles.map((link, i) => (
<ResearchAndWritingLinkContainer
<ResearchAndWritingLink
shouldHideThumbnail
shouldHideSubtitle
isSmall
Expand Down

0 comments on commit 4749caa

Please sign in to comment.