Шаблон:Main page/Aavikko/styles.css: различия между версиями

Материал из Aavikko
мНет описания правки
мНет описания правки
Строка 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;
}