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

minor: форматирование

Browse Source
This commit is contained in:
erjemin
2026-08-08 01:04:41 +03:00
parent 77443959eb
commit a2de98bc7a
4 changed files with 132 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lpon_site/templates/_base.html
+66 -72
View File
@@ -1,75 +1,69 @@
<!DOCTYPE html>{% load static %}<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{% block DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta name="keywords" content="{% block KEYWORDS %}vinyl, audio, music, LPON{% endblock %}" />
<meta name="copyright" lang="ru" content="Sergei Erjemin{% block META_COPYRIGHT_AUTHOR %}{% endblock %}." />
<meta name="robots" content="{% block ROBOTS %}index,follow{% endblock %}" />
<meta name="format-detection" content="telephone=no" />
<title>{% block PAGE_TITLE %}LPON.RU{% endblock %}</title>
<meta name="meta-title" content="{% block META_TITLE %}LPON.RU{% endblock %}" />
<meta name="meta-description" content="{% block META_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<link rel="canonical" href="{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
<meta property="og:site_name" content="LPON.RU" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:title" content="{% block OG_TITLE %}LPON.RU{% endblock %}" />
<meta property="og:description" content="{% block OG_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta property="og:url" content="{% block OG_URL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
<meta property="og:type" content="{% block OG_TYPE %}website{% endblock %}" />
<meta property="og:image" content="{% block OG_IMAGE %}{% static 'img/og-lpon-default.png' %}{% endblock %}" />
<meta property="og:image:alt" content="{% block OG_IMAGE_ALT %}LPON.RU{% endblock %}" />
<meta name="twitter:card" content="{% block TWITTER_CARD %}summary_large_image{% endblock %}" />
<meta name="twitter:title" content="{% block TWITTER_TITLE %}LPON.RU{% endblock %}" />
<meta name="twitter:description" content="{% block TWITTER_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta name="twitter:image" content="{% block TWITTER_IMAGE %}{% static 'img/og-lpon-default.png' %}{% endblock %}" />
<meta name="theme-color" content="#F5F5F5" />
{# Шутка #}<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/png" href="{% static 'img/favicon.png' %}" />
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />
{% if IS_DEBUG %}{% comment %}
Переключение dev/prod стилей Tailwind CSS происходит АВТОМАТИЧЕСКИ через
переменную IS_DEBUG (см. контексный-процессор frontend/context_processors.py),
DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно для
разработки (не нужна сборка), но грузит браузер и prod не используется.
{% endcomment %}<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>{% comment %}
Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль
ссылок) лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует
и компилирует ТОЛЬКО то, что видит в финальном DOM — то есть только
содержимое тегов style с type text/tailwindcss, а не внешние .css,
подключённые через link. Поэтому файл вставляется сюда через include,
а не подключается отдельным link.{% endcomment %}
<!doctype html>{% load static %}
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{% block DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta name="keywords" content="{% block KEYWORDS %}vinyl, audio, music, LPON{% endblock %}" />
<meta name="copyright" lang="ru" content="Sergei Erjemin{% block META_COPYRIGHT_AUTHOR %}{% endblock %}." />
<meta name="robots" content="{% block ROBOTS %}index,follow{% endblock %}" />
<meta name="format-detection" content="telephone=no" />
<title>{% block PAGE_TITLE %}LPON.RU{% endblock %}</title>
<meta name="meta-title" content="{% block META_TITLE %}LPON.RU{% endblock %}" />
<meta name="meta-description" content="{% block META_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<link rel="canonical" href="{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
<meta property="og:site_name" content="LPON.RU" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:title" content="{% block OG_TITLE %}LPON.RU{% endblock %}" />
<meta property="og:description" content="{% block OG_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta property="og:url" content="{% block OG_URL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
<meta property="og:type" content="{% block OG_TYPE %}website{% endblock %}" />
<meta property="og:image" content="{% block OG_IMAGE %}{% static 'img/og-lpon-default.png' %}{% endblock %}" />
<meta property="og:image:alt" content="{% block OG_IMAGE_ALT %}LPON.RU{% endblock %}" />
<meta name="twitter:card" content="{% block TWITTER_CARD %}summary_large_image{% endblock %}" />
<meta name="twitter:title" content="{% block TWITTER_TITLE %}LPON.RU{% endblock %}" />
<meta name="twitter:description" content="{% block TWITTER_DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}" />
<meta name="twitter:image" content="{% block TWITTER_IMAGE %}{% static 'img/og-lpon-default.png' %}{% endblock %}" />
<meta name="theme-color" content="#F5F5F5" />
{# Шутка #}<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/png" href="{% static 'img/favicon.png' %}" />
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />{% if IS_DEBUG %}{% comment %}
Переключение dev/prod стилей Tailwind CSS происходит
АВТОМАТИЧЕСКИ через переменную IS_DEBUG (см. контексный-процессор
frontend/context_processors.py), DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно
для разработки (не нужна сборка), но грузит браузер и prod не используется. {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>{% comment %}
Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль ссылок)
лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует и компилирует ТОЛЬКО то, что
видит в финальном DOM — то есть только содержимое тегов style с type text/tailwindcss, а не
внешние .css, подключённые через link. Поэтому файл вставляется сюда через include, а не
подключается отдельным link.{% endcomment %}
<style type="text/tailwindcss">
{% include "css/tailwind-custom.css" %}
</style>{% else %}{% comment %}
PROD: заранее собранный Tailwind CLI файл (см. frontend-assembly/tailwind/input.css
и package.json). CLI сканирует шаблоны проекта и генерирует только реально
используемые классы, включая кастомные @theme/@layer директивы из того же
самого файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
<link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}">{% endif %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "LPON.RU",
"url": "{{ request.scheme }}://{{ request.get_host }}/"
}
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %}
<link rel="stylesheet" href="{% static 'css/lpon.css' %}" />
</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 %}
{% include "block/header.html" %}
<main id="main-content" class="max-w-7xl min-h-screen mx-auto px-4 py-8">
{% block CONTENT %}{% endblock CONTENT %}
</main>
{# {% include "blocks/footer.jinja2" %} #}
{% endblock BODY %}{% if not ALLOW_TRACKING %}
{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% 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/htmx.min.js' %}"></script> {% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
</body>
</style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см.
frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует
только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого
файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
<link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}" />{% endif %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "LPON.RU",
"url": "{{ request.scheme }}://{{ request.get_host }}/"
}
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %}
<link rel="stylesheet" href="{% static 'css/lpon.css' %}" />
</head>
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}{% include "block/header.html" %}
<main id="main-content" class="mx-auto min-h-screen max-w-7xl px-4 py-8 font-serif">
{% block CONTENT %}{% endblock CONTENT %}
</main>
{# {% include "blocks/footer.jinja2" %} #}{% endblock BODY %}{% if not ALLOW_TRACKING %}{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% 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/htmx.min.js' %}"></script>{% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
</body>
</html>
lpon_site/templates/block/allow-tracking.html
+13 -13
View File
@@ -1,13 +1,13 @@
{# НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}<div id="allow-tracking-popup" class="sticky bottom-0 z-50 bg-white/90 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
px-4 py-0">
<p class="flex-col px-6 py-6">
В&nbsp;соответствии с&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr>
и&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, уведомляем вас, что сайт lpon.ru с&nbsp;целью аналитики
и&nbsp;улучшения своей работы использует файлы cookie и&nbsp;инструменты сбора обезли&shy;ченных данных
о&nbsp;поведении пользо&shy;вателей. Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
<a href="/info/privacy-policy">политикой конфи&shy;денциаль&shy;ности</a>.
</p>
<button id="cookie-accept" class="text-lg px-6 py-2 my-6 border-2 rounded-md">Принять</button>
</div>
</div>{# / НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}
{# НИЖНИЙ 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
px-4 py-0">
<p class="flex-col px-6 py-6">
В&nbsp;соответствии с&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr>
и&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, уведомляем вас, что сайт lpon.ru с&nbsp;целью аналитики
и&nbsp;улучшения своей работы использует файлы cookie и&nbsp;инструменты сбора обезли&shy;ченных данных
о&nbsp;поведении пользо&shy;вателей. Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
<a href="/info/privacy-policy">политикой конфи&shy;денциаль&shy;ности</a>.
</p>
<button id="cookie-accept" class="text-lg px-6 py-2 my-6 border-2 rounded-md">Принять</button>
</div>
</div>{# / НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}
lpon_site/templates/block/breadcrumbs.html
+25 -29
View File
@@ -44,34 +44,30 @@
просто объект с нужными атрибутами — главное, чтобы у каждого элемента были
поля `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="Хлебные крошки" — для доступности, чтобы скринридеры озвучивали #}
{# пользователю, что это именно хлебные крошки, а не просто список ссылок. #}
{# hidden md:block — скрываем на маленьких экранах (мобильных) #}
<ol class="flex flex-wrap items-center gap-x-2">{% comment %}
ol вместо ul — потому что это упорядоченный список, а не просто
набор ссылок. Важный момент для доступности и SEO.{% endcomment %}
<li class="flex items-center gap-x-2">{# Ссылка на главную (домик) #}
{# пунктирное подчёркивание и цвет теперь задаются типовым стилем #}
{# ссылок (см. css/tailwind-custom.css, @layer base { a {...} }); #}
{# opacity-70/hover/transition — собственный эффект именно для иконки-домика. #}
<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">
</a>
</li>
{% for crumb in breadcrumbs %}
<li class="flex items-center gap-x-2">
{# Разделитель перед пунктом #}<span aria-hidden="true" class="text-slate-400 dark:text-slate-600">/</span>
{% if crumb.url and not forloop.last %}
{# Обычный пункт со ссылкой (не последний и с заданным url). #}
{# Класс не нужен — типовое оформление ссылки (пунктир, цвет, ховер) #}
{# задаётся автоматически через css/tailwind-custom.css, @layer base { a {...} }. #}
<a href="{{ crumb.url }}">{{ crumb.title }}</a>
{% else %}
{# Текущая страница: без ссылки, с aria-current="page" для доступности и SEO #}
<span aria-current="page" class="font-medium">{{ crumb.title }}</span>
{% endif %}
</li>
{% endfor %}
</ol>
</nav>{% endif %}
{# hidden md:block — скрываем на маленьких экранах (мобильных) #}{% endcomment %}
<ol class="flex flex-wrap items-center gap-x-2">{% comment %}
{# ol вместо ul — потому что это упорядоченный список, а не просто #}
{# набор ссылок. Важный момент для доступности и SEO. #}{% endcomment %}
<li class="flex items-center gap-x-2">{% comment %}{# Ссылка на главную (домик) #}
{# пунктирное подчёркивание и цвет теперь задаются типовым стилем #}
{# ссылок (см. css/tailwind-custom.css, @layer base { a {...} }); #}
{# opacity-70/hover/transition — собственный эффект именно для иконки-домика. #}{% endcomment %}
<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">
</a>
</li>{% for crumb in breadcrumbs %}
<li class="flex items-center gap-x-2">
{# Разделитель перед пунктом #}<span aria-hidden="true" class="text-slate-400 dark:text-slate-600">/</span>
{% if crumb.url and not forloop.last %}{% comment %}
{# Обычный пункт со ссылкой (не последний и с заданным url). #}
{# Класс не нужен — типовое оформление ссылки (пунктир, цвет, ховер) #}
{# задаётся автоматически через css/tailwind-custom.css, @layer base { a {...} }. #}
{% endcomment %}<a href="{{ crumb.url }}">{{ crumb.title }}</a>{% else %}{% comment %}
{# Текущая страница: без ссылки, с aria-current="page" для доступности и SEO #}
{% endcomment %}<span aria-current="page" class="font-medium">{{ crumb.title|safe }}</span>{% endif %}
</li>{% endfor %}
</ol>
</nav>{% endif %}
lpon_site/templates/block/header.html
+28 -28
View File
@@ -1,29 +1,29 @@
{% 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
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 %}
Пункты меню — ссылки-кнопки, а не типовой текст, поэтому у каждой <a> явно
заданы border-0 (отключает пунктирное подчёркивание из общего стиля ссылок) и свой
цвет text-slate-900/dark:text-slate-100 (см. пояснение в css/tailwind-custom.css).{% endcomment %}
{# ЛЕВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-end text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">ВИНИЛ</a>
<span class="px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded-lg hidden md:block">КАССЕТЫ</span>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block border-0 text-slate-900 dark:text-slate-100">MD</a>
</menu>{# /ЛЕВОЕ МЕНЮ #}
{# ЛОГОТИП В ЦЕНТРЕ #}<div class="flex flex-col items-center justify-self-center px-6">{% comment %}
border-0 — логотип оборачивается в ссылку без текста, отключаем типовое
пунктирное подчёркивание ссылки, которое иначе появится под картинкой.{% endcomment %}
<a href="/" class="block leading-none border-0">
<picture id="logo" class="block my-2 leading-none" :class="scrolled?'px-0':'px-6'">
<source srcset="{% static 'svgs/logo-lpon-d.svg' %}" media="(prefers-color-scheme: dark)" class="mx-auto transition-all duration-300" :class="scrolled?'h-12':'h-18'">
<img src="{% static 'svgs/logo-lpon-l.svg' %}" alt="Логотип lpon.ru" class="mx-auto block transition-all duration-300" :class="scrolled?'h-12':'h-18'">
</picture>
</a>
</div>{# /ЛОГОТИП В ЦЕНТРЕ #}
{# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-start text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">CD</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">BLU-RAY</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100">АКСЕССУАРЫ</a>
</menu>{# /ПРАВОЕ МЕНЮ #}
{# СЛОГАН #}<p id="slogan" x-show="!scrolled" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="col-span-3 text-xs tracking-widest text-gray-300 bg-black/80 dark:text-gray-300 dark:bg-gray-400/80 px-6 pt-1 pb-1 mb-4 leading-none rounded-lg justify-self-center">Живой звук C-46, C-60, C-90 и&nbsp;далее…</p>{# /СЛОГАН #}
</header>
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
content-center gap-x-4 px-4 py-0">{% comment %}
Пункты меню — ссылки-кнопки, а не типовой текст, поэтому у каждой <a> явно
заданы border-0 (отключает пунктирное подчёркивание из общего стиля ссылок) и свой
цвет text-slate-900/dark:text-slate-100 (см. пояснение в css/tailwind-custom.css).{% endcomment %}
{# ЛЕВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-end text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">ВИНИЛ</a>
<span class="px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded-lg hidden md:block">КАССЕТЫ</span>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block border-0 text-slate-900 dark:text-slate-100">MD</a>
</menu>{# /ЛЕВОЕ МЕНЮ #}
{# ЛОГОТИП В ЦЕНТРЕ #}<div class="flex flex-col items-center justify-self-center px-6">{% comment %}
border-0 — логотип оборачивается в ссылку без текста, отключаем типовое
пунктирное подчёркивание ссылки, которое иначе появится под картинкой.{% endcomment %}
<a href="/" class="block leading-none border-0">
<picture id="logo" class="block my-2 leading-none" :class="scrolled?'px-0':'px-6'">
<source srcset="{% static 'svgs/logo-lpon-d.svg' %}" media="(prefers-color-scheme: dark)" class="mx-auto transition-all duration-300" :class="scrolled?'h-12':'h-18'">
<img src="{% static 'svgs/logo-lpon-l.svg' %}" alt="Логотип lpon.ru" class="mx-auto block transition-all duration-300" :class="scrolled?'h-12':'h-18'">
</picture>
</a>
</div>{# /ЛОГОТИП В ЦЕНТРЕ #}
{# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-start text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">CD</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">BLU-RAY</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100">АКСЕССУАРЫ</a>
</menu>{# /ПРАВОЕ МЕНЮ #}
{# СЛОГАН #}<p id="slogan" x-show="!scrolled" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="col-span-3 text-xs tracking-widest text-gray-300 bg-black/80 dark:text-gray-300 dark:bg-gray-400/80 px-6 pt-1 pb-1 mb-4 leading-none rounded-lg justify-self-center">Живой звук C-46, C-60, C-90 и&nbsp;далее…</p>{# /СЛОГАН #}
</header>