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

start mobile issues

Browse source
This commit is contained in:
caseymm 2021-10-22 14:22:36 -07:00
parent 7557655a06
commit 0f12bd2571
2 changed files with 46 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1302,7 +1302,7 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="community-quotes">
<div className="community-quote">
<div className="community-quote single">
<div className="quote-person">
<Avatar
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
@ -1327,11 +1327,11 @@ class AnnualReport extends React.Component {
<div className="initiatives-subsection-content">
{/* eslint-disable max-len */}
<div className="inner">
<div className="content flex-content">
<div className="spotlight bubble adaptation">
<FormattedMessage id="annualReport.2020.spotlightStory" />
</div>
<div className="content flex-content aaron">
<div className="text">
<div className="spotlight bubble adaptation">
<FormattedMessage id="annualReport.2020.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.2020.adaptationHighlightName" />
</h2>

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

@ -643,10 +643,10 @@ a, a:link, a:visited, a:active{
.reach-translation-intro {
max-width: 300px;
}
h3 {
max-width: 280px;
}
img {
max-width: 380px;
}
.inline{
@ -655,13 +655,12 @@ a, a:link, a:visited, a:active{
margin-top: 10px;
img{
margin-right: 6px;
@media #{$intermediate-and-smaller} {
max-width: 30px;
}
}
}
img {
max-width: 380px;
}
@media #{$small} {
margin-bottom: 64px;
}
@ -671,21 +670,18 @@ a, a:link, a:visited, a:active{
.inner {
max-width: 620px;
}
.reach-translation {
text-align: left;
.inline{
justify-content: center;
}
.reach-translation, .reach-translation-intro {
flex-direction: column;
justify-content: center;
text-align: center;
img {
width: 300px;
}
}
}
@media #{$medium-and-smaller} {
.reach-translation {
text-align: center;
justify-content: center;
}
}
}
.bubble {
@ -760,6 +756,7 @@ a, a:link, a:visited, a:active{
}
&.adaptation{
background-color: $annual-report-aqua;
padding: 10px 13px;
}
}
@ -1165,6 +1162,13 @@ img.comment-viz{
@media #{$intermediate} {
margin-left: auto;
}
&.spotlight{
margin-left: 50px;
margin-bottom: -30px;
@media #{$intermediate-and-smaller}{
margin: auto;
}
}
&.inverted{
border: 2.5px solid $ui-purple-dark;
background-color: $ui-white;
@ -1246,14 +1250,24 @@ img.comment-viz{
text-align: left;
@media #{$medium-and-smaller} {
flex-direction: column;
align-items: center;
justify-content: center;
&.aaron{
flex-direction: column-reverse;
}
}
&.split{
&.content{
.text{
max-width: 420px;
width: 420px;
max-width: 100%;
}
img{
.images{
max-width: 350px;
width: 100%;
img{
width: 100%;
}
}
}
}
@ -1261,6 +1275,14 @@ img.comment-viz{
justify-content: space-between;
.text{
max-width: 370px;
width: 100%;
}
.images{
max-width: 350px;
width: 100%;
img{
width: 100%;
}
}
}
&.lg{