finished tools for tablet

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

View file

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

View file

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