scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update font sizes, pill styling, and country blurb font sizing and layout.

Browse source
This commit is contained in:
Karishma Chadha 2021-11-08 23:41:58 -05:00
parent c835c67fe7
commit f427e4a2b0
4 changed files with 67 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/views/annual-report/2020/annual-report.jsx
View file

@ -785,7 +785,11 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altArrowUp'} {id: 'annualReport.2020.altArrowUp'}
)} )}
/> />
<FormattedMessage id="annualReport.2020.reachTranslationIncrease" /> <span className="bold">
<FormattedMessage
id="annualReport.2020.reachTranslationIncrease"
/>
</span>
</div> </div>
<p> <p>
<FormattedMessage id="annualReport.2020.reachTranslationBlurb" /> <FormattedMessage id="annualReport.2020.reachTranslationBlurb" />
@ -1059,9 +1063,9 @@ class AnnualReport extends React.Component {
<h2> <h2>
<FormattedMessage id="annualReport.2020.connectivityWorld" /> <FormattedMessage id="annualReport.2020.connectivityWorld" />
</h2> </h2>
<p className="bold"> <span className="intl-collaborators bold">
<FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" /> <FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" />
</p> </span>
</div> </div>
</div> </div>
<div className="video-container connectivity"> <div className="video-container connectivity">
@ -1125,7 +1129,6 @@ class AnnualReport extends React.Component {
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<CountryBlurb <CountryBlurb
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur logo.png" icon="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryChileTitle'} {id: 'annualReport.2020.connectivityCountryChileTitle'}
@ -1147,7 +1150,7 @@ class AnnualReport extends React.Component {
/> />
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
className="regular" className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png" icon="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryBrazilTitle'} {id: 'annualReport.2020.connectivityCountryBrazilTitle'}
@ -1169,7 +1172,6 @@ class AnnualReport extends React.Component {
/> />
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance logo.png" icon="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryIndiaTitle'} {id: 'annualReport.2020.connectivityCountryIndiaTitle'}
@ -1198,7 +1200,7 @@ class AnnualReport extends React.Component {
/> />
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
className="regular" className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry-Pi-logo.png" icon="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry-Pi-logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryUSATitle'} {id: 'annualReport.2020.connectivityCountryUSATitle'}

45
src/views/annual-report/2020/annual-report.scss
View file

@ -66,6 +66,10 @@ a, a:link, a:visited, a:active{
color: $motion-blue-3; color: $motion-blue-3;
} }
.bold {
font-weight: bold;
}
.photo-credit { .photo-credit {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.125rem; line-height: 1.125rem;
@ -688,23 +692,23 @@ a, a:link, a:visited, a:active{
.bubble { .bubble {
background-color: darken($annual-report-teal, 10%); background-color: darken($annual-report-teal, 10%);
border-radius: 50px; border-radius: 50px;
padding: 10px 15px; padding: 8px 36px;
font-size: 14px; font-size: 1rem;
margin: 15px auto; margin: 15px auto;
max-width: 170px; width: max-content;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ img{
margin: 0px 8px; margin: 0px 8px;
width: 30px;
height: 30px;
} }
&.increase{ &.increase{
padding: 5px 5px;
&.dark{ &.dark{
background-color: darken($annual-report-teal, 15%); background-color: darken($annual-report-teal, 15%);
padding: 5px 15px;
.million{ .million{
font-size: 14px; font-size: 1rem;
margin: 0 3px; margin: 0 3px;
span:before{ span:before{
display: none; display: none;
@ -727,11 +731,10 @@ a, a:link, a:visited, a:active{
} }
} }
&.spotlight{ &.spotlight{
padding: 10px 6px;
&:before{ &:before{
content: ''; content: '';
width: 25px; width: 30px;
height: 25px; height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg"); background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
background-size: contain; background-size: contain;
display: inline-block; display: inline-block;
@ -741,23 +744,24 @@ a, a:link, a:visited, a:active{
&.snapshot{ &.snapshot{
&:before{ &:before{
content: ''; content: '';
width: 25px; width: 30px;
height: 25px; height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg"); background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
background-size: contain; background-size: contain;
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
} }
&.connectivity{ &.connectivity{
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
} }
&.community{ &.community{
background-color: $motion-blue-3; background-color: $motion-blue-3;
} }
&.adaptation{ &.adaptation{
background-color: $annual-report-aqua; background-color: $annual-report-aqua;
padding: 10px 13px;
} }
} }
@ -863,10 +867,10 @@ img.comment-viz{
.increase-bubble { .increase-bubble {
background-color: darken($annual-report-teal, 15%); background-color: darken($annual-report-teal, 15%);
border-radius: 50px; border-radius: 50px;
padding: 10px; padding: 8px 16px;
font-size: 14px; font-size: 1rem;
margin: 15px auto; margin: 15px auto;
max-width: 170px; // max-width: 170px;
} }
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
@ -1096,6 +1100,12 @@ img.comment-viz{
.bold{ .bold{
font-weight: bold; font-weight: bold;
} }
.intl-collaborators {
font-size: 1.5rem;
line-height: 2rem;
}
.content{ .content{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -1148,12 +1158,8 @@ img.comment-viz{
margin: 0 0; margin: 0 0;
} }
p{ p{
max-width: 233px;
line-height: 1.4; line-height: 1.4;
} }
.bubble.inverted{
max-width: 198px;
}
} }
} }
.bubble{ .bubble{
@ -1186,7 +1192,6 @@ img.comment-viz{
} }
} }
&.snapshot{ &.snapshot{
padding: 10px 0px;
&.bump{ &.bump{
margin-left: 45px; margin-left: 45px;
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {

13
src/views/annual-report/2020/country-blurb/country-blurb.jsx
View file

@ -13,15 +13,6 @@ require('./country-blurb.scss');
const CountryBlurb = props => ( const CountryBlurb = props => (
<div className={classNames('country-blurb', props.className)}> <div className={classNames('country-blurb', props.className)}>
{props.className === 'regular' &&
<div className="half">
<img
className="large"
src={props.largeImage}
alt={props.alt}
/>
</div>
}
<div className="half"> <div className="half">
<div className="country-info"> <div className="country-info">
<img <img
@ -29,7 +20,7 @@ const CountryBlurb = props => (
alt={props.iconAlt} alt={props.iconAlt}
/> />
<div className="country-text"> <div className="country-text">
<h5>{props.title}</h5> <h4>{props.title}</h4>
<div className="location"> <div className="location">
<img <img
src={props.listIcon} src={props.listIcon}
@ -43,7 +34,6 @@ const CountryBlurb = props => (
{props.children} {props.children}
</p> </p>
</div> </div>
{props.className === 'reverse' &&
<div className="half"> <div className="half">
<img <img
className="large" className="large"
@ -51,7 +41,6 @@ const CountryBlurb = props => (
alt={props.alt} alt={props.alt}
/> />
</div> </div>
}
</div> </div>
); );

39
src/views/annual-report/2020/country-blurb/country-blurb.scss
View file

@ -2,31 +2,35 @@
.country-blurb{ .country-blurb{
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
@media #{$intermediate-and-smaller} { justify-content: space-around;
flex-direction: column; margin-bottom: 62px;
}
.half img{
float: left;
}
&.reverse { &.reverse {
.half img{ flex-direction: row-reverse;
float: right;
}
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }
@media #{$intermediate-and-smaller} {
// If we want to support both image on top and image on bottom,
// we can use the regular & reverse classNames
flex-direction: column-reverse;
}
.half{ .half{
max-width: 400px; max-width: 460px;
width: 100%;
img.large{ img.large{
max-width: 350px; max-width: 380px;
width: 100%;
} }
} }
p{ p{
font-size: 14px; font-size: 1rem;
text-align: left; text-align: left;
} }
} }
@ -40,12 +44,17 @@
margin-right: 15px; margin-right: 15px;
} }
.country-text{ .country-text{
h5{ h4{
margin: 0 0 5px 0; margin: 0 0 5px 0;
} }
.location{ .location{
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center;
font-size: 1.25rem;
line-height: 1.5rem;
img{ img{
width: 18px; width: 18px;
height: 18px; height: 18px;