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

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

Browse Source
This commit is contained in:
Sergei Erjemin
2026-01-23 17:51:17 +03:00
parent 78174a8ffc
commit 18294ec21b
3 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<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 — единая типографика для веба">
<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 — единая типографика для веба">
{# Полный логотип background: light-dark( url('{% static 'svg/logo-etpgrf-site-light-compact.svg' %}'), url('{% static 'svg/logo-etpgrf-site-light.svg' %}') ); #}
{# <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>
</div>
</nav>