Відмінності між версіями «Шаблон:Mainpage»
Перейти до навігації
Перейти до пошуку
Мітка: Ручний відкіт |
|||
| Рядок 1: | Рядок 1: | ||
{{#css: | {{#css: | ||
.flex-container { | .flex-container { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | /* карточки переносятся вниз, если не помещаются */ | ||
justify-content: space-between; | |||
padding: 0 32px; | gap: 20px; /* расстояние между карточками */ | ||
margin: 40px auto; /* отступ сверху/снизу */ | |||
padding: 0 32px; /* отступы слева/справа */ | |||
} | } | ||
/* | /* По умолчанию (мобильные устройства до 1024px): одна колонка */ | ||
.mainpage-card { | .mainpage-card { | ||
flex: | flex: 0 0 100%; | ||
background: #f6f6f6; | background: #f6f6f6; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
| Рядок 26: | Рядок 25: | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
box-sizing: border-box; | |||
} | |||
/* При ширине экрана от 1024px до 1439px: две колонки */ | |||
@media (min-width: 1024px) and (max-width: 1439px) { | |||
.mainpage-card { | |||
flex: 0 0 calc((100% - 20px) / 2); | |||
/* 1 горизонтальный gap = 20px, значит вычитаем 20px из 100%, делим на 2 */ | |||
} | |||
} | |||
/* При ширине экрана от 1440px и выше: три колонки */ | |||
@media (min-width: 1440px) { | |||
.mainpage-card { | |||
flex: 0 0 calc((100% - 40px) / 3); | |||
/* 2 горизонтальных gap (три колонки => два «пробела») = 2 * 20px = 40px */ | |||
} | |||
} | } | ||
| Рядок 43: | Рядок 59: | ||
} | } | ||
.mainpage-card .image { | .mainpage-card .image { | ||
height: auto; | height: auto; | ||
min-height: 140px; | min-height: 140px; | ||
max-height: 200px; | max-height: 200px; | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| Рядок 63: | Рядок 78: | ||
} | } | ||
.CategoryTreeItem { | .CategoryTreeItem { | ||
font-size: 1.15em !important; | font-size: 1.15em !important; | ||
Версія за 11:41, 4 квітня 2025