123 lines
1.8 KiB
SCSS
123 lines
1.8 KiB
SCSS
.main-inner {
|
|
padding: 2.8rem 0;
|
|
@include grid(false, 72% auto);
|
|
gap: 4rem;
|
|
max-width: 174rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.main-advert {
|
|
a {
|
|
display: block;
|
|
@include imgStyle($objFit: contain);
|
|
}
|
|
}
|
|
|
|
.bannerSwiper {
|
|
.swiper-slide {
|
|
max-height: 15rem;
|
|
}
|
|
}
|
|
|
|
.banners-inner {
|
|
@include flex;
|
|
gap: 2.5rem;
|
|
@include stretch;
|
|
|
|
.swiper {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
@include imgStyle($objFit: contain);
|
|
}
|
|
|
|
// Mobile search
|
|
.mobile-search {
|
|
position: fixed;
|
|
background: $base-white;
|
|
top: 0;
|
|
left: 0;
|
|
@include stretch;
|
|
z-index: 5001;
|
|
transform: translateY(-100%);
|
|
@include transition-std;
|
|
|
|
&.active {
|
|
transform: translateY(0%);
|
|
@include transition-std;
|
|
}
|
|
}
|
|
|
|
.mobile-search-inner {
|
|
position: relative;
|
|
padding: 6rem 1.6rem;
|
|
@include flex(column);
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
.mobile-search-logo {
|
|
@include imgStyle($objFit: fill);
|
|
width: 11.6rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
.mobile-search-block {
|
|
@include flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
width: 65%;
|
|
input {
|
|
border-radius: 0.5rem;
|
|
font-size: 1.4rem;
|
|
@include stretch;
|
|
@include input;
|
|
border-color: black;
|
|
}
|
|
}
|
|
|
|
.mobile-search-closer {
|
|
position: absolute;
|
|
top: 1.6rem;
|
|
left: 1.6rem;
|
|
padding: 2rem;
|
|
}
|
|
|
|
// Media
|
|
|
|
@media screen and (max-width: 950px) {
|
|
.banner-container {
|
|
max-width: unset;
|
|
padding: 0;
|
|
}
|
|
.banner {
|
|
&:last-child {
|
|
display: none;
|
|
}
|
|
}
|
|
.banners-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media screen and (max-width: 700px) {
|
|
.main-advert a img {
|
|
object-fit: contain;
|
|
}
|
|
.main-advert {
|
|
a {
|
|
max-height: 13rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// PAGE CONTENT
|
|
@import "./main/main-news";
|
|
@import "./main/aside";
|
|
@import "./main/sub-news";
|
|
@import "./main/trending";
|
|
@import "./main/posts";
|
|
@import "./main/media";
|
|
@import "./main/useful";
|
|
@import "./main/aside-mobile";
|