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

bg images for year in review

Browse source
This commit is contained in:
caseymm 2021-10-14 10:28:05 -07:00
parent 6366cbd4b2
commit a56631c267
3 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/timeline-card/timeline-card.scss
View file

@ -1,4 +1,5 @@
@import "../../colors";
@import "../../frameless";
.timeline-card{
width: 450px;
@ -22,9 +23,15 @@
}
&.left{
margin-left: calc((100% - 980px)/2);
@media #{$intermediate-and-smaller} {
margin: auto;
}
}
&.right{
margin-left: calc(100% - ((100% - 980px)/2) - 450px);
margin-left: calc(100% - ((100% - 980px)/2) - 470px);
@media #{$intermediate-and-smaller} {
margin: auto;
}
}
img{
margin-top: 10px;

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

@ -1401,7 +1401,7 @@ class AnnualReport extends React.Component {
{/* go into timeline section */}
<div className="year-in-review">
<img className="upper-wave" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" />
<div className="inner center">
<div className="inner center yr">
<h2>
<FormattedMessage id="annualReport.yearInReview" />
</h2>
@ -1556,6 +1556,12 @@ class AnnualReport extends React.Component {
image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg"
attribution="project by u/IDK_HAVE_SOME_NUMBER"
/>
<div className="illustrations">
<img className="april" src="/images/annual-report/2020/community/Timeline/April Illustration.svg" />
<img className="may" src="/images/annual-report/2020/community/Timeline/May Illustration.svg" />
<img className="june" src="/images/annual-report/2020/community/Timeline/June Illustration.svg" />
<img className="july" src="/images/annual-report/2020/community/Timeline/July Illustration.svg" />
</div>
<img className="lower-wave" src="/images/annual-report/2020/community/Timeline/Wave (lower).svg" />
</div>

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

@ -1377,11 +1377,39 @@ img.comment-viz{
z-index: 0;
}
.inner {
&.center{
&.center.yr{
text-align: center;
margin-top: 80px;
max-width: 600px;
margin: auto;
margin: 10px auto 80px;
}
}
.illustrations{
position: absolute;
width: 970px;
margin-left: calc((100% - 980px)/2);
top: 950px;
@media #{$intermediate-and-smaller} {
display: none;
}
img{
display: block;
position: absolute;
&.april{
position: absolute;
right: 0px;
}
&.may{
left: 0px;
top: 700px;
}
&.june{
right: -50px;
top: 1230px;
}
&.july{
left: 0px;
top: 1800px;
}
}
}
.lower-wave{