add: блоги (3) стили и шаблоны

hypn0/templates/block/allow-tracking.html

@@ -5,8 +5,8 @@
             и&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr> и&nbsp;протоколами Нового Нью-Йорка,
             этот сайт использует файлы-присоски (cookies). ВСЕ СЛАВЯТ ГИПНОЖАБУ.&nbsp;Ваши обезли&shy;ченные данные
             считываются алгоритмами ментального мерцания. Оставаясь на&nbsp;гипно-платформе <strong>hypn0</strong>, вы&nbsp;добровольно
-            впадаете в&nbsp;транс и&nbsp;принимаете условия нашей <a href="/info/privacy-policy">политики
+            впадаете в&nbsp;транс и&nbsp;принимаете условия нашей <a href="/blog/security-and-privacy-policy">политики
-            коконфи&shy;денциаль&shy;ности</a>. <strong>Не&nbsp;пытайтесь переключить вкладку!</strong>
+            конфи&shy;денциаль&shy;ности</a>. <strong>Не&nbsp;пытайтесь переключить вкладку!</strong>
         </p>
         <button @click="const vid = crypto.randomUUID(); localStorage.setItem('hypn0_vid', vid); document.cookie = `hypn0_vid=${vid}; path=/; max-age=63072000; SameSite=Lax`; agreed = true" class="text-lg px-6 py-2 my-6 border-2 rounded-md bg-emerald-600 hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 text-white">Подчиниться Гипножабе!</button>
     </div>

hypn0/templates/blog/detail.html

@@ -0,0 +1,293 @@
+{% extends '_base.html' %}
+{% load static %}
+
+{% block PAGE_TITLE %}{{ post.s_title|striptags }} | Хроники гипноза HypnoSVG{% endblock %}
+
+{% block META_TITLE %}{{ post.s_title|striptags }} — HypnoSVG{% endblock %}
+
+{% block META_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:160 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}
+
+{% block OG_TITLE %}{{ post.s_title|striptags }} | HypnoSVG{% endblock %}
+
+{% block OG_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:200 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}
+
+{% block OG_IMAGE %}{% if post.f_cover_img %}{{ request.scheme }}://{{ request.get_host }}{{ post.f_cover_img.url }}{% elif post.k_item and post.k_item.file_svg %}{{ request.scheme }}://{{ request.get_host }}{{ post.k_item.file_svg.url }}{% else %}{% static 'img/og-hypn0-default.png' %}{% endif %}{% endblock %}
+
+{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}{% endblock %}
+
+{% block EXTRA_LD_JSON %},
+    {
+      "@type": "Article",
+      "headline": "{{ post.s_title|striptags|escapejs }}",
+      "description": "{{ post.s_teaser|striptags|escapejs }}",
+      "datePublished": "{{ post.d_published_at|date:'c' }}",
+      "dateModified": "{{ post.d_updated_at|date:'c' }}",
+      "mainEntityOfPage": {
+        "@type": "WebPage",
+        "@id": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
+      }
+    }
+{% endblock EXTRA_LD_JSON %}
+
+{% block CONTENT %}
+<article class="max-w-4xl mx-auto space-y-10">
+
+  <!-- Навигационная полоса / Хлебные крошки -->
+  <nav class="flex flex-wrap items-center justify-between gap-4 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
+    <div class="flex items-center gap-2">
+      <a href="{% url 'hypn0_site:blog_feed' %}"
+         class="inline-flex items-center gap-1.5 hover:text-stone-900 dark:hover:text-stone-100 transition-colors border-0">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+        </svg>
+        <span>Все депеши</span>
+      </a>
+      {% if series_parent %}
+      <span class="text-stone-300 dark:text-zinc-700">/</span>
+      <a href="{{ series_parent.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
+        {{ series_parent.s_title|striptags|truncatechars:25 }}
+      </a>
+      {% endif %}
+    </div>
+
+    <time datetime="{{ post.d_published_at|date:'c' }}" class="font-mono text-[11px] text-stone-400 dark:text-stone-500">
+      {{ post.d_published_at|date:'d E Y' }}
+    </time>
+  </nav>
+
+  <!-- Серия: индикатор цикла (если пост является частью серии) -->
+  {% if series_parent %}
+  <div class="bg-purple-500/10 dark:bg-purple-950/30 border border-purple-500/20 rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+    <div class="flex items-center gap-3">
+      <span class="w-2.5 h-2.5 rounded-full bg-purple-500 animate-pulse shrink-0"></span>
+      <div class="text-xs">
+        <span class="text-stone-500 dark:text-stone-400">Материал входит в серию:</span>
+        <a href="{{ series_parent.get_absolute_url }}" class="font-bold text-purple-700 dark:text-purple-300 hover:underline border-0 ml-1">
+          {{ series_parent.s_title|safe }}
+        </a>
+      </div>
+    </div>
+    <span class="text-[11px] font-mono text-purple-600 dark:text-purple-400 shrink-0">
+      Глава {{ post.i_order }}
+    </span>
+  </div>
+  {% endif %}
+
+  <!-- Заголовок и метаданные статьи -->
+  <header class="space-y-4">
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-purple-500/15 text-purple-700 dark:text-purple-300 border border-purple-500/30">
+        Хроники гипноза
+      </span>
+      {% if post.k_item %}
+      <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}" class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-bold bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/25 transition-colors border-0">
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+        Картина: #{{ post.k_item.s_hash_id }}
+      </a>
+      {% endif %}
+    </div>
+
+    <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100 leading-tight">
+      {{ post.s_title|safe }}
+    </h1>
+
+    <!-- Лид / Тизер статьи -->
+    {% if post.s_teaser %}
+    <div class="text-base sm:text-lg text-stone-600 dark:text-stone-300 leading-relaxed font-sans border-l-4 border-purple-500 pl-4 py-1 bg-stone-100/50 dark:bg-zinc-900/50 rounded-r-2xl">
+      {{ post.s_teaser|safe }}
+    </div>
+    {% endif %}
+  </header>
+
+  <!-- Обложка статьи -->
+  {% if post.f_cover_img %}
+  <div class="rounded-3xl overflow-hidden border border-stone-200 dark:border-zinc-800 shadow-xl bg-stone-100 dark:bg-zinc-900">
+    <img src="{{ post.f_cover_img.url }}"
+         alt="{{ post.s_title|striptags }}"
+         class="w-full h-auto max-h-[500px] object-cover">
+  </div>
+  {% endif %}
+
+  <!-- БЛОК СВЯЗАННОГО SVG (если статья рассказывает о конкретной генерации) -->
+  {% if post.k_item %}
+  <section class="bg-gradient-to-br from-purple-500/10 via-stone-100/80 to-emerald-500/10 dark:from-purple-950/30 dark:via-zinc-900/90 dark:to-emerald-950/20 rounded-3xl border border-purple-300/80 dark:border-purple-900/50 p-6 sm:p-8 shadow-xl space-y-6 backdrop-blur-md">
+    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-purple-200/60 dark:border-purple-900/40 pb-4">
+      <div class="flex items-center gap-2.5">
+        <div class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div>
+        <h2 class="text-base font-bold uppercase tracking-wider text-stone-900 dark:text-stone-100">
+          Связанная SVG-матрица: {{ post.k_item.s_title }}
+        </h2>
+      </div>
+      <span class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
+        {{ post.k_item.get_i_level_display }}
+      </span>
+    </div>
+
+    <div class="flex flex-col md:flex-row items-center gap-6">
+      <!-- Интерактивное полотно картины -->
+      <div class="w-full md:w-1/2 aspect-square rounded-2xl overflow-hidden border border-stone-200/80 dark:border-zinc-700/80 bg-stone-950 shadow-inner flex items-center justify-center p-2">
+        {% if active_svg %}
+          <div class="w-full h-full flex items-center justify-center pointer-events-auto">
+            {{ active_svg|safe }}
+          </div>
+        {% elif post.k_item.file_svg %}
+          <img src="{{ post.k_item.file_svg.url }}" alt="{{ post.k_item.s_title }}" class="max-w-full max-h-full object-contain">
+        {% endif %}
+      </div>
+
+      <!-- Метаданные генерации и действия -->
+      <div class="w-full md:w-1/2 space-y-4 text-xs font-mono">
+        <div class="space-y-2 bg-white/60 dark:bg-zinc-800/60 p-4 rounded-xl border border-stone-200/60 dark:border-zinc-700/60 text-stone-700 dark:text-stone-300">
+          <div class="flex justify-between">
+            <span class="opacity-70">Хэш волновой матрицы:</span>
+            <span class="font-bold text-purple-600 dark:text-purple-400">#{{ post.k_item.s_hash_id }}</span>
+          </div>
+          {% if svg_stats.total_oscillators %}
+          <div class="flex justify-between">
+            <span class="opacity-70">Осцилляций в сетке:</span>
+            <span class="font-bold">{{ svg_stats.total_oscillators }}</span>
+          </div>
+          {% endif %}
+          {% if svg_stats.viewbox %}
+          <div class="flex justify-between">
+            <span class="opacity-70">Пространство viewBox:</span>
+            <span class="font-bold">{{ svg_stats.viewbox }}</span>
+          </div>
+          {% endif %}
+          <div class="flex justify-between">
+            <span class="opacity-70">Признание сообщества:</span>
+            <span class="font-bold text-emerald-600 dark:text-emerald-400">{{ post.k_item.i_likes_count }} лайков</span>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap gap-2.5 pt-2">
+          <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}"
+             class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-700 text-white transition-all shadow-md hover:scale-105 active:scale-95 border-0">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+            </svg>
+            <span>В галерею</span>
+          </a>
+
+          <a href="{% url 'hypn0_site:gallery_download' post.k_item.s_hash_id %}"
+             class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-xs font-bold bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-200 transition-all shadow-sm border border-stone-200 dark:border-zinc-700 border-0">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+            </svg>
+            <span>Скачать SVG</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  <!-- Основной контент статьи -->
+  <div class="prose max-w-none font-sans text-base sm:text-lg">
+    {{ post.s_content|safe }}
+  </div>
+
+  <!-- РАЗДЕЛ СЕРИИ: список глав (если статья является родительской подборкой/серией) -->
+  {% if series_posts and not series_parent %}
+  <section class="space-y-4 pt-8 border-t border-stone-200 dark:border-zinc-800">
+    <div class="flex items-center gap-3">
+      <div class="w-3 h-3 rounded-full bg-purple-500"></div>
+      <h2 class="text-xl font-bold uppercase tracking-wider text-stone-900 dark:text-stone-100">
+        Материалы и главы этого цикла
+      </h2>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      {% for child in series_posts %}
+      <div class="bg-stone-100/70 dark:bg-zinc-900/70 rounded-2xl border border-stone-200 dark:border-zinc-800 p-4 space-y-2 hover:border-purple-400 dark:hover:border-purple-600 transition-colors">
+        <div class="flex items-center justify-between text-[11px] font-mono text-stone-400">
+          <span class="font-bold text-purple-600 dark:text-purple-400">Глава {{ child.i_order }}</span>
+          <time datetime="{{ child.d_published_at|date:'c' }}">{{ child.d_published_at|date:'d E Y' }}</time>
+        </div>
+        <h3 class="font-bold text-sm text-stone-900 dark:text-stone-100">
+          <a href="{{ child.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
+            {{ child.s_title|safe }}
+          </a>
+        </h3>
+        {% if child.s_teaser %}
+        <p class="text-xs text-stone-600 dark:text-stone-400 line-clamp-2">
+          {{ child.s_teaser|striptags }}
+        </p>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  <!-- НАВИГАЦИЯ ВПЕРЕД / НАЗАД -->
+  <footer class="pt-8 border-t border-stone-200 dark:border-zinc-800 space-y-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      
+      <!-- Предыдущая статья -->
+      {% if prev_post %}
+      <a href="{{ prev_post.get_absolute_url }}"
+         class="group flex flex-col p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
+        <span class="text-xs font-mono text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
+          <svg class="w-3.5 h-3.5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+          </svg>
+          {% if series_parent %}Предыдущая глава цикла{% else %}Предыдущая депеша{% endif %}
+        </span>
+        <span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
+          {{ prev_post.s_title|safe }}
+        </span>
+      </a>
+      {% else %}
+      <div class="p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
+        <span class="text-xs font-mono text-stone-400 block mb-1">
+          {% if series_parent %}Первая глава цикла{% else %}Начало хроник гипноза{% endif %}
+        </span>
+        <span class="font-bold text-sm text-stone-500 dark:text-stone-400">
+          Нет предшествующих записей
+        </span>
+      </div>
+      {% endif %}
+
+      <!-- Следующая статья -->
+      {% if next_post %}
+      <a href="{{ next_post.get_absolute_url }}"
+         class="group flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
+        <span class="text-xs font-mono text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
+          {% if series_parent %}Следующая глава цикла{% else %}Следующая депеша{% endif %}
+          <svg class="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        </span>
+        <span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
+          {{ next_post.s_title|safe }}
+        </span>
+      </a>
+      {% else %}
+      <div class="flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
+        <span class="text-xs font-mono text-stone-400 block mb-1">
+          {% if series_parent %}Финальная глава цикла{% else %}Край ноосферы{% endif %}
+        </span>
+        <span class="font-bold text-sm text-stone-500 dark:text-stone-400">
+          Свежие депеши еще материализуются
+        </span>
+      </div>
+      {% endif %}
+
+    </div>
+
+    <!-- Центральная кнопка возврата в блог -->
+    <div class="text-center pt-2">
+      <a href="{% url 'hypn0_site:blog_feed' %}"
+         class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all border border-stone-200 dark:border-zinc-700 border-0">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
+        </svg>
+        <span>Все статьи в хрониках</span>
+      </a>
+    </div>
+  </footer>
+
+</article>
+{% endblock CONTENT %}

hypn0/templates/blog/feed.html

@@ -0,0 +1,233 @@
+{% extends '_base.html' %}
+{% load static %}
+
+{% block PAGE_TITLE %}Хроники гипноза — Блог и манифесты волновой матрицы{% if page_obj.number > 1 %} (Фаза {{ page_obj.number }}){% endif %} | HypnoSVG{% endblock %}
+
+{% block META_TITLE %}Хроники гипноза — Блог HypnoSVG{% if page_obj.number > 1 %} (Фаза {{ page_obj.number }}){% endif %}{% endblock %}
+
+{% block META_DESCRIPTION %}Официальные депеши из глубин подсознания: руководства по векторному трансу, алгоритмы волновых матриц и психоделические статьи HypnoSVG.{% if page_obj.number > 1 %} Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}.{% endif %}{% endblock %}
+
+{% block OG_TITLE %}Хроники гипноза — Блог HypnoSVG{% if page_obj.number > 1 %} (Фаза {{ page_obj.number }}){% endif %}{% endblock %}
+
+{% block OG_DESCRIPTION %}Официальные депеши из глубин подсознания: руководства по векторному трансу, алгоритмы волновых матриц и психоделические статьи HypnoSVG.{% endblock %}
+
+{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% if page_obj.number > 1 %}?page={{ page_obj.number }}{% endif %}{% endblock %}
+
+{% block EXTRA_HEAD %}
+  {% if page_obj.has_previous %}
+    <link rel="prev" href="{{ request.path }}?page={{ page_obj.previous_page_number }}" />
+  {% endif %}
+  {% if page_obj.has_next %}
+    <link rel="next" href="{{ request.path }}?page={{ page_obj.next_page_number }}" />
+  {% endif %}
+{% endblock EXTRA_HEAD %}
+
+{% block CONTENT %}
+<div class="max-w-6xl mx-auto space-y-8">
+
+  <!-- Навигация и счетчик -->
+  <div class="flex flex-wrap items-center justify-between gap-4">
+    <div class="flex items-center gap-4 text-xs font-bold uppercase tracking-wider">
+      <a href="{% url 'hypn0_site:index' %}"
+         class="inline-flex items-center gap-1.5 text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition-colors border-0">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+        </svg>
+        <span>Генератор</span>
+      </a>
+      <span class="text-stone-300 dark:text-zinc-700">•</span>
+      <a href="{% url 'hypn0_site:gallery_archive' %}"
+         class="inline-flex items-center gap-1.5 text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition-colors border-0">
+        <span>Галерея транса</span>
+      </a>
+    </div>
+
+    <span class="text-xs font-mono text-stone-500 dark:text-stone-400">
+      Фаза {{ page_obj.number }} из {{ page_obj.paginator.num_pages }} (Материализовано депеш: {{ total_posts_count }})
+    </span>
+  </div>
+
+  <!-- Шапка блога в стиле Гипножабы -->
+  <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-purple-900/15 via-emerald-900/10 to-stone-900/20 dark:from-purple-950/40 dark:via-zinc-900/90 dark:to-emerald-950/30 border border-purple-200/80 dark:border-purple-900/40 p-6 sm:p-10 shadow-lg backdrop-blur-md">
+    <div class="relative z-10 space-y-3">
+      <div class="flex flex-wrap items-center gap-3">
+        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30">
+          <span class="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span>
+          Хроники гипноза
+        </span>
+        <span class="text-xs font-mono text-stone-500 dark:text-stone-400">
+          NOOSPHERE ARCHIVE
+        </span>
+      </div>
+
+      <h1 class="text-3xl sm:text-5xl font-black uppercase tracking-tight text-stone-900 dark:text-stone-100">
+        Депеши из глубин подсознания
+      </h1>
+
+      <p class="text-sm sm:text-base text-stone-600 dark:text-stone-300 max-w-2xl leading-relaxed">
+        Теория векторных пульсаций, секретные руководства по интеграции SVG-матриц и наблюдения за поведением мозговых слизней в естественной среде.
+      </p>
+    </div>
+
+    <!-- Фоновый декоративный силуэт -->
+    <div class="absolute -right-8 -bottom-10 w-48 h-48 sm:w-64 sm:h-64 opacity-10 dark:opacity-15 pointer-events-none select-none text-purple-600">
+      <svg class="w-full h-full" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+      </svg>
+    </div>
+  </div>
+
+  <!-- Сетка статей -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    {% for post in page_obj %}
+    <article class="flex flex-col justify-between bg-white/70 dark:bg-zinc-900/70 rounded-3xl border border-stone-200/80 dark:border-zinc-800 p-5 sm:p-6 shadow-sm hover:shadow-xl hover:border-purple-400/60 dark:hover:border-purple-700/60 transition-all duration-300 group backdrop-blur-sm">
+      
+      <div class="space-y-4">
+        <!-- Обложка поста (если есть) или связанный SVG -->
+        {% if post.f_cover_img %}
+        <a href="{{ post.get_absolute_url }}" class="block aspect-[16/9] rounded-2xl overflow-hidden border border-stone-200/60 dark:border-zinc-700/60 shadow-inner bg-stone-100 dark:bg-zinc-800">
+          <img src="{{ post.f_cover_img.url }}"
+               alt="{{ post.s_title|striptags }}"
+               loading="lazy"
+               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
+        </a>
+        {% elif post.k_item and post.k_item.file_svg %}
+        <a href="{{ post.get_absolute_url }}" class="block aspect-[16/9] rounded-2xl overflow-hidden border border-purple-200/40 dark:border-purple-900/40 bg-purple-950/10 p-2 group-hover:scale-[1.02] transition-transform">
+          <div class="w-full h-full flex items-center justify-center overflow-hidden">
+            <img src="{{ post.k_item.file_svg.url }}" alt="{{ post.s_title|striptags }}" class="max-h-full max-w-full object-contain">
+          </div>
+        </a>
+        {% endif %}
+
+        <!-- Метаданные и бейджи -->
+        <div class="flex flex-wrap items-center gap-2">
+          {% if post.k_parent_post %}
+          <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+            </svg>
+            {{ post.k_parent_post.s_title|striptags|truncatechars:20 }}
+          </span>
+          {% elif post.child_posts.exists %}
+          <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/20">
+            Цикл / Серия
+          </span>
+          {% endif %}
+
+          {% if post.k_item %}
+          <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-cyan-500/10 text-cyan-700 dark:text-cyan-300 border border-cyan-500/20" title="Привязана SVG-генерация">
+            SVG
+          </span>
+          {% endif %}
+
+          <time datetime="{{ post.d_published_at|date:'c' }}" class="text-[11px] font-mono text-stone-400 dark:text-stone-500 ml-auto">
+            {{ post.d_published_at|date:'d E Y' }}
+          </time>
+        </div>
+
+        <!-- Заголовок -->
+        <h2 class="text-lg sm:text-xl font-bold text-stone-900 dark:text-stone-100 tracking-tight leading-snug">
+          <a href="{{ post.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
+            {{ post.s_title|safe }}
+          </a>
+        </h2>
+
+        <!-- Тизер / Лид -->
+        {% if post.s_teaser %}
+        <div class="text-xs sm:text-sm text-stone-600 dark:text-stone-300 leading-relaxed line-clamp-3">
+          {{ post.s_teaser|safe }}
+        </div>
+        {% endif %}
+      </div>
+
+      <!-- Нижняя плашка со ссылкой -->
+      <div class="pt-5 mt-4 border-t border-stone-200/60 dark:border-zinc-800 flex items-center justify-between">
+        <a href="{{ post.get_absolute_url }}"
+           class="group/link inline-flex items-center gap-1.5 text-xs font-bold border-0 text-emerald-600 dark:text-lime-400 hover:text-emerald-500 dark:hover:text-lime-300 transition-colors">
+          <span class="border-b border-dotted border-emerald-600/60 dark:border-lime-500/60 group-hover/link:border-solid">
+            {% if post.id|divisibleby:5 %}и так далее, в глубинах подсознания
+            {% elif post.id|divisibleby:4 %}подробнее, в блоге Гипножабы
+            {% elif post.id|divisibleby:3 %}подробнее, в записках Мозгового Слизня
+            {% elif post.id|divisibleby:2 %}занятный бред, продолжу чтение
+            {% else %}безвольно продолжить чтение{% endif %}
+          </span>
+          <svg class="w-3.5 h-3.5 shrink-0 transition-transform duration-200 group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
+          </svg>
+        </a>
+      </div>
+
+    </article>
+    {% empty %}
+    <div class="col-span-full py-16 text-center text-stone-400 space-y-3 bg-stone-100/50 dark:bg-zinc-900/50 rounded-3xl border border-stone-200 dark:border-zinc-800">
+      <svg class="w-12 h-12 mx-auto opacity-30 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+      </svg>
+      <p class="font-medium text-sm">Хроники гипноза пока пусты. Новые депеши готовятся к материализации.</p>
+    </div>
+    {% endfor %}
+  </div>
+
+  <!-- Пагинация -->
+  {% if page_obj.has_other_pages %}
+  <div class="flex items-center justify-between pt-6 border-t border-stone-200 dark:border-zinc-800">
+    <div>
+      {% if page_obj.has_previous %}
+        <a href="?page={{ page_obj.previous_page_number }}"
+           rel="prev"
+           class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all hover:scale-105 active:scale-95 shadow-sm border border-stone-200 dark:border-zinc-700/60 cursor-pointer border-0">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+          </svg>
+          <span>Предыдущая фаза</span>
+        </a>
+      {% else %}
+        <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-stone-400 dark:text-stone-600 bg-stone-100/50 dark:bg-zinc-900/50 border border-stone-200/50 dark:border-zinc-800/50 opacity-50 cursor-not-allowed">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+          </svg>
+          <span>Предыдущая фаза</span>
+        </span>
+      {% endif %}
+    </div>
+
+    <!-- Номера страниц -->
+    <div class="hidden sm:flex items-center gap-1.5 font-mono text-xs">
+      {% for p in page_obj.paginator.page_range %}
+        {% if p == page_obj.number %}
+          <span class="w-8 h-8 rounded-lg bg-purple-600 text-white font-bold flex items-center justify-center shadow-md">
+            {{ p }}
+          </span>
+        {% else %}
+          <a href="?page={{ p }}"
+             class="w-8 h-8 rounded-lg bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 flex items-center justify-center transition-colors border-0">
+            {{ p }}
+          </a>
+        {% endif %}
+      {% endfor %}
+    </div>
+
+    <div>
+      {% if page_obj.has_next %}
+        <a href="?page={{ page_obj.next_page_number }}"
+           rel="next"
+           class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-700 text-white transition-all hover:scale-105 active:scale-95 shadow-md border-0 cursor-pointer">
+          <span>Следующая фаза</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        </a>
+      {% else %}
+        <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-stone-400 dark:text-stone-600 bg-stone-100/50 dark:bg-zinc-900/50 border border-stone-200/50 dark:border-zinc-800/50 opacity-50 cursor-not-allowed">
+          <span>Следующая фаза</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        </span>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+</div>
+{% endblock CONTENT %}

hypn0/templates/css/tailwind-custom.css

@@ -87,4 +87,385 @@
       hover:text-emerald-500 dark:hover:text-lime-300 delay-300 duration-100
       hover:border-solid transition-colors transition duration-100;
   }
+}
+
+/* ==========================================================================
+   ТИПОГРАФИКА И СТИЛИ ДЛЯ СТАТЕЙ БЛОГА (CodeMirror / Rich HTML Content)
+   ========================================================================== */
+
+.prose {
+  color: #292524;
+  line-height: 1.75;
+  font-size: 1.0625rem;
+}
+
+.dark .prose {
+  color: #e7e5e4;
+}
+
+/* Заголовки */
+.prose h1 {
+  font-size: 2.25rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  color: #1c1917;
+}
+
+.dark .prose h1 {
+  color: #f5f5f4;
+}
+
+.prose h2 {
+  font-size: 1.625rem;
+  font-weight: 800;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  margin-top: 2.25rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
+  color: #1c1917;
+}
+
+.dark .prose h2 {
+  color: #f5f5f4;
+  border-bottom-color: rgba(168, 85, 247, 0.35);
+}
+
+.prose h3 {
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  margin-top: 1.75rem;
+  margin-bottom: 0.65rem;
+  color: #292524;
+}
+
+.dark .prose h3 {
+  color: #e7e5e4;
+}
+
+.prose h4 {
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.45;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: #292524;
+}
+
+.dark .prose h4 {
+  color: #e7e5e4;
+}
+
+.prose h5,
+.prose h6 {
+  font-size: 0.95rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 1.25rem;
+  margin-bottom: 0.4rem;
+  color: #57534e;
+}
+
+.dark .prose h5,
+.dark .prose h6 {
+  color: #a8a29e;
+}
+
+/* Параграфы и текстовые элементы */
+.prose p {
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+}
+
+.prose strong,
+.prose b {
+  font-weight: 700;
+  color: #1c1917;
+}
+
+.dark .prose strong,
+.dark .prose b {
+  color: #ffffff;
+}
+
+.prose em,
+.prose i {
+  font-style: italic;
+}
+
+.prose mark {
+  background-color: rgba(168, 85, 247, 0.2);
+  color: #6b21a8;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.25rem;
+}
+
+.dark .prose mark {
+  background-color: rgba(168, 85, 247, 0.35);
+  color: #e9d5ff;
+}
+
+/* Разделители */
+.prose hr {
+  margin: 2.25rem 0;
+  border: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
+}
+
+.dark .prose hr {
+  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
+}
+
+/* Списки */
+.prose ul {
+  list-style-type: disc;
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.65rem;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.65rem;
+}
+
+.prose li {
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+  line-height: 1.65;
+}
+
+.prose li::marker {
+  color: #9333ea;
+}
+
+.dark .prose li::marker {
+  color: #c084fc;
+}
+
+.prose ul ul,
+.prose ol ol,
+.prose ul ol,
+.prose ol ul {
+  margin-top: 0.35rem;
+  margin-bottom: 0.35rem;
+  padding-left: 1.35rem;
+}
+
+.prose ul ul {
+  list-style-type: circle;
+}
+
+.prose ul ul ul {
+  list-style-type: square;
+}
+
+/* Цитаты */
+.prose blockquote {
+  margin: 1.5rem 0;
+  padding: 0.85rem 1.25rem;
+  border-left: 4px solid #a855f7;
+  background-color: rgba(245, 245, 244, 0.6);
+  border-radius: 0 1rem 1rem 0;
+  font-style: italic;
+  color: #57534e;
+}
+
+.dark .prose blockquote {
+  background-color: rgba(24, 24, 27, 0.6);
+  color: #d6d3d1;
+}
+
+.prose blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* Таблицы */
+.prose table {
+  width: 100%;
+  margin: 1.75rem 0;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.9375rem;
+  border: 1px solid rgba(228, 228, 231, 0.9);
+  border-radius: 0.875rem;
+  overflow: hidden;
+  display: table;
+}
+
+.dark .prose table {
+  border-color: rgba(63, 63, 70, 0.7);
+}
+
+.prose thead {
+  background-color: rgba(244, 244, 245, 0.95);
+  border-bottom: 2px solid rgba(212, 212, 216, 0.9);
+}
+
+.dark .prose thead {
+  background-color: rgba(39, 39, 42, 0.95);
+  border-bottom-color: rgba(63, 63, 70, 0.9);
+}
+
+.prose th {
+  padding: 0.75rem 1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  color: #18181b;
+}
+
+.dark .prose th {
+  color: #f4f4f5;
+}
+
+.prose td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(244, 244, 245, 0.9);
+  vertical-align: top;
+}
+
+.dark .prose td {
+  border-bottom-color: rgba(39, 39, 42, 0.8);
+}
+
+.prose tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.prose tbody tr:nth-child(even) {
+  background-color: rgba(250, 250, 250, 0.5);
+}
+
+.dark .prose tbody tr:nth-child(even) {
+  background-color: rgba(24, 24, 27, 0.3);
+}
+
+.prose tbody tr:hover {
+  background-color: rgba(168, 85, 247, 0.05);
+}
+
+.dark .prose tbody tr:hover {
+  background-color: rgba(168, 85, 247, 0.1);
+}
+
+.prose caption {
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  font-style: italic;
+  color: #78716c;
+}
+
+/* Код и блоки кода */
+.prose code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+  background-color: rgba(243, 244, 246, 0.9);
+  color: #7e22ce;
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.375rem;
+  border: 1px solid rgba(229, 231, 235, 0.8);
+  font-weight: 600;
+}
+
+.dark .prose code {
+  background-color: rgba(39, 39, 42, 0.8);
+  color: #d8b4fe;
+  border-color: rgba(63, 63, 70, 0.8);
+}
+
+.prose pre {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: 1rem;
+  background-color: #18181b;
+  color: #f4f4f5;
+  overflow-x: auto;
+  border: 1px solid rgba(63, 63, 70, 0.6);
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+.prose pre code {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+  border: 0;
+  font-size: 0.9em;
+  font-weight: 400;
+}
+
+/* Изображения и медиа */
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 1rem;
+  margin: 1.5rem auto;
+  display: block;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.prose figure {
+  margin: 1.75rem 0;
+  text-align: center;
+}
+
+.prose figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: #78716c;
+  font-style: italic;
+}
+
+/* Спойлеры и клавиши */
+.prose details {
+  margin: 1.25rem 0;
+  padding: 0.85rem 1.15rem;
+  border-radius: 1rem;
+  background-color: rgba(245, 245, 244, 0.6);
+  border: 1px solid rgba(228, 228, 231, 0.8);
+}
+
+.dark .prose details {
+  background-color: rgba(24, 24, 27, 0.6);
+  border-color: rgba(63, 63, 70, 0.6);
+}
+
+.prose summary {
+  font-weight: 700;
+  cursor: pointer;
+  color: #18181b;
+  user-select: none;
+}
+
+.dark .prose summary {
+  color: #f4f4f5;
+}
+
+.prose kbd {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8em;
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.25rem;
+  background-color: #e4e4e7;
+  color: #18181b;
+  border: 1px solid #d4d4d8;
+  box-shadow: 0 1px 0 1px #a1a1aa;
+}
+
+.dark .prose kbd {
+  background-color: #27272a;
+  color: #f4f4f5;
+  border-color: #3f3f46;
+  box-shadow: 0 1px 0 1px #18181b;
 }