scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-20 03:15:29 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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 "../../colors";
@import "../../frameless";
.timeline-card{ .timeline-card{
width: 450px; width: 450px;
@ -22,9 +23,15 @@
} }
&.left{ &.left{
margin-left: calc((100% - 980px)/2); margin-left: calc((100% - 980px)/2);
@media #{$intermediate-and-smaller} {
margin: auto;
}
} }
&.right{ &.right{
margin-left: calc(100% - ((100% - 980px)/2) - 450px); margin-left: calc(100% - ((100% - 980px)/2) - 470px);
@media #{$intermediate-and-smaller} {
margin: auto;
}
} }
img{ img{
margin-top: 10px; 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 */} {/* go into timeline section */}
<div className="year-in-review"> <div className="year-in-review">
<img className="upper-wave" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" /> <img className="upper-wave" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" />
<div className="inner center"> <div className="inner center yr">
<h2> <h2>
<FormattedMessage id="annualReport.yearInReview" /> <FormattedMessage id="annualReport.yearInReview" />
</h2> </h2>
@ -1556,6 +1556,12 @@ class AnnualReport extends React.Component {
image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg" image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg"
attribution="project by u/IDK_HAVE_SOME_NUMBER" 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" /> <img className="lower-wave" src="/images/annual-report/2020/community/Timeline/Wave (lower).svg" />
</div> </div>

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

@ -1377,11 +1377,39 @@ img.comment-viz{
z-index: 0; z-index: 0;
} }
.inner { .inner {
&.center{ &.center.yr{
text-align: center; text-align: center;
margin-top: 80px;
max-width: 600px; 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{ .lower-wave{