Шаблон:заглавная/styles.css

Вернуться

Строка 31: Строка 31:
}
}


/* Базово: 3 элемента в ряд (каждый занимает 2 из 6 колонок) */
/* Базово: 3 элемента в ряд (2/6 колонки на элемент) */
.главная-враппер-сообщества-Кнопки > * {
.главная-враппер-сообщества-Кнопки > * {
grid-column: span 2;
grid-column: span 2;
Строка 37: Строка 37:
}
}


/* Если в последнем ряду 2 элемента (например всего 5) — растягиваем их на всю строку */
/* Если в последнем ряду 2 элемента (например, всего 5) — по половине строки */
.главная-враппер-сообщества-Кнопки > :nth-last-child(2):nth-child(3n + 1),
.главная-враппер-сообщества-Кнопки > :nth-last-child(2):nth-child(3n + 1),
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 2) {
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 2) {
Строка 43: Строка 43:
}
}


/* Если в последнем ряду 1 элемент — на всю ширину */
/* Если в последнем ряду 1 элемент — на всю строку */
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 1) {
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
grid-column: 1 / -1;
Строка 96: Строка 96:
.главная-враппер-2 img {
.главная-враппер-2 img {
image-rendering: auto;
image-rendering: auto;
}
.красивая-кнопка {
position: relative;
display: flex;
width: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
border-radius: 3px;
}
.красивая-кнопка-Ссылка:hover {
opacity: 0.05;
}
}


.красивая-кнопка-Картинка {
.красивая-кнопка-Картинка {
position: relative;
display: flex;
align-items: center;
padding: 4px;
height: 88px;
height: 88px;
}
}
Строка 109: Строка 127:
height: 100%;
height: 100%;
width: auto;
width: auto;
}
.красивая-кнопка-Контент {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 100%;
padding: 6px 10px;
box-sizing: border-box;
min-width: 0;
}
.красивая-кнопка-контент-Текст {
line-height: 1;
}
.красивая-кнопка-контент-Подтекст {
font-size: 12px;
}
.красивая-кнопка-Ссылка {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
background-color: #FFFFFF;
opacity: 0;
transition: all 0.2s ease;
}
}