|
|
| Рядок 1: |
Рядок 1: |
| /** Розміщений тут CSS буде застосовуватися до всіх тем оформлення */
| | .place-card{ |
| /* Змінюємо шрифт для логотипу "Переїздопедія" */
| | display:flex; |
| .mw-logo-wordmark {
| | gap:16px; |
| font-family: Linux Libertine, Georgia, Times, serif; /* ЗАМІНІТЬ "Назва Вашого Шрифту" */
| | padding:12px; |
| | | border:1px solid #ddd; |
| font-size: 18px; /* Змініть розмір шрифту, якщо потрібно */
| | border-radius:12px; |
| font-weight: bold; /* Змініть товщину шрифту, якщо потрібно */
| | background:#fff; |
| color: #333; /* Змініть колір тексту, якщо потрібно */
| | margin:0 0 14px 0; |
| /* white-space: nowrap; /* Може бути корисним, якщо логотип розбивається на кілька рядків */
| |
| }
| |
| | |
| | |
| /* Контейнер банера */
| |
| .banner-wrapper { | |
| width: 960px; | |
| max-width: 100%;
| |
| height: 240px; | |
| overflow: hidden; | |
| margin: 0 auto; | |
| position: relative; | |
| }
| |
| | |
| /* Селектор для файлів — MediaWiki обгортає зображення у figure */
| |
| .banner-wrapper .banner-image img {
| |
| width: 960px;
| |
| height: auto; | |
| display: block; | |
| transition: left 0.3s ease-in-out;
| |
| position: relative;
| |
| left: 0;
| |
| }
| |
| | |
| /* Мобільне обрізання */
| |
| @media screen and (max-width: 600px) {
| |
| .banner-wrapper {
| |
| width: 400px;
| |
| height: 400px;
| |
| }
| |
| | |
| .banner-wrapper .banner-image img {
| |
| left: -280px; /* (960 - 400)/2 */
| |
| }
| |
| } | | } |
| | .place-card__img{ width:260px; flex:0 0 260px; } |
| | .place-card__img img{ border-radius:10px; } |
| | .place-card__title{ font-size:18px; font-weight:700; margin:0 0 6px 0; } |
| | .place-card__meta{ font-size:14px; opacity:.9; margin:0 0 8px 0; } |
| | .place-card__desc{ font-size:14px; line-height:1.35; } |
