erjemin/2026-etpgrf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: плавное уменьшение шапки и переключение логотипов (2)
All checks were successful
Build ETPGRF-site / build (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
Sergei Erjemin
2026-01-24 12:47:47 +03:00
parent 18294ec21b
commit 6b4dbafab5
3 changed files with 61 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
etpgrf_site/typograph/templates/typograph/base.html
View File

@@ -11,37 +11,37 @@
<meta name="author" content="Sergei Erjemin"> <meta name="author" content="Sergei Erjemin">
{# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #} {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}
<meta property="og:type" content="website"> <meta property="og:type" content="website" />
<meta property="og:site_name" content="ETPGRF"> <meta property="og:site_name" content="ETPGRF" />
<meta property="og:url" content="{{ request.build_absolute_uri }}"> <meta property="og:url" content="{{ request.build_absolute_uri }}" />
<meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}"> <meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}" />
<meta property="og:description" content="{% block og_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик. Умная типографика для веб-дизайнеров, редакторов и контент-менеджеров.{% 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" 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:width" content="1200"> <meta property="og:image:height" content="630" />
<meta property="og:image:height" content="630">
{# --- Twitter Cards (X) --- #} {# --- Twitter Cards (X) --- #}
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}"> <meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}" />
<meta name="twitter:description" content="{% block twitter_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик.{% 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 %}"> <meta name="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}" />
{# --- Favicons --- #} {# --- Favicons --- #}
<link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96" /> <link rel="icon" href="{{ request.scheme }}://{{ request.get_host }}{% static 'favicon.ico' %}" type="image/x-icon" />
<link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)"> <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" />
<link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)"> <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="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="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
<link rel="manifest" href="{% static 'site.webmanifest' %}" /> <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 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" /> {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"/>
<style> <style>
:root { :root {
--bg-image-text: url("{% static 'svg/logo-etpgrf-site-light-txt.svg' %}"); --bg-image-text: url("{% static 'svg/logo-etpgrf-site-light-txt.svg' %}");
--bg-image-logo: url("{% static 'svg/logo-etpgrf-site-light-compact.svg' %}"); --bg-image-logo: url("{% static 'svg/logo-etpgrf-site-light-compact.svg' %}");
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg-image-text: url("{% static 'svg/logo-etpgrf-site-dark-txt.svg' %}"); --bg-image-text: url("{% static 'svg/logo-etpgrf-site-dark-txt.svg' %}");
@@ -49,44 +49,30 @@
} }
} }
</style> </style>
{# Custom CSS #}<link href="{% static 'css/etpgrf.css' %}" rel="stylesheet" /> {# Custom CSS #}<link href="{% static 'css/etpgrf.css' %}" rel="stylesheet"/>
{# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script> {# 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> {# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body> <body>
{# ШАПКА и главное меню #} {# ШАПКА с логотипом и главное меню #}<nav id="main-navbar" class="navbar navbar-expand-lg mb-4">
<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);"> <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 class="navbar-brand" href="/" style="background-image: var(--bg-image-text);"
{# Полный логотип background: light-dark( url('{% static 'svg/logo-etpgrf-site-light-compact.svg' %}'), url('{% static 'svg/logo-etpgrf-site-light.svg' %}') ); #} title="ETPGRF — единая типографика для веба">
{# <picture class="logo-full">#}
{# <source srcset="{% static 'svg/logo-etpgrf-site-dark.svg' %}" media="(prefers-color-scheme: dark)">#}
{# <img src="{% static 'svg/logo-etpgrf-site-light.svg' %}" alt="ETPGRF" class="logo-img">#}
{# </picture>#}
{# Компактный логотип (скрыт через 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> </a>
</div> </div>
</nav> </nav>
<div id="content-container" class="container"> {# Контент #}<div id="content-container" class="container">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </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"> <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> <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.6
<nobr class="text-muted small mx-2"><i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i>v0.1.3 / v0.1.5</nobr> </nobr>
{# Сводная статистика (HTMX) #}<span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
{# Сводная статистика (HTMX) #}
<span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
... ...
</span> </span>
</div> </div>
@@ -106,13 +92,8 @@
</div> </div>
</div> </div>
{# Bootstrap JS #} {# Bootstrap JS #}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<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>
{# Custom JS #}
<script src="{% static 'js/base.js' %}" defer></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>

3
public/static/css/etpgrf.css
View File

@@ -55,7 +55,7 @@ body {
padding: 0; padding: 0;
position: sticky; position: sticky;
top: 0; top: 0;
backdrop-filter: blur(4px); /* Эффект размытия */ backdrop-filter: blur(8px); /* Эффект размытия */
box-shadow: 0 -25px 30px 15px var(--bs-border-color); box-shadow: 0 -25px 30px 15px var(--bs-border-color);
/* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */ /* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */
} }
@@ -76,7 +76,6 @@ body {
} }
#main-navbar > #logo > .navbar-brand { #main-navbar > #logo > .navbar-brand {
padding: 0; /* Убираем отступы у бренда */
display: block; /* Блок, чтобы работали размеры */ display: block; /* Блок, чтобы работали размеры */
background: no-repeat left; background: no-repeat left;
background-size: contain; background-size: contain;

6
public/static/js/base.js
View File

@@ -14,10 +14,11 @@
// Слушать изменения // Слушать изменения
darkModeMediaQuery.addEventListener('change', updateTheme); darkModeMediaQuery.addEventListener('change', updateTheme);
// --- ЛОГОТИП И СКРОЛЛ --- // --- ЛОГОТИП И СКРОЛЛ ---
function updateLogo() { function updateLogo() {
if (!navbar) return;
const navbar = document.getElementById('logo'); const navbar = document.getElementById('logo');
if (!navbar) return;
const scrollY = window.scrollY; const scrollY = window.scrollY;
// Гистерезис: включаем после 60px, выключаем до 10px // Гистерезис: включаем после 60px, выключаем до 10px
@@ -29,9 +30,12 @@
} }
} }
// Инициализация логотипа при загрузке и скролле // Инициализация логотипа при загрузке и скролле
// document.addEventListener('DOMContentLoaded', updateLogo);
window.addEventListener('scroll', updateLogo, { passive: true }); window.addEventListener('scroll', updateLogo, { passive: true });
// --- КУКИ И СЧЕТЧИКИ --- // --- КУКИ И СЧЕТЧИКИ ---
const COOKIE_KEY = 'cookie_consent'; const COOKIE_KEY = 'cookie_consent';
const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней