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

through scracth team on yt

Browse source
This commit is contained in:
caseymm 2022-04-29 11:02:51 -07:00
parent 27e60171e4
commit 9a62939680
2 changed files with 160 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
<MediaQuery
minWidth={frameless.tabletPortrait}
>
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
</p>
</MediaQuery>
</div>
<div className="images">
<img
@ -1676,10 +1680,20 @@ 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>
</div>
</div>
<div className="aaa-video">
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
@ -1734,6 +1748,9 @@ class AnnualReport extends React.Component {
}
/>
</MediaQuery>
</div>
<div className="initiatives-subsection-content lab">
<div className="wide inner community">
<div className="community-sds">
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText3" />

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

@ -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;