Шаблон:Main page/Aavikko/styles.css: различия между версиями
Материал из Aavikko
DeRecnad (обсуждение | вклад) мНет описания правки Метка: отменено |
DeRecnad (обсуждение | вклад) мНет описания правки Метки: ручная отмена отменено |
||
Строка 1: | Строка 1: | ||
#home-featured { | |||
width: 100%; /* Ширина на всю страницу */ | |||
height: 200px; | |||
display: block; /* Чтобы блок занял всю ширину */ | |||
position: relative; /* Если элементы внутри будут позиционированы */ | |||
overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */ | |||
} | } | ||
#home-featured .home-card__background a { | |||
display: block; | |||
.home- | |||
height: 100%; | height: 100%; | ||
} | } | ||
.home-card__background { | #home-featured .home-card__background:after { | ||
top: unset; | |||
top: | height: 60%; | ||
background: linear-gradient( to top, #000, transparent ); | |||
background: # | |||
} | } | ||
.home- | #home-featured .home-card__foreground { | ||
top: unset; | |||
top: | |||
} | } | ||
#home-featured .home-card__background img { | |||
.home-card__background img { | width: 100%; /* Изображение будет адаптироваться по ширине */ | ||
max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */ | |||
height: auto; /* Автоматическая подгонка высоты */ | |||
} | } | ||
Строка 115: | Строка 41: | ||
color: #fff; | color: #fff; | ||
line-height: 1.25; | line-height: 1.25; | ||
} | } |
Версия от 16:27, 10 сентября 2024
#home-featured {
width: 100%; /* Ширина на всю страницу */
height: 200px;
display: block; /* Чтобы блок занял всю ширину */
position: relative; /* Если элементы внутри будут позиционированы */
overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */
}
#home-featured .home-card__background a {
display: block;
height: 100%;
}
#home-featured .home-card__background:after {
top: unset;
height: 60%;
background: linear-gradient( to top, #000, transparent );
}
#home-featured .home-card__foreground {
top: unset;
}
#home-featured .home-card__background img {
width: 100%; /* Изображение будет адаптироваться по ширине */
max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
height: auto; /* Автоматическая подгонка высоты */
}
.home-card__foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(0.25 * 1rem);
color: #fff;
line-height: 1.25;
}