Шаблон:Main page/Aavikko/styles.css: различия между версиями
Материал из Aavikko
DeRecnad (обсуждение | вклад) мНет описания правки |
DeRecnad (обсуждение | вклад) мНет описания правки |
||
Строка 26: | Строка 26: | ||
max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */ | max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */ | ||
height: auto; /* Автоматическая подгонка высоты */ | 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; | |||
} | } |
Версия от 15:33, 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;
}