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

Compare commits

base: erjemin:v0.1.5
Branches Tags
erjemin:main
erjemin:v0.2.5 erjemin:v0.2.4 erjemin:v0.2.3 erjemin:v0.2.2 erjemin:v0.2.1 erjemin:v0.2.0 erjemin:v0.1.8 erjemin:v0.1.7 erjemin:v0.1.6 erjemin:v0.1.5 erjemin:v0.1.4 erjemin:v0.1.3 erjemin:v0.1.2 erjemin:v0.1.1 erjemin:v0.1.0
...
compare: erjemin:v0.1.6
Branches Tags
erjemin:main
erjemin:v0.2.5 erjemin:v0.2.4 erjemin:v0.2.3 erjemin:v0.2.2 erjemin:v0.2.1 erjemin:v0.2.0 erjemin:v0.1.8 erjemin:v0.1.7 erjemin:v0.1.6 erjemin:v0.1.5 erjemin:v0.1.4 erjemin:v0.1.3 erjemin:v0.1.2 erjemin:v0.1.1 erjemin:v0.1.0

2 Commits
v0.1.5 ... v0.1.6

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
3 changed files with 109 additions and 104 deletions
Expand all files Collapse all files

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

@@ -1,75 +1,78 @@
{% load static %}<!doctype html> {% load static %}<!doctype html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{# --- SEO & Meta Tags --- #} {# --- SEO & Meta Tags --- #}
<title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title> <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
<meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}"> <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
<meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев"> <meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев">
<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" type="image/svg+xml" href="{% static 'favicon.svg' %}" /> <link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" /> <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="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"/>
{# Custom CSS #}<link href="{% static 'css/etpgrf.css' %}" rel="stylesheet" /> <style>
{# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script> :root {
{# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> --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> </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 class="container p-0"> <a class="navbar-brand" href="/" style="background-image: var(--bg-image-text);"
<a class="navbar-brand" href="/"> title="ETPGRF — единая типографика для веба">
<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 — единая типографика для веба">
</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>
@@ -89,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>

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

@@ -48,40 +48,52 @@ body {
flex-direction: column; flex-direction: column;
} }
/* Навбар: используем переменную для фона */ #main-navbar {
.navbar { z-index: 1000;
background-color: var(--bs-navbar-bg) !important; background-color: var(--bs-navbar-bg) !important;
border-bottom: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);
padding: 0; /* Убираем отступы у навбара */ padding: 0;
position: sticky; position: sticky;
top: 0; top: 0;
height: 105px; backdrop-filter: blur(8px); /* Эффект размытия */
z-index: 1000;
backdrop-filter: blur(4px); /* Эффект размытия */
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; /* Анимация высоты */
} }
.navbar-brand { #main-navbar > .container {
padding: 0; /* Убираем отступы у бренда */ background: no-repeat left;
background-size: contain;
} }
/* Стили для скролла */ #main-navbar > .container.logo-big {
.navbar-scrolled { background-image: var(--bg-image-text);
height: 55px; transition: .4s ease;
} }
/* Логотип */ #main-navbar > .container:not(.logo-big) {
.logo-img { background-image: none;
width: 70%; transition: .4s ease;
margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */
height: 151px; /* Ограничиваем высоту */
object-fit: contain; /* Вписываем, сохраняя пропорции */
} }
/* Уменьшаем логотип при скролле */ #main-navbar > #logo > .navbar-brand {
.navbar-scrolled .logo-img { display: block; /* Блок, чтобы работали размеры */
height: 78px; /* Компактная высота */ background: no-repeat left;
margin-left: -5%; 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;
} }
/* Контент растягивается, чтобы прижать футер */ /* Контент растягивается, чтобы прижать футер */

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

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