scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

finished tools for tablet

Browse source
This commit is contained in:
seotts 2020-10-15 11:52:01 -04:00 committed by Karishma Chadha
parent a7a943dff5
commit fc7b58364b
2 changed files with 70 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1113,7 +1113,7 @@ class AnnualReport extends React.Component {
alt=""
src="/images/annual-report/initiatives/Abhi Avatar.png"
/>
<div>Ahbi</div>
<div>Abhi</div>
</div>
<Comment
comment={this.props.intl.formatMessage(

94
src/views/annual-report/annual-report.scss
View file

@ -32,6 +32,7 @@ h5 {
text-transform: none;
font-size: 1rem;
margin: .5rem 0;
letter-spacing: 0;
}
p {
@ -667,7 +668,7 @@ p {
display: flex;
align-items: center;
font-weight: bold;
margin-left: 16px;
margin-left: -16px;
img {
width: 60px;
@ -678,6 +679,43 @@ p {
}
.initiatives-tools {
.hero {
display: flex;
justify-content: space-between;
}
img {
&.left {
@media #{$big} {
width: 432px;
}
@media #{$intermediate} {
width: 340px;
}
@media #{$medium} {
width: 192px;
}
@media #{$small} {
width: 132px;
}
}
&.right {
@media #{$big} {
width: 780px;
}
@media #{$intermediate} {
width: 468px;
}
@media #{$medium} {
width: 342px;
}
@media #{$small} {
width: 220px;
}
}
}
.subsection-tag {
background-color: $ui-aqua;
@ -816,42 +854,42 @@ p {
padding: 1.75rem;
}
}
@media #{$intermediate-and-smaller} {
.tools-LEGO-info, .tools-app-info {
h4, p {
text-align: left;
}
}
.initiatives-tools {
.hero {
display: flex;
justify-content: space-between;
.tools-extension {
width: 300px;
.tools-stat {
width: 140px;
}
}
.tools-abhi {
width: 100%;
align-items: center;
.tools-abhi-intro {
width: 100%;
justify-content: center;
img {
&.left {
@media #{$big} {
width: 432px;
order: -1;
width: 460px;
}
@media #{$intermediate} {
width: 260px;
}
@media #{$medium} {
width: 192px;
}
@media #{$small} {
width: 132px;
div {
max-width: 100%;
}
}
&.right {
@media #{$big} {
width: 780px;
}
@media #{$intermediate} {
width: 468px;
}
@media #{$medium} {
width: 342px;
}
@media #{$small} {
width: 220px;
.emoji-text {
text-align: left;
}
}
}