MediaWiki:Common.css: відмінності між версіями

Матеріал з Країнопедії
Немає опису редагування
Немає опису редагування
Рядок 11: Рядок 11:




/* Контейнер банера */
.banner-wrapper {
.banner-wrapper {
   width: 960px;
   width: 960px;
Рядок 20: Рядок 21:
}
}


.banner-img {
/* Селектор для файлів — MediaWiki обгортає зображення у figure */
.banner-wrapper .banner-image img {
   width: 960px;
   width: 960px;
   height: auto;
   height: auto;
   display: block;
   display: block;
  transition: left 0.3s ease-in-out;
   position: relative;
   position: relative;
   left: 0;
   left: 0;
  transition: left 0.3s ease-in-out;
}
}


/* На вузьких екранах — зсуваємо картинку вліво для обрізки */
/* Мобільне обрізання */
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) {
   .banner-wrapper {
   .banner-wrapper {
Рядок 36: Рядок 38:
   }
   }


   .banner-img {
   .banner-wrapper .banner-image img {
    position: relative;
     left: -280px; /* (960 - 400)/2 */
     left: -280px; /* центрований фрагмент (960 - 400)/2 = 280px */
   }
   }
}
}

Версія за 01:22, 18 липня 2025

/** Розміщений тут CSS буде застосовуватися до всіх тем оформлення */
/* Змінюємо шрифт для логотипу "Переїздопедія" */
.mw-logo-wordmark {
    font-family: Linux Libertine, Georgia, Times, serif; /* ЗАМІНІТЬ "Назва Вашого Шрифту" */

    font-size: 18px; /* Змініть розмір шрифту, якщо потрібно */
    font-weight: bold; /* Змініть товщину шрифту, якщо потрібно */
    color: #333; /* Змініть колір тексту, якщо потрібно */
    /* 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: 240px;
  }

  .banner-wrapper .banner-image img {
    left: -280px; /* (960 - 400)/2 */
  }
}