diff --git a/etpgrf_site/typograph/templates/typograph/base.html b/etpgrf_site/typograph/templates/typograph/base.html index 9e19550..f13d89f 100644 --- a/etpgrf_site/typograph/templates/typograph/base.html +++ b/etpgrf_site/typograph/templates/typograph/base.html @@ -37,6 +37,18 @@ {# Bootstrap 5 CSS #} {# Bootstrap Icons #} + {# Custom CSS #} {# HTMX #} {# Alpine.js #} @@ -45,14 +57,19 @@ {# ШАПКА и главное меню #} diff --git a/public/static/css/etpgrf.css b/public/static/css/etpgrf.css index 4ad578f..8ba2d20 100644 --- a/public/static/css/etpgrf.css +++ b/public/static/css/etpgrf.css @@ -48,40 +48,53 @@ body { flex-direction: column; } -/* Навбар: используем переменную для фона */ -.navbar { +#main-navbar { + z-index: 1000; background-color: var(--bs-navbar-bg) !important; border-bottom: 1px solid var(--bs-border-color); - padding: 0; /* Убираем отступы у навбара */ + padding: 0; position: sticky; top: 0; - height: 105px; - z-index: 1000; backdrop-filter: blur(4px); /* Эффект размытия */ box-shadow: 0 -25px 30px 15px var(--bs-border-color); + /* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */ } -.navbar-brand { +#main-navbar > .container { + background: no-repeat left; + background-size: contain; +} + +#main-navbar > .container.logo-big { + background-image: var(--bg-image-text); + transition: .4s ease; +} + +#main-navbar > .container:not(.logo-big) { + background-image: none; + transition: .4s ease; +} + +#main-navbar > #logo > .navbar-brand { padding: 0; /* Убираем отступы у бренда */ + display: block; /* Блок, чтобы работали размеры */ + background: no-repeat left; + background-size: contain; + margin-left: -1.5%; } -/* Стили для скролла */ -.navbar-scrolled { - height: 55px; +#main-navbar > #logo.logo-big > .navbar-brand { + height: 105px; + width: 500px; + opacity: 1; + transition: .4s ease; } -/* Логотип */ -.logo-img { - width: 70%; - margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */ - height: 151px; /* Ограничиваем высоту */ - object-fit: contain; /* Вписываем, сохраняя пропорции */ -} - -/* Уменьшаем логотип при скролле */ -.navbar-scrolled .logo-img { - height: 78px; /* Компактная высота */ - margin-left: -5%; +#main-navbar > #logo:not(.logo-big) > .navbar-brand { + height: 60px; + width: 285px; + transition: .4s ease; + opacity: 0; } /* Контент растягивается, чтобы прижать футер */ diff --git a/public/static/js/base.js b/public/static/js/base.js index d62400d..ef7d123 100644 --- a/public/static/js/base.js +++ b/public/static/js/base.js @@ -7,39 +7,30 @@ function updateTheme(e) { const theme = e.matches ? 'dark' : 'light'; document.documentElement.setAttribute('data-bs-theme', theme); - // При смене темы обновляем и логотип - updateLogo(); } + // Установить при загрузке + updateTheme(darkModeMediaQuery); + // Слушать изменения + darkModeMediaQuery.addEventListener('change', updateTheme); + // --- ЛОГОТИП И СКРОЛЛ --- function updateLogo() { - const logoImg = document.getElementById('logo-img'); - const navbar = document.getElementById('main-navbar'); - - if (!logoImg || !navbar) return; + if (!navbar) return; + const navbar = document.getElementById('logo'); + const scrollY = window.scrollY; - const isDark = darkModeMediaQuery.matches; - // Используем window.scrollY для определения прокрутки - // Если прокрутили больше 50px, уменьшаем шапку - const isScrolled = window.scrollY > 50; - - if (isScrolled) { - navbar.classList.add('navbar-scrolled'); - logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact; - } else { - navbar.classList.remove('navbar-scrolled'); - logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight; + // Гистерезис: включаем после 60px, выключаем до 10px + // Это предотвращает дребезг на границе + if (scrollY > 60) { + navbar.classList.remove('logo-big'); + } else if (scrollY < 10) { + navbar.classList.add('logo-big'); } } - // Инициализация темы и логотипа - updateTheme(darkModeMediaQuery); - darkModeMediaQuery.addEventListener('change', updateTheme); - // Инициализация логотипа при загрузке и скролле - document.addEventListener('DOMContentLoaded', updateLogo); - window.addEventListener('scroll', updateLogo); - + window.addEventListener('scroll', updateLogo, { passive: true }); // --- КУКИ И СЧЕТЧИКИ --- const COOKIE_KEY = 'cookie_consent';