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

embed some projects

Browse source
This commit is contained in:
caseymm 2021-10-13 10:55:29 -07:00
parent ac467b3cab
commit 6f1688d399
3 changed files with 62 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/annual-report-example/annual-report-example.scss
View file

@ -5,6 +5,9 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin: 30px 0; margin: 30px 0;
&.between{
justify-content: space-between;
}
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
flex-direction: column; flex-direction: column;
} }

29
src/views/annual-report/2020/index/annual-report.jsx
View file

@ -1102,14 +1102,14 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
<div className="flex-content"> <div className="flex-content">
<AnnualReportExample <div className="annual-report-example regular between">
className="regular" <div className="half">
paragraph={this.props.intl.formatMessage( <iframe src="https://scratch.mit.edu/projects/389148460/embed" allowtransparency="true" width="375" height="310" frameborder="0" scrolling="no" allowfullscreen></iframe>
{id: 'annualReport.adaptationHighlightText2'} </div>
)} <div className="half">
type="image" <p>Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.</p>
large_image="/images/annual-report/2020/adaptation/Aaron Reuland - Class Projects 1.png" </div>
/> </div>
</div> </div>
<div className="world"> <div className="world">
<div className="spotlight bubble adaptation"> <div className="spotlight bubble adaptation">
@ -1262,6 +1262,19 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.communityText2" /> <FormattedMessage id="annualReport.communityText2" />
</p> </p>
</div> </div>
<div className="bg-image-container">
<img src="/images/annual-report/2020/community/Creative Computing Sprinkles left.svg"></img>
<img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg"></img>
</div>
<div className="iframe-holder">
<iframe src="https://scratch.mit.edu/projects/412126066/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
<p>project by u/STORMPRIMEX</p>
</div>
<a className="download community" href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view">
<span>Virtual Family Coding Nights Guide</span>
<img src="/images/annual-report/2020/Symbols-UI/File Download.svg" />
</a>
</div> </div>
<div className="inner"> <div className="inner">

56
src/views/annual-report/2020/index/annual-report.scss
View file

@ -41,6 +41,10 @@ p {
line-height: 2em; line-height: 2em;
} }
a{
cursor: pointer;
}
.photo-credit { .photo-credit {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.125rem; line-height: 1.125rem;
@ -1361,7 +1365,7 @@ img.comment-viz{
.initiatives-adaptation, .initiatives-community { .initiatives-adaptation, .initiatives-community {
.world{ .world{
max-width: 700px; max-width: 600px;
margin: 50px auto; margin: 50px auto;
} }
.left-align{ .left-align{
@ -1369,26 +1373,42 @@ img.comment-viz{
text-align: left; text-align: left;
margin: 50px 0; margin: 50px 0;
} }
.community-hero-img { .bg-image-container{
width: 100%; width: 100%;
height: 545px; position: relative;
margin: 52px 0; // z-index: -1;
display: flex;
background-image: url("/images/annual-report/initiatives/community-hero.png"); justify-content: space-between;
background-size: contain; margin-top: -400px;
background-repeat: no-repeat; @media #{$intermediate-and-smaller} {
background-position: center center; display: none;
overflow: hidden; }
}
@media #{$intermediate} { .iframe-holder{
height: 330px; margin: auto;
} width: 100%;
max-width: 485px;
@media #{$medium-and-smaller} { margin-top: -70px;
height: 244px; p{
margin: 0px;
}
}
.download{
color: $ui-white;
font-weight: bold;
border-radius: 4px;
text-align: center;
margin: 60px auto;
border-width: 0px;
width: 320px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
&.community{
background-color: $ui-blue;
} }
} }
.moderation-and-guidelines { .moderation-and-guidelines {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;