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

fix: плавное уменьшение шапки и переключение логотипов
2026-01-24 12:47:47 +03:00 · 2026-01-23 17:51:17 +03:00
3 changed files with 109 additions and 104 deletions
--- a/etpgrf_site/typograph/templates/typograph/base.html
+++ b/etpgrf_site/typograph/templates/typograph/base.html
@@ -1,75 +1,78 @@
 {% load static %}<!doctype html>
 <html lang="ru">
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">

-    {# --- SEO & Meta Tags --- #}
-    <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
-    <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
-    <meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев">
-    <meta name="author" content="Sergei Erjemin">
+  {# --- SEO & Meta Tags --- #}
+  <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
+  <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
+  <meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев">
+  <meta name="author" content="Sergei Erjemin">

-    {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}
-    <meta property="og:type" content="website">
-    <meta property="og:site_name" content="ETPGRF">
-    <meta property="og:url" content="{{ request.build_absolute_uri }}">
-    <meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}">
-    <meta property="og:description" content="{% block og_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик. Умная типографика для веб-дизайнеров, редакторов и контент-менеджеров.{% endblock %}">
-    {# Картинка должна быть абсолютной ссылкой #}
-    <meta property="og:image" content="{% block og_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
+  {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="ETPGRF" />
+  <meta property="og:url" content="{{ request.build_absolute_uri }}" />
+  <meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}" />
+  <meta property="og:description"  content="{% block og_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик. Умная типографика для веб-дизайнеров, редакторов и контент-менеджеров.{% endblock %}" />
+  <meta property="og:image" content="{% block og_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />

-    {# --- Twitter Cards (X) --- #}
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}">
-    <meta name="twitter:description" content="{% block twitter_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик.{% endblock %}">
-    <meta name="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}">
+  {# --- Twitter Cards (X) --- #}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}" />
+  <meta name="twitter:description" content="{% block twitter_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик.{% endblock %}" />
+  <meta name="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}" />

-    {# --- Favicons --- #}
-    <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96" />
-    <link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)">
-    <link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
-    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
-    <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" />
-    {# 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>
+  {# --- Favicons --- #}
+  <link rel="icon" href="{{ request.scheme }}://{{ request.get_host }}{% static 'favicon.ico' %}" type="image/x-icon" />
+  <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" />
+  <link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)" />
+  <link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
+  <link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
+  <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>
 </head>
 <body>

-{# ШАПКА и главное меню #}
-<nav id="main-navbar" class="navbar navbar-expand-lg mb-4">
-  <div class="container p-0">
-    <a class="navbar-brand" href="/">
-        <img id="logo-img" class="logo-img p-0 m-0" src=""
-             data-src-light="{% static 'svg/logo-etpgrf-site-light.svg' %}"
-             data-src-light-compact="{% static 'svg/logo-etpgrf-site-light-compact.svg' %}"
-             data-src-dark="{% static 'svg/logo-etpgrf-site-dark.svg' %}"
-             data-src-dark-compact="{% static 'svg/logo-etpgrf-site-dark-compact.svg' %}"
-             alt="ETPGRF — единая типографика для веба">
+{# ШАПКА с логотипом и главное меню #}<nav id="main-navbar" class="navbar navbar-expand-lg mb-4">
+  <div id="logo" class="container logo-big" style="background-image: var(--bg-image-logo);">
+    <a class="navbar-brand" href="/" style="background-image: var(--bg-image-text);"
+       title="ETPGRF — единая типографика для веба">
    </a>
  </div>
 </nav>

-<div id="content-container" class="container">
+{# Контент #}<div id="content-container" class="container">
  {% block content %}{% endblock %}
 </div>

-{# Футер #}
-<footer class="footer mt-auto py-2 mt-4">
+{# Футер #}<footer class="footer mt-auto py-2 mt-4">
  <div class="container d-flex justify-content-between align-items-center">
    <span class="text-muted small nowrap me-2">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
-
-    <nobr class="text-muted small mx-2"><i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i>v0.1.3 / v0.1.5</nobr>
-
-    {# Сводная статистика (HTMX) #}
-    <span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
+    <nobr class="text-muted small mx-2"><i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i>v0.1.3 / v0.1.6
+    </nobr>
+    {# Сводная статистика (HTMX) #}<span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
      ...
    </span>
  </div>
@@ -89,13 +92,8 @@
  </div>
 </div>

-{# Bootstrap JS #}
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-
-{# Custom JS #}
-<script src="{% static 'js/base.js' %}" defer></script>
-
+{# Bootstrap JS #}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+{# Custom JS #}<script src="{% static 'js/base.js' %}" defer></script>
 {% block scripts %}{% endblock %}
-
 </body>
 </html>
--- a/public/static/css/etpgrf.css
+++ b/public/static/css/etpgrf.css
@@ -48,40 +48,52 @@ 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); /* Эффект размытия */
+  backdrop-filter: blur(8px); /* Эффект размытия */
  box-shadow: 0 -25px 30px 15px var(--bs-border-color);
+  /* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */
 }

-.navbar-brand {
-  padding: 0; /* Убираем отступы у бренда */
+#main-navbar > .container {
+  background: no-repeat left;
+  background-size: contain;
 }

-/* Стили для скролла */
-.navbar-scrolled {
-  height: 55px;
+#main-navbar > .container.logo-big {
+  background-image: var(--bg-image-text);
+  transition: .4s ease;
 }

-/* Логотип */
-.logo-img {
-  width: 70%;
-  margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */
-  height: 151px; /* Ограничиваем высоту */
-  object-fit: contain; /* Вписываем, сохраняя пропорции */
+#main-navbar > .container:not(.logo-big) {
+  background-image: none;
+  transition: .4s ease;
 }

-/* Уменьшаем логотип при скролле */
-.navbar-scrolled .logo-img {
-  height: 78px; /* Компактная высота */
-  margin-left: -5%;
+#main-navbar > #logo > .navbar-brand {
+  display: block; /* Блок, чтобы работали размеры */
+  background: no-repeat left;
+  background-size: contain;
+  margin-left: -1.5%;
+}
+
+#main-navbar > #logo.logo-big > .navbar-brand {
+  height: 105px;
+  width: 500px;
+  opacity: 1;
+  transition: .4s ease;
+}
+
+#main-navbar > #logo:not(.logo-big) > .navbar-brand {
+  height: 60px;
+  width: 285px;
+  transition: .4s ease;
+  opacity: 0;
 }

 /* Контент растягивается, чтобы прижать футер */
--- a/public/static/js/base.js
+++ b/public/static/js/base.js
@@ -7,38 +7,33 @@
    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;
+        const navbar = document.getElementById('logo');
+        if (!navbar) return;
+        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);
+    // document.addEventListener('DOMContentLoaded', updateLogo);
+    window.addEventListener('scroll', updateLogo, { passive: true });


    // --- КУКИ И СЧЕТЧИКИ ---
Author	SHA1	Message	Date
erjemin	6b4dbafab5	fix: плавное уменьшение шапки и переключение логотипов (2) All checks were successful Build ETPGRF-site / build (push) Successful in 1m27s Details	2026-01-24 12:47:47 +03:00
erjemin	18294ec21b	fix: плавное уменьшение шапки и переключение логотипов	2026-01-23 17:51:17 +03:00