add: Шаблон для статьи + стили

lpon_site/templates/content/article_detail.html

@@ -8,12 +8,15 @@
  КОНТЕНТ НАЧАЛО
 
 {% endcomment %}      <article class="mx-auto grid grid-cols-3 gap-8 py-6">
-        {# ПРАВАЯ КОЛОНКА / Обложка / Иллюстрация статьи, если есть #}{% if article.k_article_to_image %}<div class="mb-8 max-h-[480px] overflow-hidden">
+        {# ПРАВАЯ КОЛОНКА / Обложка / Иллюстрация статьи, если есть #}<div class="mb-8 max-h-[480px] overflow-hidden">
-          <img src="{{ article.k_article_to_image.url }}" alt="{{ article.k_article_to_image.default_alt_text|default:article.s_article_title }}" class="h-auto w-full rounded-xl border border-slate-200 object-cover dark:border-slate-800" />
+          {% if article.k_article_to_image %}<img src="{{ article.k_article_to_image.url }}" alt="{{ article.k_article_to_image.default_alt_text|default:article.s_article_title }}" class="h-auto w-full rounded-xl border border-slate-200 object-cover dark:border-slate-800" />{% else%}<picture id="logo" class="block my-2 leading-none" :class="scrolled?'px-0':'px-6'">
-        </div>{% endif %}
+            <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>{% endif %}
+        </div>
         {# ЛЕВАЯ КОЛОНКА / Основной текст статьи #}<div class="col-span-2">
           <!-- Заголовл -->
-          <h1 class="mb-4 text-3xl leading-tight font-bold text-slate-900 dark:text-slate-100">{% if article.s_article_title_html %}{{ article.s_article_title_html|safe }}{% else %}{{ article.s_article_title }}{% endif %}</h1>
+          <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-bold text-slate-900 md:text-4xl dark:text-slate-100">{% if article.s_article_title_html %}{{ article.s_article_title_html|safe }}{% else %}{{ article.s_article_title }}{% endif %}</h1>
           <!-- /Заголовок -->
           <!-- Мета-данные -->
          <div class="mb-6 items-center gap-4 border-b border-slate-200 pb-4 text-sm text-slate-500 dark:border-slate-800 dark:text-slate-400">

lpon_site/templates/css/tailwind-custom.css

@@ -97,10 +97,11 @@
           h1, h2, h3, h4 {
             @apply font-bold text-slate-900 dark:text-slate-100 mt-8 mb-4 leading-snug;
           }
-          h1 { @apply text-3xl md:text-3xl border-b border-slate-200 dark:border-slate-800 pb-2; }
+          h1 { @apply text-3xl md:text-4xl border-b border-slate-200 dark:border-slate-800 pb-2; }
-          h2 { @apply text-xl md:text-2xl; }
+          h2 { @apply text-2xl md:text-3xl; }
-          h3 { @apply text-lg md:text-xl; }
+          h3 { @apply text-xl md:text-2xl; }
-          h4 { @apply text-base md:text-lg text-slate-700 dark:text-slate-300; }
+          h4 { @apply text-lg md:text-xl; }
+          h5 { @apply text-base md:text-lg text-slate-700 dark:text-slate-300; }
 
           /* Параграфы и текстовые блоки */
           p {
@@ -109,10 +110,10 @@
 
           /* Списки (маркированные и нумерованные) */
           ul {
-            @apply list-disc list-outside space-y-2 pl-4;
+            @apply list-disc list-outside space-y-2 pl-4 ml-4;
           }
           ol {
-            @apply list-decimal list-outside space-y-2 pl-4;
+            @apply list-decimal list-outside space-y-2 pl-4 ml-4;
           }
           li {
             @apply leading-normal;