| (Не показані 43 проміжні версії цього користувача) | |||
| Рядок 1: | Рядок 1: | ||
{{#css: | {{#css: | ||
.flex- | .flex-container { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: space-between; | |||
justify-content: | gap: 20px; | ||
margin: 40px auto; | |||
margin: | padding: 0 32px; | ||
padding: 0 | |||
} | } | ||
. | /* По умолчанию (mobile-first) — одна колонка */ | ||
flex: | .mainpage-card { | ||
flex: 0 0 100%; | |||
background: #f6f6f6; | background: #f6f6f6; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: | padding: 28px 24px; | ||
box-shadow: 0 6px | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: | justify-content: flex-start; | ||
align-items: flex-start; | |||
transition: transform 0.2s ease, box-shadow 0.2s ease; | |||
box-sizing: border-box; | |||
} | |||
/* Две колонки (пример) */ | |||
@media (min-width: 768px) and (max-width: 1199px) { | |||
.mainpage-card { | |||
flex: 0 0 calc((100% - 20px) / 2); | |||
} | |||
} | |||
/* Три колонки (пример) */ | |||
@media (min-width: 1200px) { | |||
.mainpage-card { | |||
flex: 0 0 calc((100% - 40px) / 3); | |||
} | |||
} | } | ||
/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */ | |||
@media (max-width: 767px) { | |||
.flex-container { | |||
margin: 20px auto; /* вместо 40px, чтобы уменьшить верх/низ */ | |||
padding: 0 10px; /* вместо 32px, чтобы карточка стала шире */ | |||
} | |||
} | } | ||
. | .mainpage-card:hover { | ||
transform: translateY(-4px); | |||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); | |||
} | } | ||
. | .mainpage-card h2 { | ||
font-size: 1.8em; | |||
color: #002855; | |||
margin-bottom: 18px; | |||
border-bottom: 2px solid #0057b7; | |||
padding-bottom: 4px; | |||
width: 100%; | |||
text-align: left; | |||
} | } | ||
.image | .mainpage-card .image { | ||
height: auto; | height: auto; | ||
min-height: 140px; | |||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
margin-bottom: | margin-bottom: 0.5em; | ||
width: 100%; | |||
} | } | ||
. | .mainpage-card .image img { | ||
width: 100%; | |||
height: auto; | |||
max-width: 100%; | |||
object-fit: contain; | |||
display: block; | |||
margin: 0 auto; | |||
} | } | ||
.CategoryTreeItem { | .CategoryTreeItem { | ||
font-size: 1. | font-size: 1.1em !important; | ||
line-height: 1.7 !important; | line-height: 1.7 !important; | ||
text-align: left !important; | text-align: left !important; | ||
color: inherit !important; | color: inherit !important; | ||
} | } | ||
}} | }} | ||
<div class="flex-container"> | |||
<div class="flex- | {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | ||
{{#if: {{{1|}}} | <div>{{{1}}}</div> }} | {{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }} | ||
{{#if: {{{2|}}} | <div>{{{2}}}</div> }} | {{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }} | ||
{{#if: {{{3|}}} | <div>{{{3}}}</div> }} | {{#if: {{{4|}}} | <div class="mainpage-card">{{{4}}}</div> }} | ||
{{#if: {{{4|}}} | <div>{{{4}}}</div> }} | {{#if: {{{5|}}} | <div class="mainpage-card">{{{5}}}</div> }} | ||
{{#if: {{{5|}}} | <div>{{{5}}}</div> }} | {{#if: {{{6|}}} | <div class="mainpage-card">{{{6}}}</div> }} | ||
{{#if: {{{6|}}} | <div>{{{6}}}</div> }} | {{#if: {{{7|}}} | <div class="mainpage-card">{{{7}}}</div> }} | ||
{{#if: {{{7|}}} | <div>{{{7}}}</div> }} | {{#if: {{{8|}}} | <div class="mainpage-card">{{{8}}}</div> }} | ||
{{#if: {{{8|}}} | <div>{{{8}}}</div> }} | {{#if: {{{9|}}} | <div class="mainpage-card">{{{9}}}</div> }} | ||
{{#if: {{{9|}}} | <div>{{{9}}}</div> }} | {{#if: {{{10|}}} | <div class="mainpage-card">{{{10}}}</div> }} | ||
{{#if: {{{10|}}} | <div>{{{10}}}</div> }} | |||
</div> | </div> | ||