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

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

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

@ -3,6 +3,7 @@
$base-bg: $ui-white;
$annual-report-aqua: #088763;
$annual-report-green: #2B732B;
$annual-report-teal: #297EA4;
$masthead-breakpoint: "only screen and (max-width : 960px)";
$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
.access .button{
background-color: $annual-report-aqua;
background-color: $annual-report-green;
}
.community .button{
background-color: $ui-purple-dark;
@ -98,7 +99,7 @@ a, a:link, a:visited, a:active{
}
.message-section {
background-color: $annual-report-aqua;
background-color: $annual-report-green;
h1, h2, p {
color: $ui-white;
@ -273,8 +274,8 @@ a, a:link, a:visited, a:active{
}
.pull-quote{
font-size: 1.5rem;
line-height: 2.5rem;
font-size: 1.45rem;
line-height: 2rem;
text-align: left;
margin-bottom: 10px;
@media #{$small}{
@ -303,6 +304,7 @@ a, a:link, a:visited, a:active{
&.green{
font-weight: 500;
text-align: left;
margin-left: 20px;
&:before{
margin-bottom: -75px;
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{
width: 100%;
max-width: 760px;
// max-width: 760px;
margin: auto;
h4{
text-align: left;
&.center{
text-align: center;
width: 100%;
max-width: 500px;
margin: auto;
}
}
p{
text-align: left;
}
}
.pull-quote-attr{
@ -331,6 +339,7 @@ a, a:link, a:visited, a:active{
margin-top: 0px;
&.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;
h2, h3, h4, p {
@ -760,7 +769,14 @@ a, a:link, a:visited, a:active{
background-color: $ui-purple-dark;
}
&.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%;
max-width: 840px;
margin: auto;
@media(max-width: $intermediate-and-smaller){
@media #{$intermediate-and-smaller}{
width: calc(100% - 30px);
text-align: left;
}
@ -929,7 +945,7 @@ img.comment-viz{
}
.reach-scratch-jr {
background-color: $annual-report-aqua;
background-color: $annual-report-green;
color: $ui-white;
padding: 100px 0;
@ -1133,7 +1149,7 @@ img.comment-viz{
}
&.access {
background-color: $ui-aqua-dark;
background-color: $annual-report-green;
background-position: 50% 0%;
margin: 70px 0;
}
@ -1187,7 +1203,8 @@ img.comment-viz{
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 760px;
// max-width: 760px;
max-width: 800px;
margin: auto;
justify-content: space-around;
&.around{
@ -1406,6 +1423,10 @@ img.comment-viz{
line-height: 3rem;
}
}
&.stacked{
margin-top: 0px;
padding-top: 0px;
}
@media #{$big} {
max-width: 840px;
padding: 72px 0;
@ -1416,7 +1437,7 @@ img.comment-viz{
}
@media #{$intermediate} {
width: calc(100% - 30px);
width: calc(100% - 100px);
}
@media #{$medium} {
@ -1620,12 +1641,17 @@ img.comment-viz{
.initiatives-access, .initiatives-community {
.world{
max-width: 600px;
max-width: 700px;
margin: 50px auto;
@media #{$intermediate-and-smaller} {
width: calc(100% - 30px);
padding: 0 15px;
}
p.subhed{
font-size: 1.1rem;
max-width: 500px;
margin: 15px auto;
}
}
.connecting-educators{
max-width: 700px;
@ -1694,6 +1720,9 @@ img.comment-viz{
}
}
.inner {
@media #{$big}{
width: 850px;
}
&.center{
text-align: center;
margin-top: 80px;
@ -1702,6 +1731,52 @@ img.comment-viz{
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 {
display: flex;
justify-content: space-between;
@ -2415,7 +2490,7 @@ img.comment-viz{
}
.donate-section {
background-color: $annual-report-aqua;
background-color: $annual-report-green;
.donate-info {
justify-content: center;
@ -2493,7 +2568,7 @@ img.comment-viz{
top: 50px;
z-index: 9;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $annual-report-aqua;
background-color: $annual-report-green;
padding: 0;
width: 100%;
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