Відмінності між версіями «Шаблон:Mainpage»

Шаблон:Mainpage (переглянути вихідний код)

Версія за 11:41, 4 квітня 2025

238 байтів додано , 1 місяць тому

нема опису редагування

Автомодеровані користувачі, Бюрократи, Чек'юзери, Боти для структурованих обговорень, Адміністратори інтерфейсу, Модератори, Керівники push-підписками, Адміністратори (Семантична MediaWiki), Куратори (Семантична MediaWiki), Редактори (Semantic MediaWiki), Приховувачі, Адміністратори

4129

редагувань

@@ Рядок 1: / Рядок 1: @@
 {{#css:
 .flex-container {
-   display: flex;         /* Включаем флекс */
+   display: flex;
-   flex-wrap: wrap;       /* Разрешаем перенос строк */
+   flex-wrap: wrap;
-   gap: 40px;             /* Отступ между карточками */
+  /* карточки переносятся вниз, если не помещаются */
-   justify-content: space-between; /* или center, в зависимости от желаемого выравнивания */
+  justify-content: space-between;
-   padding: 0 32px;
+   gap: 20px;               /* расстояние между карточками */
-  margin: 40px auto;
+   margin: 40px auto;       /* отступ сверху/снизу */
+   padding: 0 32px;         /* отступы слева/справа */
 }
-/* Каждая «карточка» */
+/* По умолчанию (мобильные устройства до 1024px): одна колонка */
 .mainpage-card {
-   flex: 1 1 auto;        /* Позволяет и сжиматься, и расти */
+   flex: 0 0 100%;
-  min-width: 280px;      /* Минимальная ширина карточки */
-  /* max-width: 480px;   Если нужно ограничить максимальную ширину, раскомментируйте */
    background: #f6f6f6;
    border: 1px solid #ddd;
@@ Рядок 26: / Рядок 25: @@
    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 {
    height: auto;
    min-height: 140px;
-   max-height: 200px;  /* Можно убрать, если нужно больше свободы */
+   max-height: 200px;
    display: flex;
    justify-content: center;
@@ Рядок 63: / Рядок 78: @@
 }
-/* Стили для CategoryTree */
 .CategoryTreeItem {
    font-size: 1.15em !important;