fix: плавное уменьшение шапки и переключение логотипов

etpgrf_site/typograph/templates/typograph/base.html

@@ -37,6 +37,18 @@
     <link rel="manifest" href="{% static 'site.webmanifest' %}" />
     {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
     {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    <style>
+      :root {
+        --bg-image-text: url("{% static 'svg/logo-etpgrf-site-light-txt.svg' %}");
+        --bg-image-logo: url("{% static 'svg/logo-etpgrf-site-light-compact.svg' %}");
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg-image-text: url("{% static 'svg/logo-etpgrf-site-dark-txt.svg' %}");
+          --bg-image-logo: url("{% static 'svg/logo-etpgrf-site-dark-compact.svg' %}");
+        }
+      }
+    </style>
     {# Custom CSS #}<link href="{% static 'css/etpgrf.css' %}" rel="stylesheet" />
     {# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
     {# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@@ -45,14 +57,19 @@
 
 {# ШАПКА и главное меню #}
 <nav id="main-navbar" class="navbar navbar-expand-lg mb-4">
-  <div class="container p-0">
+  <div id="logo" class="container logo-big" style="background-image: var(--bg-image-logo);">
-    <a class="navbar-brand" href="/">
+    <a class="navbar-brand" href="/"  style="background-image: var(--bg-image-text);" title="ETPGRF — единая типографика для веба">
-        <img id="logo-img" class="logo-img p-0 m-0" src=""
+        {# Полный логотип background: light-dark( url('{% static 'svg/logo-etpgrf-site-light-compact.svg' %}'), url('{% static 'svg/logo-etpgrf-site-light.svg' %}') ); #}
-             data-src-light="{% static 'svg/logo-etpgrf-site-light.svg' %}"
+{#        <picture class="logo-full">#}
-             data-src-light-compact="{% static 'svg/logo-etpgrf-site-light-compact.svg' %}"
+{#            <source srcset="{% static 'svg/logo-etpgrf-site-dark.svg' %}" media="(prefers-color-scheme: dark)">#}
-             data-src-dark="{% static 'svg/logo-etpgrf-site-dark.svg' %}"
+{#            <img src="{% static 'svg/logo-etpgrf-site-light.svg' %}" alt="ETPGRF" class="logo-img">#}
-             data-src-dark-compact="{% static 'svg/logo-etpgrf-site-dark-compact.svg' %}"
+{#        </picture>#}
-             alt="ETPGRF — единая типографика для веба">
+
+        {# Компактный логотип (скрыт через CSS opacity) #}
+{#        <picture class="logo-compact">#}
+{#            <source srcset="{% static 'svg/logo-etpgrf-site-dark-compact.svg' %}" media="(prefers-color-scheme: dark)">#}
+{#            <img src="{% static 'svg/logo-etpgrf-site-light-compact.svg' %}" alt="ETPGRF" class="logo-img">#}
+{#        </picture>#}
     </a>
   </div>
 </nav>

public/static/css/etpgrf.css

@@ -48,40 +48,53 @@ body {
   flex-direction: column;
 }
 
-/* Навбар: используем переменную для фона */
+#main-navbar {
-.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%;
 }
 
-/* Стили для скролла */
+#main-navbar > #logo.logo-big > .navbar-brand {
-.navbar-scrolled {
+  height: 105px;
-  height: 55px;
+  width: 500px;
+  opacity: 1;
+  transition: .4s ease;
 }
 
-/* Логотип */
+#main-navbar > #logo:not(.logo-big) > .navbar-brand {
-.logo-img {
+  height: 60px;
-  width: 70%;
+  width: 285px;
-  margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */
+  transition: .4s ease;
-  height: 151px; /* Ограничиваем высоту */
+  opacity: 0;
-  object-fit: contain; /* Вписываем, сохраняя пропорции */
-}
-
-/* Уменьшаем логотип при скролле */
-.navbar-scrolled .logo-img {
-  height: 78px; /* Компактная высота */
-  margin-left: -5%;
 }
 
 /* Контент растягивается, чтобы прижать футер */

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');
+        if (!navbar) return;
-        const navbar = document.getElementById('main-navbar');
+        const navbar = document.getElementById('logo');
-        
+        const scrollY = window.scrollY;
-        if (!logoImg || !navbar) return;
 
-        const isDark = darkModeMediaQuery.matches;
+        // Гистерезис: включаем после 60px, выключаем до 10px
-        // Используем window.scrollY для определения прокрутки
+        // Это предотвращает дребезг на границе
-        // Если прокрутили больше 50px, уменьшаем шапку
+        if (scrollY > 60) {
-        const isScrolled = window.scrollY > 50; 
+            navbar.classList.remove('logo-big');
-
+        } else if (scrollY < 10) {
-        if (isScrolled) {
+            navbar.classList.add('logo-big');
-            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;
         }
     }
 
-    // Инициализация темы и логотипа
-    updateTheme(darkModeMediaQuery);
-    darkModeMediaQuery.addEventListener('change', updateTheme);
-    
     // Инициализация логотипа при загрузке и скролле
-    document.addEventListener('DOMContentLoaded', updateLogo);
+    window.addEventListener('scroll', updateLogo, { passive: true });
-    window.addEventListener('scroll', updateLogo);
-
 
     // --- КУКИ И СЧЕТЧИКИ ---
     const COOKIE_KEY = 'cookie_consent';