scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

work up to community

Browse source
This commit is contained in:
caseymm 2022-04-26 11:47:25 -07:00
parent 6c3dc25c11
commit 52f216ee98
3 changed files with 158 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/views/annual-report/2021/annual-report.jsx
View file

@ -903,7 +903,7 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
</div> </div>
<div className="inner"> <div className="inner stacked">
<div className="workshop"> <div className="workshop">
<h4> <h4>
<FormattedMessage id="annualReport.2021.SECWorkshops" /> <FormattedMessage id="annualReport.2021.SECWorkshops" />
@ -938,7 +938,7 @@ class AnnualReport extends React.Component {
<h4> <h4>
<FormattedMessage id="annualReport.2021.accessASL" /> <FormattedMessage id="annualReport.2021.accessASL" />
</h4> </h4>
<p> <p class="subhed">
<FormattedMessage <FormattedMessage
id="annualReport.2021.accessASLText" id="annualReport.2021.accessASLText"
/> />
@ -1030,10 +1030,10 @@ class AnnualReport extends React.Component {
{/* DEI Committees */} {/* DEI Committees */}
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.tabletPortrait}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular first"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.accessDEICommittee'} {id: 'annualReport.2021.accessDEICommittee'}
)} )}
@ -1048,13 +1048,15 @@ class AnnualReport extends React.Component {
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<h4>
<FormattedMessage
id="annualReport.2021.accessDEICommittee"
/>
</h4>
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.accessDEICommittee'}
)}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altaccessDEICommittee'} {id: 'annualReport.2021.altaccessDEICommittee'}
)} )}
@ -1072,7 +1074,7 @@ class AnnualReport extends React.Component {
<div className="green"> <div className="green">
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.tabletPortrait}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse" className="reverse"
@ -1093,7 +1095,7 @@ class AnnualReport extends React.Component {
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
@ -1120,7 +1122,7 @@ class AnnualReport extends React.Component {
{/* G-JEDI */} {/* G-JEDI */}
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.tabletPortrait}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
@ -1141,7 +1143,7 @@ class AnnualReport extends React.Component {
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
@ -1169,7 +1171,7 @@ class AnnualReport extends React.Component {
<div className="green"> <div className="green">
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.tabletPortrait}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse" className="reverse"
@ -1190,7 +1192,7 @@ class AnnualReport extends React.Component {
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
@ -1217,12 +1219,13 @@ class AnnualReport extends React.Component {
{/* 10 new languages */} {/* 10 new languages */}
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<div className="inner"> <div className="inner">
<div className="snapshot bubble access left-align languages">
<FormattedMessage id="annualReport.2021.accessSnapshot" />
</div>
<div className="flex-content"> <div className="flex-content">
<div className="text-and-media-snippet regular"> <div className="text-and-media-snippet regular">
<div className="half"> <div className="half">
<div className="snapshot bubble access left-align">
<FormattedMessage id="annualReport.2021.accessSnapshot" />
</div>
<h4> <h4>
<FormattedMessage id="annualReport.2021.access10NewLanguages" /> <FormattedMessage id="annualReport.2021.access10NewLanguages" />
</h4> </h4>
@ -1244,21 +1247,7 @@ class AnnualReport extends React.Component {
allowFullScreen allowFullScreen
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery maxWidth={frameless.desktop - 1}>
maxWidth={frameless.desktop - 1}
minWidth={frameless.mobile}
>
<iframe
src="https://scratch.mit.edu/projects/430997530/embed"
allowTransparency="true"
width="430"
height={((430 * .76) + 45)}
frameBorder="0"
scrolling="no"
allowFullScreen
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<iframe <iframe
src="https://scratch.mit.edu/projects/430997530/embed" src="https://scratch.mit.edu/projects/430997530/embed"
allowTransparency="true" allowTransparency="true"
@ -1275,7 +1264,7 @@ class AnnualReport extends React.Component {
{/* South Africa */} {/* South Africa */}
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.tabletPortrait}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse" className="reverse"
@ -1293,7 +1282,7 @@ class AnnualReport extends React.Component {
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"

105
src/views/annual-report/2021/annual-report.scss
View file

@ -3,6 +3,7 @@
$base-bg: $ui-white; $base-bg: $ui-white;
$annual-report-aqua: #088763; $annual-report-aqua: #088763;
$annual-report-green: #2B732B;
$annual-report-teal: #297EA4; $annual-report-teal: #297EA4;
$masthead-breakpoint: "only screen and (max-width : 960px)"; $masthead-breakpoint: "only screen and (max-width : 960px)";
$masthead-breakpoint-wave: "only screen and (max-width : 1060px)"; $masthead-breakpoint-wave: "only screen and (max-width : 1060px)";
@ -12,7 +13,7 @@ $ui-purple-dark: hsla(260, 55%, 55%, 1);
// $motion-blue-3 #3373CC // $motion-blue-3 #3373CC
.access .button{ .access .button{
background-color: $annual-report-aqua; background-color: $annual-report-green;
} }
.community .button{ .community .button{
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
@ -98,7 +99,7 @@ a, a:link, a:visited, a:active{
} }
.message-section { .message-section {
background-color: $annual-report-aqua; background-color: $annual-report-green;
h1, h2, p { h1, h2, p {
color: $ui-white; color: $ui-white;
@ -273,8 +274,8 @@ a, a:link, a:visited, a:active{
} }
.pull-quote{ .pull-quote{
font-size: 1.5rem; font-size: 1.45rem;
line-height: 2.5rem; line-height: 2rem;
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 10px;
@media #{$small}{ @media #{$small}{
@ -303,6 +304,7 @@ a, a:link, a:visited, a:active{
&.green{ &.green{
font-weight: 500; font-weight: 500;
text-align: left; text-align: left;
margin-left: 20px;
&:before{ &:before{
margin-bottom: -75px; margin-bottom: -75px;
background-image: url("/images/annual-report/2021/2_Access Section/quote (green).svg"); background-image: url("/images/annual-report/2021/2_Access Section/quote (green).svg");
@ -312,14 +314,20 @@ a, a:link, a:visited, a:active{
.workshop{ .workshop{
width: 100%; width: 100%;
max-width: 760px; // max-width: 760px;
margin: auto; margin: auto;
h4{ h4{
text-align: left; text-align: left;
&.center{ &.center{
text-align: center; text-align: center;
width: 100%;
max-width: 500px;
margin: auto;
} }
} }
p{
text-align: left;
}
} }
.pull-quote-attr{ .pull-quote-attr{
@ -331,6 +339,7 @@ a, a:link, a:visited, a:active{
margin-top: 0px; margin-top: 0px;
&.right{ &.right{
text-align: right; text-align: right;
margin-bottom: 30px;
} }
} }
@ -581,7 +590,7 @@ a, a:link, a:visited, a:active{
} }
} }
background-color: $annual-report-aqua; background-color: $annual-report-green;
color: $ui-white; color: $ui-white;
h2, h3, h4, p { h2, h3, h4, p {
@ -760,7 +769,14 @@ a, a:link, a:visited, a:active{
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
} }
&.access{ &.access{
background-color: $annual-report-aqua; background-color: $annual-report-green;
&.languages{
margin-top: 50px;
margin-bottom: -10px;
@media #{$intermediate-and-smaller}{
margin: 50px auto 10px;
}
}
} }
} }
@ -778,7 +794,7 @@ a, a:link, a:visited, a:active{
width: 100%; width: 100%;
max-width: 840px; max-width: 840px;
margin: auto; margin: auto;
@media(max-width: $intermediate-and-smaller){ @media #{$intermediate-and-smaller}{
width: calc(100% - 30px); width: calc(100% - 30px);
text-align: left; text-align: left;
} }
@ -929,7 +945,7 @@ img.comment-viz{
} }
.reach-scratch-jr { .reach-scratch-jr {
background-color: $annual-report-aqua; background-color: $annual-report-green;
color: $ui-white; color: $ui-white;
padding: 100px 0; padding: 100px 0;
@ -1133,7 +1149,7 @@ img.comment-viz{
} }
&.access { &.access {
background-color: $ui-aqua-dark; background-color: $annual-report-green;
background-position: 50% 0%; background-position: 50% 0%;
margin: 70px 0; margin: 70px 0;
} }
@ -1187,7 +1203,8 @@ img.comment-viz{
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 760px; // max-width: 760px;
max-width: 800px;
margin: auto; margin: auto;
justify-content: space-around; justify-content: space-around;
&.around{ &.around{
@ -1406,6 +1423,10 @@ img.comment-viz{
line-height: 3rem; line-height: 3rem;
} }
} }
&.stacked{
margin-top: 0px;
padding-top: 0px;
}
@media #{$big} { @media #{$big} {
max-width: 840px; max-width: 840px;
padding: 72px 0; padding: 72px 0;
@ -1416,7 +1437,7 @@ img.comment-viz{
} }
@media #{$intermediate} { @media #{$intermediate} {
width: calc(100% - 30px); width: calc(100% - 100px);
} }
@media #{$medium} { @media #{$medium} {
@ -1620,12 +1641,17 @@ img.comment-viz{
.initiatives-access, .initiatives-community { .initiatives-access, .initiatives-community {
.world{ .world{
max-width: 600px; max-width: 700px;
margin: 50px auto; margin: 50px auto;
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
width: calc(100% - 30px); width: calc(100% - 30px);
padding: 0 15px; padding: 0 15px;
} }
p.subhed{
font-size: 1.1rem;
max-width: 500px;
margin: 15px auto;
}
} }
.connecting-educators{ .connecting-educators{
max-width: 700px; max-width: 700px;
@ -1694,6 +1720,9 @@ img.comment-viz{
} }
} }
.inner { .inner {
@media #{$big}{
width: 850px;
}
&.center{ &.center{
text-align: center; text-align: center;
margin-top: 80px; margin-top: 80px;
@ -1702,6 +1731,52 @@ img.comment-viz{
margin-top: 70px; margin-top: 70px;
} }
} }
.text-and-media-snippet{
h4, p{
text-align: left;
}
.half{
width: 48%;
h4{
font-size: 1.3rem;
}
}
&.first{
h4{
font-size: 1.5rem;
}
}
@media #{$intermediate-and-smaller} {
width: 100%;
&.regular {
flex-direction: row;
}
&.reverse {
flex-direction: row-reverse;
}
}
@media #{$medium-and-smaller} {
// text-align: center;
// margin: 32px auto;
// &.top {
// margin-top: 32px;
// }
.half{
width: 100%;
img{
max-width: 350px;
width: 100%;
}
}
&.regular {
flex-direction: column-reverse;
}
&.reverse {
flex-direction: column;
}
}
}
.moderation-and-guidelines { .moderation-and-guidelines {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -2415,7 +2490,7 @@ img.comment-viz{
} }
.donate-section { .donate-section {
background-color: $annual-report-aqua; background-color: $annual-report-green;
.donate-info { .donate-info {
justify-content: center; justify-content: center;
@ -2493,7 +2568,7 @@ img.comment-viz{
top: 50px; top: 50px;
z-index: 9; z-index: 9;
box-shadow: 0 0 3px $box-shadow-gray; box-shadow: 0 0 3px $box-shadow-gray;
background-color: $annual-report-aqua; background-color: $annual-report-green;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 58px; height: 58px;

51
static/images/annual-report/2021/2_Access Section/Access Spotlight Story Illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 3.1 MiB