add: роутинг, вьюха и шаблон для отображения статьи... +слой стилей TileWind для контента их базы.

lpon_site/templates/content/article_detail.html

@@ -0,0 +1,39 @@
+{% extends "_base.html" %} {% load static %}
+{# SEO Мета-данные статьи #}
+{% block PAGE_TITLE %}{{ article.seo_title|default:article.s_article_title_html|striptags|default:article.s_article_title }} — LPON.RU{% endblock %}
+
+{% block DESCRIPTION %}{{ article.seo_description|default:article.s_article_teaser_html|striptags|default:"" }}{% endblock %}
+
+{% block CONTENT %}{# Подключение блока хлебных крошек #}{% include "block/breadcrumbs.html" %}{% comment %}
+ КОНТЕНТ НАЧАЛО
+
+{% 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">
+          <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" />
+        </div>{% endif %}
+        {# ЛЕВАЯ КОЛОНКА / Основной текст статьи #}<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>
+          <!-- /Заголовок -->
+          <!-- Мета-данные -->
+         <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">
+           <time datetime="{{ article.t_article_created|date:'Y-m-d' }}">{{ article.t_article_created|date:"d.m.Y" }}</time>
+         </div>
+         <!-- /Мета-данные -->
+         <!-- Тизер -->{% if article.s_article_teaser_html %}
+         <div class="mb-6 rounded-r-lg border-l-4 border-slate-400 bg-slate-50 p-4 text-lg leading-relaxed text-slate-700 italic md:text-xl dark:border-slate-600 dark:bg-slate-900/60 dark:text-slate-300">
+           {{ article.s_article_teaser_html|safe }}
+         </div>{% endif %}
+         <!-- /Тизер -->
+         <!-- Основное содержимое -->{% if article.s_article_content_html %}
+         <div class="article-content max-w-none">
+ {{ article.s_article_content_html|safe }}
+         </div>
+         <!-- /Основное содержимое -->{% endif %}
+         <!-- Кнопка возврата к списку -->
+        <div class="mt-10 border-t border-slate-200 pt-6 dark:border-slate-800">
+          <a href="{% url 'info_articles_list' %}" class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition-colors hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100">&larr; Назад к списку материалов</a>
+        </div>
+        <!-- /Кнопка возврата к списку -->
+      </div>
+    </article>{% endblock CONTENT %}

lpon_site/templates/css/tailwind-custom.css

@@ -78,4 +78,72 @@
                  hover:text-(--color-link-hover) dark:hover:text-indigo-200
                  hover:border-solid transition-colors;
         }
+      }
+
+     @layer components { /* -- СЛОЙ COMPONENTS для компонентов и HTML-контента из БД -- {% comment %}
+        Стили для форматированного HTML-контента статей (из БД).
+
+        Поскольку HTML-текст статьи (s_article_content_html) приходит из CodeMirror-редактора
+        и с высокой вероятностью не содержит явных Tailwind-классов на каждом p, h2, ul, blockquote,
+        мы оборачиваем контент в шаблонный контейнер <div class="article-content">...</div>,
+        а здесь через @apply и каскадные селекторы задаем правила оформления элементов.
+        {% endcomment %} */
+
+        /* Контейнер форматированного текста статьи */
+        .article-content {
+          @apply text-slate-800 dark:text-slate-200 leading-relaxed text-base md:text-lg;
+
+          /* Заголовки внутри контента статьи */
+          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; }
+          h2 { @apply text-xl md:text-2xl; }
+          h3 { @apply text-lg md:text-xl; }
+          h4 { @apply text-base md:text-lg text-slate-700 dark:text-slate-300; }
+
+          /* Параграфы и текстовые блоки */
+          p {
+            @apply my-4 leading-relaxed;
+          }
+
+          /* Списки (маркированные и нумерованные) */
+          ul {
+            @apply list-disc list-outside space-y-2 pl-4;
+          }
+          ol {
+            @apply list-decimal list-outside space-y-2 pl-4;
+          }
+          li {
+            @apply leading-normal;
+          }
+
+          /* Цитаты и выделенные блоки */
+          blockquote {
+            @apply border-l-4 border-indigo-500 bg-slate-100 dark:bg-slate-900/80
+                   px-4 py-3 my-6 italic text-slate-700 dark:text-slate-300 rounded-r-lg;
+          }
+
+          /* Изображения внутри контента */
+          img {
+            @apply my-6 rounded-xl border border-slate-200 dark:border-slate-800 h-auto max-w-full mx-auto;
+          }
+
+          /* Инлайновый код и блоки кода */
+          code {
+            @apply bg-slate-200 dark:bg-slate-800 text-indigo-700 dark:text-indigo-300
+                   px-1.5 py-0.5 rounded text-sm font-mono;
+          }
+          pre {
+            @apply bg-slate-900 text-slate-100 p-4 rounded-xl my-6 overflow-x-auto text-sm font-mono;
+          }
+          pre code {
+            @apply bg-transparent text-inherit p-0;
+          }
+
+          /* Горизонтальный разделитель */
+          hr {
+            @apply my-8 border-t border-slate-200 dark:border-slate-800;
+          }
+        }
       }