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

start working on sparkles

Browse source
This commit is contained in:
caseymm 2022-04-27 12:18:50 -07:00
parent 7295ea98ef
commit 240d6c0c87
4 changed files with 60 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
.timeline-card{
max-width: 460px;
z-index: 2;
@media #{$small} {
max-width: 300px;
@ -12,7 +13,6 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
background-color: $ui-white;
border-radius: 8px;
position: relative;
z-index: 1;
margin-bottom: 30px;
.timeline-content {

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

@ -1417,6 +1417,23 @@ class AnnualReport extends React.Component {
</div>
{/* go into timeline section */}
<div className="sparkles">
<img
className="sparkle-left"
src="/images/annual-report/2021/3_Community Section/Timeline/Left Sparkles.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
/>
<img
className="down-arrow"
src="/images/annual-report/2021/3_Community Section/Timeline/Down Arrow.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altDownArrow'})}
/>
<img
className="sparkle-right"
src="/images/annual-report/2021/3_Community Section/Timeline/Right Sparkles.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
/>
</div>
<div className="year-in-review">
<img
className="upper-wave"

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

@ -1541,9 +1541,44 @@ img.comment-viz{
}
}
.sparkles{
position: relative;
width: calc(100% - 70px);
margin: 0 auto -114px;
z-index: 1;
display: flex;
justify-content: space-between;
height: 180px;
align-items: flex-start;
@media #{$intermediate-and-smaller} {
// top: -120px;
height: 130px;
margin: 0 auto -76px;
}
@media #{$medium-and-smaller} {
height: 150px;
overflow: hidden;
width: 100%;
}
.sparkle-left{
@media #{$medium-and-smaller}{
margin-left: -40px;
}
}
.sparkle-right{
@media #{$medium-and-smaller}{
margin-right: -40px;
}
}
.down-arrow{
align-self: flex-end;
width: 50px;
}
}
.year-in-review{
position: relative;
padding: 180px 0;
padding: 180px 0 180px 0;
display: flex;
flex-direction: column;
// overflow-x: hidden;
@ -1565,9 +1600,10 @@ img.comment-viz{
}
.connector{
margin: -40px auto -30px;
// margin-left: calc((100% - 980px)/2 + 200px);
z-index: 1;
&.left{
margin-left: calc((100% - 980px)/2 + 230px);
margin-left: calc((100% - 980px)/2 + 245px);
}
&.right{
margin-left: 50%
@ -1732,7 +1768,7 @@ img.comment-viz{
&.center{
text-align: center;
margin-top: 80px;
max-width: 600px;
max-width: 650px;
margin: auto;
margin-top: 70px;
}

3
src/views/annual-report/2021/l10n.json
View file

@ -275,6 +275,9 @@
"annualReport.2021.altSECVideoPreview": "",
"annualReport.2021.altSparkle": "White sparkle decoration",
"annualReport.2021.altDownArrow": "Purple arrow pointing down",
"annualReport.2021.altCard1": "",
"annualReport.2021.altCard2": "",
"annualReport.2021.altCard3": "",