src/css/custom.css - master - Phoenix97/PhoenixLab-site

src/css/custom.css
102 строки3 KB
Sergey Braumann
Update
08 июн 2025, 13:08
08 июн 2025, 13:081baf941
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  /* Основной цвет — Императорский красный */
  --ifm-color-primary: #9e1a1a;
  --ifm-color-primary-dark: #6b1010;
  --ifm-color-primary-darker: #500a0a;
  --ifm-color-primary-darkest: #380707;
  
  /* Светлые оттенки для кнопок и хайлайтов */
  --ifm-color-primary-light: #c43f3f;
  --ifm-color-primary-lighter: #d46e6e;
  --ifm-color-primary-lightest: #e29d9d;

  /* Нейтральные фоны и текст */
  --ifm-background-color: #fdfaf6; /* Цвет слоновой кости */
  --ifm-background-color-alt: #f5f0ec;
  --ifm-font-color: #1c1c1c;

  /* Для кода и подсветки строк */
  --docusaurus-highlighted-code-line-bg: rgba(200, 100, 100, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #ff0000;
  --ifm-color-primary-dark: #4242cf;
  --ifm-color-primary-darker: #ff0000;
  --ifm-color-primary-darkest: #1b1b1f;
  --ifm-color-primary-light: #2121ba;
  --ifm-color-primary-lighter: #1b1b1f;
  --ifm-color-primary-lightest: #1b1b1f;

  --ifm-background-color: #121212;
  --ifm-background-color-alt: #1a1a1a;
  --ifm-font-color: #e0e0e0;

  --docusaurus-highlighted-code-line-bg: rgba(100, 0, 0, 0.2);
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-family: 'Georgia', serif; /* Шрифт с засечками */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff; /* Белый текст */
  border: 2px solid #d4af37; /* Золотая обводка */
  background-color: #9e1a1a; /* Императорский красный */
  transition: all 0.3s ease; /* Плавная анимация при наведении */
  margin: 0 5px;
  border-radius: 5px;
}

.button:hover {
  background-color: #d4af37; /* Золотой при наведении */
  color: #2d5f2e; /* Малахитовый текст */
}

.button--golden {
  border: 2px solid #d4af37;
  background-color: #fff8f0; /* Слоновая кость */
  color: #2d5f2e; /* Малахитовый */
}

.button--golden:hover {
  background-color: #d4af37;
  color: #fff;
}

/* Текст */
.white {
  color: white;
}

.right img {
  position: absolute;
  top: 50%; /* Центрируем вертикально */
  right: 17%; /* Размещаем по правому краю */
  transform: translateY(-50%); /* Корректируем вертикальное центрирование */
}

/* Медиазапрос для экранов до 768px (мобильных и планшетов) */
@media (max-width: 768px) {
  .right img {
    position: relative; /* Возвращаем в поток документа */
    top: auto;
    right: auto;
    transform: none;
    margin-top: 2rem; /* Отступ сверху */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}