scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-25 13:54:59 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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 "../../colors";
@import "../../frameless"; @import "../../frameless";
$timeline-breakpoint: "only screen and (max-width : 1030px)";
.timeline-card{ .timeline-card{
max-width: 450px; max-width: 450px;
@ -24,13 +25,13 @@
} }
&.left{ &.left{
margin-left: calc((100% - 980px)/2); margin-left: calc((100% - 980px)/2);
@media #{$intermediate-and-smaller} { @media #{$timeline-breakpoint} {
margin: 0 auto 30px; margin: 0 auto 30px;
} }
} }
&.right{ &.right{
margin-left: calc(100% - ((100% - 980px)/2) - 470px); margin-left: calc(100% - ((100% - 980px)/2) - 470px);
@media #{$intermediate-and-smaller} { @media #{$timeline-breakpoint} {
margin: 0 auto 30px; 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" largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2020.connectivityCountryBrazilParagraph" id="annualReport.2020.connectivityCountryChileParagraph"
/> />
</CountryBlurb> </CountryBlurb>
<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; $annual-report-teal: #297EA4;
$masthead-breakpoint: "only screen and (max-width : 960px)"; $masthead-breakpoint: "only screen and (max-width : 960px)";
$masthead-breakpoint-wave: "only screen and (max-width : 1060px)"; $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); $ui-purple-dark: hsla(260, 55, 55, 1);
// $motion-blue-3 #3373CC // $motion-blue-3 #3373CC
@ -1115,7 +1116,7 @@ img.comment-viz{
flex-direction: column; flex-direction: column;
} }
.text{ .text{
width: 390px; width: 360px;
.larger{ .larger{
font-size: 1.25rem; font-size: 1.25rem;
line-height: 2.5rem; line-height: 2.5rem;
@ -1168,7 +1169,10 @@ img.comment-viz{
margin: auto; margin: auto;
} }
&.india{ &.india{
margin: 0 auto 20px; margin: 0 0 20px;
@media #{$intermediate-and-smaller}{
margin: 0 auto 20px;
}
} }
} }
&.inverted{ &.inverted{
@ -1286,7 +1290,7 @@ img.comment-viz{
&.content{ &.content{
justify-content: space-between; justify-content: space-between;
.text{ .text{
max-width: 370px; max-width: 360px;
width: 100%; width: 100%;
} }
.images{ .images{
@ -1355,7 +1359,7 @@ img.comment-viz{
&.right{ &.right{
margin-left: 50% margin-left: 50%
} }
@media #{$intermediate-and-smaller} { @media #{$timeline-breakpoint} {
display: none; display: none;
} }
} }
@ -1365,7 +1369,7 @@ img.comment-viz{
width: 100%; width: 100%;
margin-left: calc((100% - 980px)/2); margin-left: calc((100% - 980px)/2);
top: 1150px; top: 1150px;
@media #{$intermediate-and-smaller} { @media #{$timeline-breakpoint} {
display: none; display: none;
} }
img{ img{
@ -1794,7 +1798,7 @@ img.comment-viz{
.directors-message { .directors-message {
.inner { .inner {
max-width: 940px; max-width: 900px;
padding: 80px 0; padding: 80px 0;
@media #{$intermediate}{ @media #{$intermediate}{
max-width: 700px; max-width: 700px;