minor: форматирование
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
<!DOCTYPE html>{% load static %}<html lang="ru">
|
<!doctype html>{% load static %}
|
||||||
|
<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" />
|
||||||
@@ -27,29 +28,24 @@
|
|||||||
{# Шутка #}<meta name="generator" content="Microsoft FrontPage 1.0" />
|
{# Шутка #}<meta name="generator" content="Microsoft FrontPage 1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="{% static 'svgs/favicon.svg' %}" />
|
<link rel="icon" type="image/svg+xml" href="{% static 'svgs/favicon.svg' %}" />
|
||||||
<link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
|
<link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />
|
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />{% if IS_DEBUG %}{% comment %}
|
||||||
{% if IS_DEBUG %}{% comment %}
|
Переключение dev/prod стилей Tailwind CSS происходит
|
||||||
Переключение dev/prod стилей Tailwind CSS происходит АВТОМАТИЧЕСКИ через
|
АВТОМАТИЧЕСКИ через переменную IS_DEBUG (см. контексный-процессор
|
||||||
переменную IS_DEBUG (см. контексный-процессор frontend/context_processors.py),
|
frontend/context_processors.py), DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно
|
||||||
|
для разработки (не нужна сборка), но грузит браузер и prod не используется. {% endcomment %}
|
||||||
DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно для
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>{% comment %}
|
||||||
разработки (не нужна сборка), но грузит браузер и prod не используется.
|
Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль ссылок)
|
||||||
{% endcomment %}<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>{% comment %}
|
лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует и компилирует ТОЛЬКО то, что
|
||||||
|
видит в финальном DOM — то есть только содержимое тегов style с type text/tailwindcss, а не
|
||||||
Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль
|
внешние .css, подключённые через link. Поэтому файл вставляется сюда через include, а не
|
||||||
ссылок) лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует
|
подключается отдельным link.{% endcomment %}
|
||||||
и компилирует ТОЛЬКО то, что видит в финальном DOM — то есть только
|
|
||||||
содержимое тегов style с type text/tailwindcss, а не внешние .css,
|
|
||||||
подключённые через link. Поэтому файл вставляется сюда через include,
|
|
||||||
а не подключается отдельным link.{% endcomment %}
|
|
||||||
<style type="text/tailwindcss">
|
<style type="text/tailwindcss">
|
||||||
{% include "css/tailwind-custom.css" %}
|
{% include "css/tailwind-custom.css" %}
|
||||||
</style>{% else %}{% comment %}
|
</style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см.
|
||||||
PROD: заранее собранный Tailwind CLI файл (см. frontend-assembly/tailwind/input.css
|
frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует
|
||||||
и package.json). CLI сканирует шаблоны проекта и генерирует только реально
|
только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого
|
||||||
используемые классы, включая кастомные @theme/@layer директивы из того же
|
файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
|
||||||
самого файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
|
<link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}" />{% endif %}
|
||||||
<link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}">{% endif %}
|
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "https://schema.org",
|
"@context": "https://schema.org",
|
||||||
@@ -60,15 +56,13 @@
|
|||||||
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %}
|
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %}
|
||||||
<link rel="stylesheet" href="{% static 'css/lpon.css' %}" />
|
<link rel="stylesheet" href="{% static 'css/lpon.css' %}" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}
|
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
|
||||||
{% include "block/header.html" %}
|
{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}{% include "block/header.html" %}
|
||||||
<main id="main-content" class="max-w-7xl min-h-screen mx-auto px-4 py-8">
|
<main id="main-content" class="mx-auto min-h-screen max-w-7xl px-4 py-8 font-serif">
|
||||||
{% block CONTENT %}{% endblock CONTENT %}
|
{% block CONTENT %}{% endblock CONTENT %}
|
||||||
</main>
|
</main>
|
||||||
{# {% include "blocks/footer.jinja2" %} #}
|
{# {% include "blocks/footer.jinja2" %} #}{% endblock BODY %}{% if not ALLOW_TRACKING %}{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% include "block/allow-tracking.html" %}{% else %}{# Если согласился -- отслеживаем#}
|
||||||
{% endblock BODY %}{% if not ALLOW_TRACKING %}
|
<script src="{% static 'js/analytics.js' %}"></script>{% endif %}
|
||||||
{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% include "block/allow-tracking.html" %}{% else %}
|
|
||||||
{# Если согласился -- отслеживаем#}<script src="{% static 'js/analytics.js' %}"></script>{% endif %}
|
|
||||||
<script src="{% static 'js/alpine.min.js' %}"></script>
|
<script src="{% static 'js/alpine.min.js' %}"></script>
|
||||||
<script src="{% static 'js/htmx.min.js' %}"></script>{% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
|
<script src="{% static 'js/htmx.min.js' %}"></script>{% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{# НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}<div id="allow-tracking-popup" class="sticky bottom-0 z-50 bg-white/90 dark:bg-slate-800/70 backdrop-blur ">
|
{# НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}<div id="allow-tracking-popup" class="sticky bottom-0 z-50 bg-gray-100/80 dark:bg-slate-800/70 backdrop-blur ">
|
||||||
<div class="max-w-7xl mx-auto px-4 py-8 border-b border-gray-200 dark:border-gray-800 grid grid-cols-[auto_1fr] gap-x-4
|
<div class="max-w-7xl mx-auto px-4 py-8 border-b border-gray-200 dark:border-gray-800 grid grid-cols-[auto_1fr] gap-x-4
|
||||||
px-4 py-0">
|
px-4 py-0">
|
||||||
<p class="flex-col px-6 py-6">
|
<p class="flex-col px-6 py-6">
|
||||||
|
|||||||
@@ -44,34 +44,30 @@
|
|||||||
просто объект с нужными атрибутами — главное, чтобы у каждого элемента были
|
просто объект с нужными атрибутами — главное, чтобы у каждого элемента были
|
||||||
поля `title` и `url`.
|
поля `title` и `url`.
|
||||||
|
|
||||||
{% endcomment %}{% if breadcrumbs %}<nav aria-label="Хлебные крошки" class="px-4 py-2 text-sm text-slate-500 dark:text-slate-100 hidden md:block bg-slate-50 dark:bg-slate-900 rounded-xl">
|
{% endcomment %}{% if breadcrumbs %}<nav aria-label="Хлебные крошки" class="px-4 py-2 text-sm text-slate-500 dark:text-slate-100 hidden md:block bg-slate-50 dark:bg-slate-900 rounded-xl">{% comment %}
|
||||||
{# aria-label="Хлебные крошки" — для доступности, чтобы скринридеры озвучивали #}
|
{# aria-label="Хлебные крошки" — для доступности, чтобы скринридеры озвучивали #}
|
||||||
{# пользователю, что это именно хлебные крошки, а не просто список ссылок. #}
|
{# пользователю, что это именно хлебные крошки, а не просто список ссылок. #}
|
||||||
{# hidden md:block — скрываем на маленьких экранах (мобильных) #}
|
{# hidden md:block — скрываем на маленьких экранах (мобильных) #}{% endcomment %}
|
||||||
<ol class="flex flex-wrap items-center gap-x-2">{% comment %}
|
<ol class="flex flex-wrap items-center gap-x-2">{% comment %}
|
||||||
ol вместо ul — потому что это упорядоченный список, а не просто
|
{# ol вместо ul — потому что это упорядоченный список, а не просто #}
|
||||||
набор ссылок. Важный момент для доступности и SEO.{% endcomment %}
|
{# набор ссылок. Важный момент для доступности и SEO. #}{% endcomment %}
|
||||||
<li class="flex items-center gap-x-2">{# Ссылка на главную (домик) #}
|
<li class="flex items-center gap-x-2">{% comment %}{# Ссылка на главную (домик) #}
|
||||||
{# пунктирное подчёркивание и цвет теперь задаются типовым стилем #}
|
{# пунктирное подчёркивание и цвет теперь задаются типовым стилем #}
|
||||||
{# ссылок (см. css/tailwind-custom.css, @layer base { a {...} }); #}
|
{# ссылок (см. css/tailwind-custom.css, @layer base { a {...} }); #}
|
||||||
{# opacity-70/hover/transition — собственный эффект именно для иконки-домика. #}
|
{# opacity-70/hover/transition — собственный эффект именно для иконки-домика. #}{% endcomment %}
|
||||||
<a href="/" aria-label="Главная" class="opacity-70 hover:opacity-100 transition-opacity py-0.5">
|
<a href="/" aria-label="Главная" class="opacity-70 hover:opacity-100 transition-opacity py-0.5">
|
||||||
<img src="{% static 'svgs/ico-home.svg' %}" alt="" aria-hidden="true" class="w-5 h-4 dark:invert">
|
<img src="{% static 'svgs/ico-home.svg' %}" alt="" aria-hidden="true" class="w-5 h-4 dark:invert">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>{% for crumb in breadcrumbs %}
|
||||||
{% for crumb in breadcrumbs %}
|
|
||||||
<li class="flex items-center gap-x-2">
|
<li class="flex items-center gap-x-2">
|
||||||
{# Разделитель перед пунктом #}<span aria-hidden="true" class="text-slate-400 dark:text-slate-600">/</span>
|
{# Разделитель перед пунктом #}<span aria-hidden="true" class="text-slate-400 dark:text-slate-600">/</span>
|
||||||
{% if crumb.url and not forloop.last %}
|
{% if crumb.url and not forloop.last %}{% comment %}
|
||||||
{# Обычный пункт со ссылкой (не последний и с заданным url). #}
|
{# Обычный пункт со ссылкой (не последний и с заданным url). #}
|
||||||
{# Класс не нужен — типовое оформление ссылки (пунктир, цвет, ховер) #}
|
{# Класс не нужен — типовое оформление ссылки (пунктир, цвет, ховер) #}
|
||||||
{# задаётся автоматически через css/tailwind-custom.css, @layer base { a {...} }. #}
|
{# задаётся автоматически через css/tailwind-custom.css, @layer base { a {...} }. #}
|
||||||
<a href="{{ crumb.url }}">{{ crumb.title }}</a>
|
{% endcomment %}<a href="{{ crumb.url }}">{{ crumb.title }}</a>{% else %}{% comment %}
|
||||||
{% else %}
|
|
||||||
{# Текущая страница: без ссылки, с aria-current="page" для доступности и SEO #}
|
{# Текущая страница: без ссылки, с aria-current="page" для доступности и SEO #}
|
||||||
<span aria-current="page" class="font-medium">{{ crumb.title }}</span>
|
{% endcomment %}<span aria-current="page" class="font-medium">{{ crumb.title|safe }}</span>{% endif %}
|
||||||
{% endif %}
|
</li>{% endfor %}
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ol>
|
</ol>
|
||||||
</nav>{% endif %}
|
</nav>{% endif %}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{% load static %}<header x-data="{scrolled:false}" @scroll.window="scrolled=(window.scrollY>50)" class="sticky top-0
|
{% load static %}<header x-data="{scrolled:false}" @scroll.window="scrolled=(window.scrollY>50)" class="sticky top-0
|
||||||
z-50 bg-white/90 dark:bg-slate-800/70 backdrop-blur border-b border-gray-200 dark:border-gray-800
|
z-50 bg-gray-100/90 dark:bg-slate-800/70 backdrop-blur border-b border-gray-200 dark:border-gray-800
|
||||||
bg-[url({% static 'svgs/cc.svg' %})] bg-bottom-right bg-no-repeat grid grid-cols-[1fr_auto_1fr] items-center
|
bg-[url({% static 'svgs/cc.svg' %})] bg-bottom-right bg-no-repeat grid grid-cols-[1fr_auto_1fr] items-center
|
||||||
content-center gap-x-4 px-4 py-0">{% comment %}
|
content-center gap-x-4 px-4 py-0">{% comment %}
|
||||||
Пункты меню — ссылки-кнопки, а не типовой текст, поэтому у каждой <a> явно
|
Пункты меню — ссылки-кнопки, а не типовой текст, поэтому у каждой <a> явно
|
||||||
|
|||||||
Reference in New Issue
Block a user