react-native/website/styles/_showcase.scss
Martin Konicek b8e8b723d4 Website: Fix aspect ratio of icons in the showcase on homepage
Summary:
I ran the website locally and noticed the icons in the showcase on the homepage look squashed:

![screenshot 2017-03-07 22 28 23](https://cloud.githubusercontent.com/assets/346214/23681227/18fbec6e-0386-11e7-9658-93907cbb3337.png)

Made the icons consistent with /showcase.html:

d54c7f8282/website/styles/_showcase.scss (L74)
Closes https://github.com/facebook/react-native/pull/12773

Differential Revision: D4669767

Pulled By: hramos

fbshipit-source-id: be5a758dd912083fc02c8e0b56c30c8617dcf3df
2017-03-07 15:45:16 -08:00

84 lines
1.1 KiB
SCSS

/** Showcase **/
.home-showcase-section {
max-width: 800px;
margin: 20px auto 100px auto;
text-align: center;
}
.home-showcase-section p {
max-width: 540px;
margin: 0 auto;
}
.footnote {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
.home-showcase-section .showcase img {
width: 100px;
height: 100px;
border-radius: 20px;
}
.showcaseHeader {
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
}
.showcase {
margin: 30px auto 30px auto;
width: 100%;
display: inline-block;
text-align: center;
vertical-align: top;
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.showcase {
width: 50%;
}
}
@media only screen
and (min-device-width: 1024px) {
.showcase {
width: 25%;
}
}
.showcase h3 {
margin-bottom: 0px;
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
font-size: 16px;
}
.showcase p {
margin-top: 5px;
}
.showcase a {
}
.showcase h3, .showcase p {
color: rgb(72, 72, 72);
}
.showcase img {
width: 100px;
height: 100px;
border-radius: 20px;
}
.pinned img {
width: 150px;
border-radius: 20px;
}