MediaWiki:Common.css: відмінності між версіями
Перейти до навігації
Перейти до пошуку
Створена сторінка: .section-projects { background: #003d82; →синий цвет университета: color: #ffd700; →жёлтый: padding: 15px 20px; font-size: 18px; font-weight: bold; border-radius: 8px; margin: 20px 0 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.15); text-align: center; } .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); →5 колонок: gap: 20px; padding: 25px... |
Немає опису редагування |
||
| Рядок 1: | Рядок 1: | ||
/* Приветственный блок */ | |||
.welcome-text { | |||
text-align: center; | |||
font-style: italic; | |||
margin: 30px auto; | |||
padding: 30px; | |||
max-width: 900px; | |||
background: #003d82; | |||
color: white; | |||
border-radius: 12px; | |||
box-shadow: 0 4px 20px rgba(0,61,130,0.15); | |||
} | |||
.welcome-text strong { | |||
color: #ffd700; | |||
font-size: 22px; | |||
font-weight: 600; | |||
display: block; | |||
margin-top: 10px; | |||
font-style: normal; | |||
} | |||
/* Заголовок секции */ | |||
.section-projects { | .section-projects { | ||
background: #003d82; | background: #003d82; | ||
color: #ffd700; | color: #ffd700; | ||
padding: | padding: 18px 25px; | ||
font-size: | font-size: 20px; | ||
font-weight: | font-weight: 600; | ||
border-radius: | border-radius: 10px; | ||
margin: 20px 0 | margin: 30px 0 20px 0; | ||
text-align: center; | text-align: center; | ||
box-shadow: 0 2px 10px rgba(0,61,130,0.1); | |||
} | |||
.section-projects .emoji { | |||
font-size: 26px; | |||
margin-right: 12px; | |||
} | } | ||
/* Сетка категорий - 4 В РЯД */ | |||
.category-grid { | .category-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(4, 1fr); /* 4 колонки */ | ||
gap: | gap: 25px; | ||
padding: | padding: 30px; | ||
background: # | background: #f8f9fa; | ||
border-radius: 12px; | |||
border-radius: | margin-bottom: 30px; | ||
margin-bottom: | |||
} | } | ||
/* Адаптивность */ | |||
@media (max-width: 1200px) { | |||
@media (max-width: | |||
.category-grid { | .category-grid { | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, 1fr); | ||
| Рядок 35: | Рядок 58: | ||
} | } | ||
@media (max-width: | @media (max-width: 800px) { | ||
.category-grid { | .category-grid { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
| Рядок 41: | Рядок 64: | ||
} | } | ||
@media (max-width: | @media (max-width: 500px) { | ||
.category-grid { | .category-grid { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
| Рядок 47: | Рядок 70: | ||
} | } | ||
/* Карточка категории - МИНИМАЛИСТИЧНЫЙ ДИЗАЙН */ | |||
.category-card { | .category-card { | ||
background: white; | background: white; | ||
border-radius: 12px; | |||
border-radius: | padding: 25px 20px; | ||
padding: 20px | |||
text-align: center; | text-align: center; | ||
box-shadow: 0 | box-shadow: 0 2px 8px rgba(0,0,0,0.08); | ||
transition: all 0.3s | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
cursor: pointer; | cursor: pointer; | ||
border: 1px solid transparent; | |||
} | } | ||
.category-card:hover { | .category-card:hover { | ||
transform: translateY(- | transform: translateY(-6px); | ||
box-shadow: 0 | box-shadow: 0 8px 24px rgba(0,61,130,0.15); | ||
border-color: # | border-color: #003d82; | ||
} | } | ||
/* Иконка */ | |||
.category-card img { | .category-card img { | ||
width: | width: 70px; | ||
height: | height: 70px; | ||
object-fit: contain; | object-fit: contain; | ||
margin: 0 auto | margin: 0 auto 15px auto; | ||
display: block; | display: block; | ||
transition: transform 0.3s ease; | transition: transform 0.3s ease; | ||
} | } | ||
.category-card:hover img { | .category-card:hover img { | ||
transform: scale(1. | transform: scale(1.08); | ||
} | } | ||
/* Название категории ПОД иконкой */ | |||
.category-card .category-title { | .category-card .category-title { | ||
font-size: 14px; | font-size: 14px; | ||
font-weight: | font-weight: 500; | ||
color: # | color: #2c3e50; | ||
margin: 0; | margin: 0; | ||
line-height: 1.4; | line-height: 1.4; | ||
min-height: 40px; /* чтобы все карточки были одной высоты */ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
.category-card a { | .category-card .category-title a { | ||
text-decoration: none; | text-decoration: none; | ||
color: # | color: #2c3e50; | ||
transition: color 0.2s ease; | |||
. | |||
} | } | ||
. | .category-card:hover .category-title a { | ||
a { | |||
color: #003d82; | color: #003d82; | ||
} | } | ||
/* Убираем рамку у ссылок на изображен | |||
Версія за 11:24, 9 лютого 2026
/* Приветственный блок */
.welcome-text {
text-align: center;
font-style: italic;
margin: 30px auto;
padding: 30px;
max-width: 900px;
background: #003d82;
color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,61,130,0.15);
}
.welcome-text strong {
color: #ffd700;
font-size: 22px;
font-weight: 600;
display: block;
margin-top: 10px;
font-style: normal;
}
/* Заголовок секции */
.section-projects {
background: #003d82;
color: #ffd700;
padding: 18px 25px;
font-size: 20px;
font-weight: 600;
border-radius: 10px;
margin: 30px 0 20px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(0,61,130,0.1);
}
.section-projects .emoji {
font-size: 26px;
margin-right: 12px;
}
/* Сетка категорий - 4 В РЯД */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 колонки */
gap: 25px;
padding: 30px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 30px;
}
/* Адаптивность */
@media (max-width: 1200px) {
.category-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.category-grid {
grid-template-columns: 1fr;
}
}
/* Карточка категории - МИНИМАЛИСТИЧНЫЙ ДИЗАЙН */
.category-card {
background: white;
border-radius: 12px;
padding: 25px 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 1px solid transparent;
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0,61,130,0.15);
border-color: #003d82;
}
/* Иконка */
.category-card img {
width: 70px;
height: 70px;
object-fit: contain;
margin: 0 auto 15px auto;
display: block;
transition: transform 0.3s ease;
}
.category-card:hover img {
transform: scale(1.08);
}
/* Название категории ПОД иконкой */
.category-card .category-title {
font-size: 14px;
font-weight: 500;
color: #2c3e50;
margin: 0;
line-height: 1.4;
min-height: 40px; /* чтобы все карточки были одной высоты */
display: flex;
align-items: center;
justify-content: center;
}
.category-card .category-title a {
text-decoration: none;
color: #2c3e50;
transition: color 0.2s ease;
}
.category-card:hover .category-title a {
color: #003d82;
}
/* Убираем рамку у ссылок на изображен