|
|
| Рядок 1: |
Рядок 1: |
| {{#css: | | {{Flex columns |
| .mainpage-grid {
| | |1 = [[Файл:Logo.png|ліворуч|альт=|безрамки|190x103px|link= Категорія:ВКЗ]]<categorytree mode="pages" notranslations="on">ВКЗ</categorytree> |
| display: grid;
| | |2 = [[Файл:ES logo.jpg|ліворуч|альт=|безрамки|190x103px|link= Категорія:Електронний суд]]<categorytree mode="pages" notranslations="on">Електронний суд</categorytree> |
| grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
| | |3 = [[Файл:Mail gov ua logo.png|ліворуч|альт=|безрамки|190x103px|link= Категорія:Пошта mail.gov.ua]]<categorytree mode="pages" notranslations="on">Пошта mail.gov.ua</categorytree> |
| gap: 40px;
| | |4 = [[Файл:Court Portal logo.png|ліворуч|альт=|безрамки|190x103px|link= Категорія:Портал Судова влада України]]<categorytree mode="pages" notranslations="on">Портал Судова влада України</categorytree> |
| padding: 0 32px; /* отступы по бокам */
| |
| margin: 40px auto;
| |
| }
| |
| | |
| .mainpage-card { | |
| background: #f6f6f6;
| |
| border: 1px solid #ddd;
| |
| border-radius: 12px;
| |
| padding: 28px 24px;
| |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: flex-start;
| |
| align-items: flex-start;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .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;
| |
| }
| |
| | |
| .mainpage-card .image {
| |
| height: auto;
| |
| min-height: 140px;
| |
| max-height: 200px;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| margin-bottom: 1.2em;
| |
| width: 100%;
| |
| }
| |
| | |
| .mainpage-card .image img {
| |
| max-height: 100%;
| |
| max-width: 80%;
| |
| object-fit: contain;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .CategoryTreeItem {
| |
| font-size: 1.15em !important;
| |
| line-height: 1.7 !important;
| |
| text-align: left !important;
| |
| color: inherit !important;
| |
| }
| |
| }} | | }} |
|
| |
| <div class="mainpage-grid">
| |
| {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }}
| |
| {{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }}
| |
| {{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }}
| |
| {{#if: {{{4|}}} | <div class="mainpage-card">{{{4}}}</div> }}
| |
| {{#if: {{{5|}}} | <div class="mainpage-card">{{{5}}}</div> }}
| |
| {{#if: {{{6|}}} | <div class="mainpage-card">{{{6}}}</div> }}
| |
| {{#if: {{{7|}}} | <div class="mainpage-card">{{{7}}}</div> }}
| |
| {{#if: {{{8|}}} | <div class="mainpage-card">{{{8}}}</div> }}
| |
| {{#if: {{{9|}}} | <div class="mainpage-card">{{{9}}}</div> }}
| |
| {{#if: {{{10|}}} | <div class="mainpage-card">{{{10}}}</div> }}
| |
| </div>
| |