mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-04-02 00:03:04 -04:00
Use h3 in a bunch of spots instead of h4
This commit is contained in:
seotts
parent
adc687dcba
commit
3750166b4f
2 changed files with 43 additions and 41 deletions
src/views/annual-report/2021
|
|
@ -437,7 +437,7 @@ class AnnualReport extends React.Component {
|
|||
ref={this.setRef(SECTIONS.mission)}
|
||||
>
|
||||
<div className="inner">
|
||||
<h4><FormattedMessage id="annualReport.2021.missionTitle" /></h4>
|
||||
<h3><FormattedMessage id="annualReport.2021.missionTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.2021.missionP1" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.missionP2" /></p>
|
||||
<h5><FormattedMessage id="annualReport.2021.visionHeader" /></h5>
|
||||
|
|
@ -491,9 +491,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="inner">
|
||||
<div className="reach-intro">
|
||||
<div className="hed">
|
||||
<h2>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.reachTitle" />
|
||||
</h2>
|
||||
</h3>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.reachSubtitle" />
|
||||
</p>
|
||||
|
|
@ -762,9 +762,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="initiatives-subsection-content SEC">
|
||||
<div className="content two-up">
|
||||
<div className="p-content">
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.SECWhatIs" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="p-big"><FormattedMessage id="annualReport.2021.SECWhatIsP1" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.SECWhatIsP2" /></p>
|
||||
<p><FormattedMessage id="annualReport.2021.SECWhatIsP3" /></p>
|
||||
|
|
@ -846,9 +846,9 @@ class AnnualReport extends React.Component {
|
|||
color="blue"
|
||||
type="spotlight"
|
||||
/>
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="larger">
|
||||
<b>
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightLocation" />
|
||||
|
|
@ -886,9 +886,9 @@ class AnnualReport extends React.Component {
|
|||
color="blue"
|
||||
type="spotlight"
|
||||
/>
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="larger">
|
||||
<b>
|
||||
<FormattedMessage id="annualReport.2021.SECSpotlightLocation" />
|
||||
|
|
@ -927,15 +927,15 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<div className="inner stacked">
|
||||
<div className="workshop">
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.SECWorkshops" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="p-big">
|
||||
<FormattedMessage id="annualReport.2021.SECWorkshopsText" />
|
||||
</p>
|
||||
<h4 className="center">
|
||||
<h3 className="center">
|
||||
<FormattedMessage id="annualReport.2021.SECWorkshopsSubtitle" />
|
||||
</h4>
|
||||
</h3>
|
||||
<img
|
||||
className="sec-image"
|
||||
src="/images/annual-report/2021/1_SEC Section/Workshops.svg"
|
||||
|
|
@ -967,9 +967,9 @@ class AnnualReport extends React.Component {
|
|||
color="green"
|
||||
type="spotlight"
|
||||
/>
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.accessASL" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="subhed">
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessASLText"
|
||||
|
|
@ -1071,7 +1071,7 @@ class AnnualReport extends React.Component {
|
|||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
{/* eslint-disable max-len */}
|
||||
<TextAndMediaSnippet
|
||||
className="regular first p-big"
|
||||
className="regular first medium-title"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.accessDEICommittee'}
|
||||
)}
|
||||
|
|
@ -1090,11 +1090,11 @@ class AnnualReport extends React.Component {
|
|||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
|
||||
{/* eslint-disable max-len */}
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.accessDEICommittee"
|
||||
/>
|
||||
</h4>
|
||||
</h3>
|
||||
<TextAndMediaSnippet
|
||||
className="regular"
|
||||
alt={this.props.intl.formatMessage(
|
||||
|
|
@ -1281,9 +1281,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="flex-content">
|
||||
<div className="text-and-media-snippet regular new-languages">
|
||||
<div className="half">
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.access10NewLanguages" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.access10NewLanguagesText" />
|
||||
</p>
|
||||
|
|
@ -1320,7 +1320,7 @@ class AnnualReport extends React.Component {
|
|||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
{/* eslint-disable max-len */}
|
||||
<TextAndMediaSnippet
|
||||
className="reverse"
|
||||
className="reverse medium-title"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.accessSouthAfrica'}
|
||||
)}
|
||||
|
|
@ -1380,9 +1380,9 @@ class AnnualReport extends React.Component {
|
|||
type="snapshot"
|
||||
/>
|
||||
{/* eslint-disable max-len */}
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchConference" />
|
||||
</h4>
|
||||
</h3>
|
||||
<p className="p-bold">
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.communityScratchConferenceText1"
|
||||
|
|
@ -1411,11 +1411,11 @@ class AnnualReport extends React.Component {
|
|||
{/* volunteer translators */}
|
||||
<div className="inner">
|
||||
<div className="flex-content">
|
||||
<h4 className="special">
|
||||
<h3 className="special">
|
||||
<FormattedMessage
|
||||
id="annualReport.2021.communityVolunteerTranslators"
|
||||
/>
|
||||
</h4>
|
||||
</h3>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
{/* eslint-disable max-len */}
|
||||
<TextAndMediaSnippet
|
||||
|
|
@ -1726,9 +1726,9 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
<div className="content two-wide split scratch-lab-intro">
|
||||
<div className="text">
|
||||
<h4>
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabTitle" />
|
||||
</h4>
|
||||
</h3>
|
||||
<MediaQuery
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
|
|
@ -1850,9 +1850,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<div style={{width: '100%'}}>
|
||||
<h4 style={{textAlign: 'center'}}>
|
||||
<h3 style={{textAlign: 'center'}}>
|
||||
<FormattedMessage id="annualReport.2021.communitySnapshot2Title" />
|
||||
</h4>
|
||||
</h3>
|
||||
<div className="content two-wide split yt">
|
||||
<MediaQuery
|
||||
minWidth={frameless.tabletPortrait}
|
||||
|
|
|
|||
|
|
@ -40,11 +40,6 @@ h2 {
|
|||
h3 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
&.special{
|
||||
margin: 50px auto -50px;
|
||||
@media #{$intermediate-and-smaller}{
|
||||
|
|
@ -53,6 +48,11 @@ h4 {
|
|||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: none;
|
||||
font-size: 1rem;
|
||||
|
|
@ -343,12 +343,12 @@ a, a:link, a:visited, a:active{
|
|||
width: 100%;
|
||||
// max-width: 760px;
|
||||
margin: auto;
|
||||
h4{
|
||||
h3{
|
||||
text-align: left;
|
||||
&.center{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-width: 640px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -645,7 +645,7 @@ a, a:link, a:visited, a:active{
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
.hed{
|
||||
max-width: 630px;
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -842,7 +842,7 @@ a, a:link, a:visited, a:active{
|
|||
width: 300px;
|
||||
}
|
||||
@media #{$big} {
|
||||
img, p, h4{
|
||||
img, p, h3, h4{
|
||||
margin: 0 80px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1438,7 +1438,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
@media #{$medium-and-intermediate} {
|
||||
padding-top: 72px;
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
|
|
@ -1453,6 +1453,7 @@ img.comment-viz{
|
|||
max-width: calc(100% - 50px);
|
||||
margin: auto;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.two-wide{
|
||||
|
|
@ -1882,9 +1883,10 @@ img.comment-viz{
|
|||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
&.first{
|
||||
&.medium-title{
|
||||
h4{
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue