Шаблон:Заглавная/styles.css: различия между версиями
Материал из FIRE STATION WIKI
Дополнительные действия
Нет описания правки |
Нет описания правки |
||
| Строка 31: | Строка 31: | ||
} | } | ||
/* Базово: 3 элемента в ряд ( | /* Базово: 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; | |||
} | } | ||
Версия от 09:25, 8 апреля 2026
.главная-враппер {
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 8px;
margin-bottom: 15px;
}
@media (max-width: 750px) {
.главная-враппер {
grid-template-columns: 1fr;
}
}
.главная-враппер-Кнопки {
padding: 2px;
margin-top: 3px;
}
.главная-враппер-Кнопки,
.главная-враппер-Информация {
display: flex;
flex-direction: column;
gap: 3px;
}
.главная-враппер-сообщества-Кнопки {
padding: 3px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 3px;
}
/* Базово: 3 элемента в ряд (2/6 колонки на элемент) */
.главная-враппер-сообщества-Кнопки > * {
grid-column: span 2;
min-width: 0;
}
/* Если в последнем ряду 2 элемента (например, всего 5) — по половине строки */
.главная-враппер-сообщества-Кнопки > :nth-last-child(2):nth-child(3n + 1),
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 2) {
grid-column: span 3;
}
/* Если в последнем ряду 1 элемент — на всю строку */
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
}
@media (max-width: 1050px) {
.главная-враппер-сообщества-Кнопки {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.главная-враппер-сообщества-Кнопки > * {
grid-column: span 1;
}
.главная-враппер-сообщества-Кнопки > :nth-last-child(2):nth-child(3n + 1),
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 2),
.главная-враппер-сообщества-Кнопки > :last-child:nth-child(3n + 1) {
grid-column: span 1;
}
}
@media (max-width: 750px) {
.главная-враппер-сообщества-Кнопки {
grid-template-columns: 1fr;
}
.главная-враппер-сообщества-Кнопки > * {
grid-column: 1 / -1;
}
}
.главная-ссылки {
display: flex;
min-width: 24%;
padding: 3px;
gap: 6px;
}
.главная-ссылки-Ссылка {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 750px) {
.главная-ссылки {
flex-direction: column;
}
}
.главная-враппер-2 img {
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;
}
.красивая-кнопка-Картинка span {
height: 100%;
}
.красивая-кнопка-Картинка img {
height: 100%;
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;
}
.заглавная-кнопка-СоцСеть-Картинка {
position: relative;
display: flex;
align-items: center;
}
.красивая-кнопка-СоцСеть-Картинка img {
height: 100%;
width: auto;
}