mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 17:45:52 -05:00
through scracth team on yt
This commit is contained in:
caseymm
parent
27e60171e4
commit
9a62939680
2 changed files with 160 additions and 61 deletions
|
|
@ -1656,7 +1656,7 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="initiatives-subsection-content">
|
||||
<div className="initiatives-subsection-content lab">
|
||||
<div className="wide inner community">
|
||||
<div className="content two-wide split">
|
||||
<div className="text">
|
||||
|
|
@ -1666,9 +1666,13 @@ class AnnualReport extends React.Component {
|
|||
<h4>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
|
||||
</p>
|
||||
<MediaQuery
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
|
||||
</p>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="images">
|
||||
<img
|
||||
|
|
@ -1676,64 +1680,77 @@ class AnnualReport extends React.Component {
|
|||
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altScratchLogoText'})}
|
||||
/>
|
||||
</div>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
|
||||
</p>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText2" />
|
||||
</p>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="580"
|
||||
videoHeight={580 * .568}
|
||||
videoWidth="580"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="400"
|
||||
videoHeight={400 * .568}
|
||||
videoWidth="400"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="300"
|
||||
videoHeight={300 * .568}
|
||||
videoWidth="300"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aaa-video">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="580"
|
||||
videoHeight={580 * .568}
|
||||
videoWidth="580"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="400"
|
||||
videoHeight={400 * .568}
|
||||
videoWidth="400"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
|
||||
videoId="go1wqxifjk"
|
||||
thumbnailWidth="300"
|
||||
videoHeight={300 * .568}
|
||||
videoWidth="300"
|
||||
alt={
|
||||
this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2021.altScratchLabVideo'}
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="initiatives-subsection-content lab">
|
||||
<div className="wide inner community">
|
||||
<div className="community-sds">
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2021.communityScratchLabText3" />
|
||||
|
|
|
|||
|
|
@ -1216,6 +1216,16 @@ img.comment-viz{
|
|||
line-height: 2rem;
|
||||
}
|
||||
|
||||
&.lab{
|
||||
@media #{$small}{
|
||||
width: calc(100% - 50px);
|
||||
margin: auto;
|
||||
.images{
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1474,19 +1484,53 @@ img.comment-viz{
|
|||
|
||||
.two-wide{
|
||||
margin: 50px auto 0px;
|
||||
max-width: 840px;
|
||||
.bubble{
|
||||
margin: -25px 0 40px;
|
||||
}
|
||||
justify-content: space-between;
|
||||
@media #{$medium-and-smaller}{
|
||||
.bubble{
|
||||
margin: -25px auto 30px;
|
||||
}
|
||||
h4{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p{
|
||||
|
||||
}
|
||||
+ p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
@media #{$intermediate}{
|
||||
max-width: 230px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.images{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller}{
|
||||
@media #{$intermediate}{
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
}
|
||||
@media #{$medium-and-smaller}{
|
||||
+ p {
|
||||
text-align: left;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
+ p {
|
||||
@media #{$intermediate}{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1878,7 +1922,25 @@ img.comment-viz{
|
|||
.community-sds {
|
||||
text-align: center;
|
||||
margin-bottom: 68px;
|
||||
|
||||
p{
|
||||
text-align: left;
|
||||
}
|
||||
.sds-list {
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.sds-tile {
|
||||
width: 31%;
|
||||
margin: 0px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
width: 200px;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quotes-tag, .blm-tag {
|
||||
|
|
@ -2279,6 +2341,26 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
|
||||
.aaa-video{
|
||||
.video-preview{
|
||||
margin: 60px auto;
|
||||
}
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
height: 380px;
|
||||
margin: -50px auto -20px;
|
||||
background-image: url("/images/annual-report/2021/3_Community Section/AAAAAAAA.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
background-image: none;
|
||||
}
|
||||
@media #{$small} {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.supporters-section {
|
||||
padding: 0px 0 52px 0;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue