MediaWiki:Common.css: відмінності між версіями
Перейти до навігації
Перейти до пошуку
Немає опису редагування |
Немає опису редагування Мітка: Скасовано |
||
| Рядок 1: | Рядок 1: | ||
.category-grid-container { | .category-grid-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, 1fr); | grid-template-columns: repeat(4, 1fr); | ||
gap: | gap: 24px 16px; | ||
max-width: 1100px; | max-width: 1100px; | ||
margin: 0 auto; | margin: 0 auto 40px auto; | ||
padding: 0 10px; | padding: 0 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.category-card { | |||
.category-card { | |||
text-align: center; | text-align: center; | ||
background: # | background: #ffffff; | ||
border: 1px solid #e0e0e0; | |||
border-radius: 10px; | border-radius: 10px; | ||
padding: 16px | padding: 16px 8px; | ||
box-shadow: 0 2px 8px rgba(0,0,0,0. | box-shadow: 0 2px 8px rgba(0,0,0,0.06); | ||
transition: | transition: all 0.15s ease; | ||
} | } | ||
.category-card:hover { | .category-card:hover { | ||
transform: translateY(- | transform: translateY(-3px); | ||
box-shadow: 0 6px 16px rgba(0,0,0,0.12); | box-shadow: 0 6px 16px rgba(0,0,0,0.12); | ||
border-color: #003d82; | |||
} | } | ||
. | .card-image { | ||
margin-bottom: 12px; | |||
max-width: | } | ||
.card-image img { | |||
max-width: 80px; | |||
height: auto; | height: auto; | ||
} | } | ||
. | .card-title { | ||
font-size: | font-size: 15px; | ||
font-weight: 600; | font-weight: 600; | ||
color: #003d82; | color: #003d82; | ||
line-height: 1. | line-height: 1.4; | ||
} | |||
.card-title a { | |||
color: #003d82; | |||
text-decoration: none; | |||
} | |||
.card-title a:hover { | |||
text-decoration: underline; | |||
} | } | ||
/* Адаптивність | /* Адаптивність */ | ||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
.category-grid-container { | .category-grid-container { | ||
| Рядок 100: | Рядок 67: | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
} | } | ||
Версія за 10:13, 11 лютого 2026
.category-grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px 16px;
max-width: 1100px;
margin: 0 auto 40px auto;
padding: 0 10px;
box-sizing: border-box;
}
.category-card {
text-align: center;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 16px 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.15s ease;
}
.category-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
border-color: #003d82;
}
.card-image {
margin-bottom: 12px;
}
.card-image img {
max-width: 80px;
height: auto;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #003d82;
line-height: 1.4;
}
.card-title a {
color: #003d82;
text-decoration: none;
}
.card-title a:hover {
text-decoration: underline;
}
/* Адаптивність */
@media (max-width: 1024px) {
.category-grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 720px) {
.category-grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.category-grid-container {
grid-template-columns: 1fr;
}
}