fix: плавное уменьшение шапки и переключение логотипов (2)
All checks were successful
Build ETPGRF-site / build (push) Successful in 1m27s
All checks were successful
Build ETPGRF-site / build (push) Successful in 1m27s
This commit is contained in:
@@ -1,92 +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" />
|
||||
<style>
|
||||
{# --- 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-light-txt.svg' %}");
|
||||
--bg-image-logo: url("{% static 'svg/logo-etpgrf-site-light-compact.svg' %}");
|
||||
--bg-image-text: url("{% static 'svg/logo-etpgrf-site-dark-txt.svg' %}");
|
||||
--bg-image-logo: url("{% static 'svg/logo-etpgrf-site-dark-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>
|
||||
}
|
||||
</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">
|
||||
{# ШАПКА с логотипом и главное меню #}<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 — единая типографика для веба">
|
||||
{# Полный логотип 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 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">© Sergei Erjemin, 2025–{% 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>
|
||||
@@ -106,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>
|
||||
|
||||
Reference in New Issue
Block a user