angular-docs-cn/public/resources/css/module/_home-promos.scss

81 lines
1.3 KiB
SCSS

.home-rows {
// NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
margin-top: 112px;
}
.home-row {
max-width: 920px;
margin: 0 0 60px 0;
margin-left: auto;
margin-right: auto;
h3.text-headline {
font-size: 28px;
margin-top: 10px;
}
.promo-image-container, .text-container {
max-width: 50%;
}
// NOTE (ericjim): remove if graphic changes.
.promo-3 {
margin-top: 15px;
@media(max-width: 599px) {
margin-top: 0;
}
}
// -- Utility margins for promos
.promo-1-desc, .promo-3-desc {
padding-left: 5px;
}
// -- Reset margins for the utility margins
@media(max-width: 599px) {
.promo-1, .promo-2, .promo-3, .promo-4 {
margin: 0;
}
}
.text-block {
padding-right: 15%;
@media(max-width: 599px) {
padding: 0;
}
}
@media(max-width: 599px) {
.promo-image-container, .text-container {
max-width: 100%;
}
&:nth-child(even) {
flex-direction: column-reverse;
}
}
.promo-img-container {
@media (max-width: 375px) {
text-align: initial;
}
p {
margin: 0 20px;
}
img {
max-width: 90%;
@media (max-width: 599px) {
max-width: 100%;
float: initial !important;
}
}
}
}