mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
Update font sizes, pill styling, and country blurb font sizing and layout.
This commit is contained in:
Karishma Chadha
parent
c835c67fe7
commit
f427e4a2b0
4 changed files with 67 additions and 62 deletions
|
|
@ -785,7 +785,11 @@ class AnnualReport extends React.Component {
|
|||
{id: 'annualReport.2020.altArrowUp'}
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.reachTranslationIncrease" />
|
||||
<span className="bold">
|
||||
<FormattedMessage
|
||||
id="annualReport.2020.reachTranslationIncrease"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2020.reachTranslationBlurb" />
|
||||
|
|
@ -1059,9 +1063,9 @@ class AnnualReport extends React.Component {
|
|||
<h2>
|
||||
<FormattedMessage id="annualReport.2020.connectivityWorld" />
|
||||
</h2>
|
||||
<p className="bold">
|
||||
<span className="intl-collaborators bold">
|
||||
<FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" />
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="video-container connectivity">
|
||||
|
|
@ -1125,7 +1129,6 @@ class AnnualReport extends React.Component {
|
|||
<div className="inner">
|
||||
<div className="flex-content">
|
||||
<CountryBlurb
|
||||
className="reverse"
|
||||
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur logo.png"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityCountryChileTitle'}
|
||||
|
|
@ -1147,7 +1150,7 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</CountryBlurb>
|
||||
<CountryBlurb
|
||||
className="regular"
|
||||
className="reverse"
|
||||
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityCountryBrazilTitle'}
|
||||
|
|
@ -1169,7 +1172,6 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</CountryBlurb>
|
||||
<CountryBlurb
|
||||
className="reverse"
|
||||
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance logo.png"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityCountryIndiaTitle'}
|
||||
|
|
@ -1198,7 +1200,7 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</CountryBlurb>
|
||||
<CountryBlurb
|
||||
className="regular"
|
||||
className="reverse"
|
||||
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry-Pi-logo.png"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityCountryUSATitle'}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,10 @@ a, a:link, a:visited, a:active{
|
|||
color: $motion-blue-3;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-credit {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
|
|
@ -688,23 +692,23 @@ a, a:link, a:visited, a:active{
|
|||
.bubble {
|
||||
background-color: darken($annual-report-teal, 10%);
|
||||
border-radius: 50px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
padding: 8px 36px;
|
||||
font-size: 1rem;
|
||||
margin: 15px auto;
|
||||
max-width: 170px;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
margin: 0px 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&.increase{
|
||||
padding: 5px 5px;
|
||||
&.dark{
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
padding: 5px 15px;
|
||||
.million{
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
margin: 0 3px;
|
||||
span:before{
|
||||
display: none;
|
||||
|
|
@ -727,11 +731,10 @@ a, a:link, a:visited, a:active{
|
|||
}
|
||||
}
|
||||
&.spotlight{
|
||||
padding: 10px 6px;
|
||||
&:before{
|
||||
content: '';
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
|
|
@ -741,23 +744,24 @@ a, a:link, a:visited, a:active{
|
|||
&.snapshot{
|
||||
&:before{
|
||||
content: '';
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.connectivity{
|
||||
background-color: $ui-purple-dark;
|
||||
}
|
||||
|
||||
&.community{
|
||||
background-color: $motion-blue-3;
|
||||
}
|
||||
&.adaptation{
|
||||
background-color: $annual-report-aqua;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -863,10 +867,10 @@ img.comment-viz{
|
|||
.increase-bubble {
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
font-size: 1rem;
|
||||
margin: 15px auto;
|
||||
max-width: 170px;
|
||||
// max-width: 170px;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
@ -1096,6 +1100,12 @@ img.comment-viz{
|
|||
.bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.intl-collaborators {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1148,12 +1158,8 @@ img.comment-viz{
|
|||
margin: 0 0;
|
||||
}
|
||||
p{
|
||||
max-width: 233px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.bubble.inverted{
|
||||
max-width: 198px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bubble{
|
||||
|
|
@ -1186,7 +1192,6 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
&.snapshot{
|
||||
padding: 10px 0px;
|
||||
&.bump{
|
||||
margin-left: 45px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
|
|||
|
|
@ -13,15 +13,6 @@ require('./country-blurb.scss');
|
|||
|
||||
const CountryBlurb = props => (
|
||||
<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="country-info">
|
||||
<img
|
||||
|
|
@ -29,7 +20,7 @@ const CountryBlurb = props => (
|
|||
alt={props.iconAlt}
|
||||
/>
|
||||
<div className="country-text">
|
||||
<h5>{props.title}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
<div className="location">
|
||||
<img
|
||||
src={props.listIcon}
|
||||
|
|
@ -43,15 +34,13 @@ const CountryBlurb = props => (
|
|||
{props.children}
|
||||
</p>
|
||||
</div>
|
||||
{props.className === 'reverse' &&
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,31 +2,35 @@
|
|||
|
||||
.country-blurb{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
.half img{
|
||||
float: left;
|
||||
}
|
||||
&.reverse{
|
||||
.half img{
|
||||
float: right;
|
||||
}
|
||||
justify-content: space-around;
|
||||
margin-bottom: 62px;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
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{
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
|
||||
img.large{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,12 +44,17 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
.country-text{
|
||||
h5{
|
||||
h4{
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
.location{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
img{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue