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

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

Версія за 01:48, 15 квітня 2025

204 байти додано ,  8 місяців тому
нема опису редагування
Мітка: Скасовано
 
(Не показано 57 проміжних версій цього користувача)
Рядок 1: Рядок 1:
__NOTOC__
{{#css:
{{#css:
.mainpage-columns {
.flex-container {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;              
   justify-content: space-between;
   justify-content: space-between;
   gap: 24px; /* менше відстань між блоками */
   gap: 20px;                  
   margin: 40px auto;
   margin: 40px auto;          
   padding: 0 24px;
   padding: 0 32px;            
  max-width: 1500px;
  align-items: stretch;
}
}


.mainpage-column {
/* По умолчанию (mobile-first) — одна колонка */
   flex: 1 1 calc(33.333% - 16px); /* ширші колонки */
.mainpage-card {
  max-width: 480px;
   flex: 0 0 100%;
   background: #fff;
   background: #f6f6f6;
   border: 1px solid #ddd;
   border: 1px solid #ddd;
   border-radius: 12px;
   border-radius: 12px;
   padding: 28px 24px;
   padding: 28px 24px;
  text-align: center;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
   box-shadow: 0 8px 24px rgba(0,0,0,0.06);
 
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   justify-content: flex-start;
   justify-content: flex-start;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
}


.mainpage-column h2 {
/* Две колонки (пример) */
  font-size: 28px;
@media (min-width: 768px) and (max-width: 1199px) {
  margin-bottom: 20px;
   .mainpage-card {
   color: #002855;
    flex: 0 0 calc((100% - 20px) / 2);
  font-weight: 700;
   }
  border-bottom: 2px solid #0057b7;
  display: inline-block;
   padding-bottom: 6px;
}
}


.categorytree {
/* Три колонки (пример) */
  text-align: left;
@media (min-width: 1200px) {
   font-size: 18px;
   .mainpage-card {
  line-height: 1.6;
    flex: 0 0 calc((100% - 40px) / 3);
   margin-top: auto;
   }
}
}


.image img {
/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */
  max-width: 100%;
@media (max-width: 767px) {
   height: auto;
   .flex-container {
  margin-bottom: 16px;
    margin: 20px auto;   /* вместо 40px, чтобы уменьшить верх/низ */
   border-radius: 6px;
    padding: 0 10px;     /* вместо 32px, чтобы карточка стала шире */
   }
}
}


/* 2 колонки */
.mainpage-card:hover {
@media screen and (max-width: 1150px) {
   transform: translateY(-4px);
   .mainpage-column {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    flex: 1 1 calc(50% - 12px);
   }
}
}


/* 1 колонка */
.mainpage-card h2 {
@media screen and (max-width: 700px) {
  font-size: 1.8em;
   .mainpage-columns {
  color: #002855;
    flex-direction: column;
  margin-bottom: 18px;
    padding: 0 16px;
   border-bottom: 2px solid #0057b7;
   }
  padding-bottom: 4px;
  width: 100%;
   text-align: left;
}


  .mainpage-column {
.mainpage-card .image {
    flex: 1 1 100%;
  height: auto;
    max-width: 100%;
  min-height: 140px;
  }
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5em;
  width: 100%;
}


  .mainpage-column h2 {
.mainpage-card .image img {
    font-size: 24px;
  width: 100%;
   }
  height: auto;
  max-width: 100%;
   object-fit: contain;
  display: block;
  margin: 0 auto;
}


  .categorytree {
.CategoryTreeItem {
    font-size: 16px;
  font-size: 1.1em !important;
   }
  line-height: 1.7 !important;
  text-align: left !important;
   color: inherit !important;
}
}
}}
}}
 
<div class="flex-container">
 
   {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }}
 
  {{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }}
<div class="mainpage-columns">
  {{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }}
   <div class="mainpage-column">
   {{#if: {{{4|}}} | <div class="mainpage-card">{{{4}}}</div> }}
    <h2>[[Категорія:ВКЗ|ВКЗ]]</h2>
   {{#if: {{{5|}}} | <div class="mainpage-card">{{{5}}}</div> }}
    [[Файл:Logo.png|центр|190px|безрамки|alt=ВКЗ|link=Категорія:ВКЗ]]
  {{#if: {{{6|}}} | <div class="mainpage-card">{{{6}}}</div> }}
    <categorytree mode="pages" notranslations="on">ВКЗ</categorytree>
   {{#if: {{{7|}}} | <div class="mainpage-card">{{{7}}}</div> }}
   </div>
   {{#if: {{{8|}}} | <div class="mainpage-card">{{{8}}}</div> }}
 
  {{#if: {{{9|}}} | <div class="mainpage-card">{{{9}}}</div> }}
   <div class="mainpage-column">
   {{#if: {{{10|}}} | <div class="mainpage-card">{{{10}}}</div> }}
    <h2>[[Категорія:Електронний суд|ЕС]]</h2>
    [[Файл:ES logo.jpg|центр|190px|безрамки|alt=Електронний суд|link=Категорія:Електронний суд]]
    <categorytree mode="pages" notranslations="on">Електронний суд</categorytree>
   </div>
 
   <div class="mainpage-column">
    <h2>[[Категорія:Портал Судова влада України|Портал]]</h2>
    [[Файл:Court Portal logo.png|центр|190px|безрамки|alt=Портал|link=Категорія:Портал Судова влада України]]
    <categorytree mode="pages" notranslations="on">Портал Судова влада України</categorytree>
   </div>
</div>
</div>
Отримано з http://wiki.court.gov.ua/w/Спеціальна:Мобільна_різниця_версій/6289...6434