pagetop/static/base/css/welcome.css

84 lines
1.6 KiB
CSS

#welcome span.app-name {
font-weight: 500;
color: inherit;
}
#welcome .welcome,
#welcome .pagetop,
#welcome .issues {
margin: 3.2rem auto;
}
#welcome [class$="-col-text"] > .flex__content {
margin: 5%;
text-align: center;
}
#welcome [class$="-col-image"] > .flex__content {
margin: 1rem 5%;
}
#welcome .welcome > .flex__item {
border-radius: 28px;
background: url("/base/images/welcome.jpg") center center no-repeat;
background-size: auto;
background-size: cover;
color: #fff;
}
#welcome .welcome > .flex__item > .flex__content {
margin: 2rem 1rem;
text-align: center;
color: #fff;
}
#welcome .welcome > .flex__item > .flex__content > h2 {
color: #fff;
}
#welcome .welcome > .flex__item > .flex__content > h3 {
color: #ccc;
}
#welcome .promo-col-image > .flex__content {
padding: 0 5%;
}
#welcome .issues-col-image > .flex__content img {
border-radius: 40px;
}
/* BREAKPOINTS */
/* MD - Applies > 768px */
@media screen and (min-width: 48.0625rem) {
#welcome .hello-world {
margin-top: 2rem;
}
#welcome .promo-col-image > .flex__content {
padding: 0;
}
#welcome .issues-col-text > .flex__content {
text-align: left;
}
}
/* LG - Applies > 992px */
@media screen and (min-width: 62.0625rem) {
#welcome .hello-col-text > .flex__content {
text-align: left;
}
#welcome .promo-col-text > .flex__content {
margin-right: 0;
text-align: right;
}
}
/* XL - Applies > 1280px */
@media screen and (min-width: 80.0625rem) {
#welcome .hello-col-text > .flex__content {
margin-left: 20%;
}
#welcome .pagetop-col-text > .flex__content {
text-align: left;
}
}