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

fix string and move a few things around. add better breakpoint for timeline

Browse source
This commit is contained in:
caseymm 2021-10-28 14:04:29 -07:00
parent c883e0bfd6
commit 739c001f66
3 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
@import "../../colors";
@import "../../frameless";
$timeline-breakpoint: "only screen and (max-width : 1030px)";
.timeline-card{
max-width: 450px;
@ -24,13 +25,13 @@
}
&.left{
margin-left: calc((100% - 980px)/2);
@media #{$intermediate-and-smaller} {
@media #{$timeline-breakpoint} {
margin: 0 auto 30px;
}
}
&.right{
margin-left: calc(100% - ((100% - 980px)/2) - 470px);
@media #{$intermediate-and-smaller} {
@media #{$timeline-breakpoint} {
margin: 0 auto 30px;
}
}

2
src/views/annual-report/2020/annual-report.jsx
View file

@ -1143,7 +1143,7 @@ class AnnualReport extends React.Component {
largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
>
<FormattedMessage
id="annualReport.2020.connectivityCountryBrazilParagraph"
id="annualReport.2020.connectivityCountryChileParagraph"
/>
</CountryBlurb>
<CountryBlurb

16
src/views/annual-report/2020/annual-report.scss
View file

@ -6,6 +6,7 @@ $annual-report-aqua: #088763;
$annual-report-teal: #297EA4;
$masthead-breakpoint: "only screen and (max-width : 960px)";
$masthead-breakpoint-wave: "only screen and (max-width : 1060px)";
$timeline-breakpoint: "only screen and (max-width : 1030px)";
$ui-purple-dark: hsla(260, 55, 55, 1);
// $motion-blue-3 #3373CC
@ -1115,7 +1116,7 @@ img.comment-viz{
flex-direction: column;
}
.text{
width: 390px;
width: 360px;
.larger{
font-size: 1.25rem;
line-height: 2.5rem;
@ -1168,7 +1169,10 @@ img.comment-viz{
margin: auto;
}
&.india{
margin: 0 auto 20px;
margin: 0 0 20px;
@media #{$intermediate-and-smaller}{
margin: 0 auto 20px;
}
}
}
&.inverted{
@ -1286,7 +1290,7 @@ img.comment-viz{
&.content{
justify-content: space-between;
.text{
max-width: 370px;
max-width: 360px;
width: 100%;
}
.images{
@ -1355,7 +1359,7 @@ img.comment-viz{
&.right{
margin-left: 50%
}
@media #{$intermediate-and-smaller} {
@media #{$timeline-breakpoint} {
display: none;
}
}
@ -1365,7 +1369,7 @@ img.comment-viz{
width: 100%;
margin-left: calc((100% - 980px)/2);
top: 1150px;
@media #{$intermediate-and-smaller} {
@media #{$timeline-breakpoint} {
display: none;
}
img{
@ -1794,7 +1798,7 @@ img.comment-viz{
.directors-message {
.inner {
max-width: 940px;
max-width: 900px;
padding: 80px 0;
@media #{$intermediate}{
max-width: 700px;