mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 08:31:23 -05:00
Use larger fort (18px) for some paragraphs, per spec
This commit is contained in:
seotts
parent
a22da02cc2
commit
3e287d41e0
4 changed files with 56 additions and 36 deletions
|
|
@ -19,12 +19,16 @@ const TextAndMediaSnippet = props => (
|
|||
<h4>{props.title}</h4>
|
||||
{props.children.length > 0 ?
|
||||
<div>
|
||||
{/* eslint-disable */}
|
||||
{props.children.map((paragraph, i) => {
|
||||
return <p key={i}>{paragraph}</p>;
|
||||
})}
|
||||
{props.children.map((paragraph, i) => (
|
||||
<p
|
||||
className={i === 0 && props.firstPBig ? 'p-big' : null}
|
||||
key={i}
|
||||
>
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div> :
|
||||
<p>
|
||||
<p className={props.firstPBig ? 'p-big' : 'bananas'}>
|
||||
{props.children}
|
||||
</p>
|
||||
}
|
||||
|
|
@ -103,14 +107,15 @@ const TextAndMediaSnippet = props => (
|
|||
);
|
||||
|
||||
TextAndMediaSnippet.propTypes = {
|
||||
children: PropTypes.node,
|
||||
title: PropTypes.string,
|
||||
largeImage: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
videoId: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
alt: PropTypes.string,
|
||||
spinnerColor: PropTypes.string
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
largeImage: PropTypes.string,
|
||||
firstPBig: PropTypes.bool,
|
||||
spinnerColor: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
videoId: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = TextAndMediaSnippet;
|
||||
|
|
|
|||
|
|
@ -116,6 +116,10 @@
|
|||
font-size: 1rem;
|
||||
text-align: left;
|
||||
|
||||
&.p-big {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -441,15 +441,15 @@ class AnnualReport extends React.Component {
|
|||
<p><FormattedMessage id="annualReport.2021.missionP1" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.missionP2" /></p>
|
||||
<h5><FormattedMessage id="annualReport.2021.visionHeader" /></h5>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.visionSubtitle" />
|
||||
</p>
|
||||
<h5><FormattedMessage id="annualReport.2021.missionHeader" /></h5>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.missionSubtitle" />
|
||||
</p>
|
||||
<h5><FormattedMessage id="annualReport.2021.valuesHeader" /></h5>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.valuesSubtitle" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -461,25 +461,25 @@ class AnnualReport extends React.Component {
|
|||
<FormattedMessage id="annualReport.2021.creativeExpressionTitle" />
|
||||
</h3>
|
||||
</div>
|
||||
<p className="inner"><FormattedMessage id="annualReport.2021.creativeExpressionDescription" /></p>
|
||||
<p className="inner p-big"><FormattedMessage id="annualReport.2021.creativeExpressionDescription" /></p>
|
||||
</div>
|
||||
<div className="one-p equitable-opportunities">
|
||||
<div className="four-up-title equitable-opportunities">
|
||||
<h3><FormattedMessage id="annualReport.2021.EquitableOpportunitiesTitle" /></h3>
|
||||
</div>
|
||||
<p className="inner"><FormattedMessage id="annualReport.2021.EquitableOpportunitiesDescription" /></p>
|
||||
<p className="inner p-big"><FormattedMessage id="annualReport.2021.EquitableOpportunitiesDescription" /></p>
|
||||
</div>
|
||||
<div className="one-p progressive-improvement">
|
||||
<div className="four-up-title progressive-improvement">
|
||||
<h3><FormattedMessage id="annualReport.2021.progressiveImprovementTitle" /></h3>
|
||||
</div>
|
||||
<p className="inner"><FormattedMessage id="annualReport.2021.progressiveImprovementDescription" /></p>
|
||||
<p className="inner p-big"><FormattedMessage id="annualReport.2021.progressiveImprovementDescription" /></p>
|
||||
</div>
|
||||
<div className="one-p playful-engagement">
|
||||
<div className="four-up-title playful-engagement">
|
||||
<h3><FormattedMessage id="annualReport.2021.playfulEngagementTitle" /></h3>
|
||||
</div>
|
||||
<p className="inner"><FormattedMessage id="annualReport.2021.playfulEngagementDescription" /></p>
|
||||
<p className="inner p-big"><FormattedMessage id="annualReport.2021.playfulEngagementDescription" /></p>
|
||||
</div>
|
||||
{/* eslint-enable max-len */}
|
||||
</div>
|
||||
|
|
@ -494,7 +494,7 @@ class AnnualReport extends React.Component {
|
|||
<h2>
|
||||
<FormattedMessage id="annualReport.2021.reachTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.reachSubtitle" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -603,7 +603,7 @@ class AnnualReport extends React.Component {
|
|||
id="annualReport.2021.reachSaudiArabiaTitle"
|
||||
/>
|
||||
</h4>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.reachSaudiArabiaDescription"
|
||||
/>
|
||||
|
|
@ -644,7 +644,7 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.reachTranslationBlurb" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -765,7 +765,7 @@ class AnnualReport extends React.Component {
|
|||
<h4>
|
||||
<FormattedMessage id="annualReport.2021.SECWhatIs" />
|
||||
</h4>
|
||||
<p><FormattedMessage id="annualReport.2021.SECWhatIsP1" /></p>
|
||||
<p className="p-big"><FormattedMessage id="annualReport.2021.SECWhatIsP1" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.SECWhatIsP2" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.SECWhatIsP3" /></p>
|
||||
</div>
|
||||
|
|
@ -797,7 +797,7 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<div className="map">
|
||||
<p><FormattedMessage id="annualReport.2021.SECMapParagraph" /></p>
|
||||
<p className="p-big"><FormattedMessage id="annualReport.2021.SECMapParagraph" /></p>
|
||||
<img
|
||||
src="/images/annual-report/2021/1_SEC Section/Map.svg"
|
||||
alt={this.props.intl.formatMessage(
|
||||
|
|
@ -852,7 +852,7 @@ class AnnualReport extends React.Component {
|
|||
<p className="larger">
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightLocation" />
|
||||
</p>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightText1" />
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -902,7 +902,7 @@ class AnnualReport extends React.Component {
|
|||
{/* eslint-enable max-len */}
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightText1" />
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -926,7 +926,7 @@ class AnnualReport extends React.Component {
|
|||
<h4>
|
||||
<FormattedMessage id="annualReport.2021.SECWorkshops" />
|
||||
</h4>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.SECWorkshopsText" />
|
||||
</p>
|
||||
<h4 className="center">
|
||||
|
|
@ -1067,7 +1067,7 @@ class AnnualReport extends React.Component {
|
|||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
{/* eslint-disable max-len */}
|
||||
<TextAndMediaSnippet
|
||||
className="regular first"
|
||||
className="regular first p-big"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.accessDEICommittee'}
|
||||
)}
|
||||
|
|
@ -1076,6 +1076,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Committees start illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeText"
|
||||
|
|
@ -1097,6 +1098,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Committees start illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeText"
|
||||
|
|
@ -1122,6 +1124,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Accessibility Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeAccessibilityText"
|
||||
|
|
@ -1144,6 +1147,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Accessibility Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeAccessibilityText"
|
||||
|
|
@ -1172,6 +1176,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeG-JEDIText"
|
||||
|
|
@ -1194,6 +1199,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeG-JEDIText"
|
||||
|
|
@ -1223,6 +1229,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeEquityXDesignText"
|
||||
|
|
@ -1244,6 +1251,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommitteeEquityXDesignText"
|
||||
|
|
@ -1371,7 +1379,7 @@ class AnnualReport extends React.Component {
|
|||
<h4>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchConference" />
|
||||
</h4>
|
||||
<p>
|
||||
<p className="p-bold">
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.communityScratchConferenceText1"
|
||||
values={{
|
||||
|
|
@ -1413,8 +1421,10 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/3_Community Section/Languages illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
className="p-big"
|
||||
id="annualReport.2021.communityVolunteerTranslatorsText"
|
||||
/>
|
||||
</TextAndMediaSnippet>
|
||||
|
|
@ -1429,6 +1439,7 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
type="image"
|
||||
largeImage="/images/annual-report/2021/3_Community Section/Languages illustration.svg"
|
||||
firstPBig
|
||||
>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.communityVolunteerTranslatorsText"
|
||||
|
|
@ -1456,7 +1467,7 @@ class AnnualReport extends React.Component {
|
|||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchCommunity" />
|
||||
</h3>
|
||||
<p>
|
||||
<p className="big-p">
|
||||
<FormattedMessage id="annualReport.2021.communityScratchCommunityIntro" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1805,7 +1816,7 @@ class AnnualReport extends React.Component {
|
|||
<div className="initiatives-subsection-content lab second">
|
||||
<div className="wide inner community">
|
||||
<div className="community-sds">
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText3" />
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -1843,7 +1854,7 @@ class AnnualReport extends React.Component {
|
|||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<div className="text">
|
||||
<p>
|
||||
<p className="p-big">
|
||||
{/* eslint-disable max-len */}
|
||||
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
|
||||
{/* eslint-enable max-len */}
|
||||
|
|
@ -1883,7 +1894,7 @@ class AnnualReport extends React.Component {
|
|||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<div className="text">
|
||||
<p>
|
||||
<p className="p-big">
|
||||
{/* eslint-disable max-len */}
|
||||
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
|
||||
{/* eslint-enable max-len */}
|
||||
|
|
@ -1949,7 +1960,7 @@ class AnnualReport extends React.Component {
|
|||
{/* eslint-enable max-len */}
|
||||
</div>
|
||||
<div className="community-sds">
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.communitySnapshot2Text2" />
|
||||
</p>
|
||||
<div className="sds-list">
|
||||
|
|
@ -2095,7 +2106,7 @@ class AnnualReport extends React.Component {
|
|||
<h2>
|
||||
<FormattedMessage id="annualReport.2021.supportersTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.supportersIntro" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1780,7 +1780,7 @@ img.comment-viz{
|
|||
padding: 0 15px;
|
||||
}
|
||||
p.subhed{
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.125rem;
|
||||
max-width: 500px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue