From 5d0f2eb1b242fcbab44d8c8a071b2be56dcd3395 Mon Sep 17 00:00:00 2001
From: erjemin <erjemin@gmail.com>
Date: Wed, 9 Sep 2026 23:37:19 +0300
Subject: [PATCH] minor: design adjust (1)

---
 hypn0/templates/blog/detail.html     | 114 +++++++++++++++------------
 hypn0/templates/gallery/archive.html |   2 +-
 hypn0/templates/gallery/detail.html  |   2 +-
 3 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/hypn0/templates/blog/detail.html b/hypn0/templates/blog/detail.html
index 740bd7c..2ca1db6 100644
--- a/hypn0/templates/blog/detail.html
+++ b/hypn0/templates/blog/detail.html
@@ -30,29 +30,23 @@
 {% endblock EXTRA_LD_JSON %}
 
 {% block CONTENT %}
-<article class="max-w-4xl mx-auto space-y-10">
+<article class="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 class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
+    <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 %}
   </nav>
 
   <!-- Серия: индикатор цикла (если пост является частью серии) -->
@@ -73,41 +67,61 @@
   </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 %}
+  <!-- Заголовок, метаданные и превью статьи (двухколоночный блок) -->
+  <header class="space-y-6">
+    <!-- Метаданные статьи: бейджи слева, дата-время справа -->
+    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-stone-200/60 dark:border-zinc-800/80 pb-3">
+      <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>
+
+      <time datetime="{{ post.d_published_at|date:'c' }}" class="font-mono text-xs text-stone-500 dark:text-stone-400">
+        {{ post.d_published_at|date:'d E 30y, H:i:s' }}
+      </time>
     </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>
+    <!-- Тизер-превью слева (1/4), Заголовок + Тизер справа (3/4) -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
+      <!-- Тизер-превью слева (1/4) -->
+      <div class="md:col-span-1 w-full">
+        {% if post.f_cover_img %}{# ЕСТЬ ТИЗЕР-КАРТИНКА И ПОКАЗЫВАЕМ ЕË #}
+        <div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl overflow-hidden border border-stone-200 dark:border-zinc-800 shadow-md bg-stone-100 dark:bg-zinc-900">
+          <img src="{{ post.f_cover_img.url }}"
+               alt="{{ post.s_title|striptags }}"
+               class="w-full h-full object-cover">
+        </div>
+        {% else %}{# НЕТ ТИЗЕР-КАРТИНКИ И ПОКАЗЫВАЕМ ЗАГЛУШКУ #}
+        <div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl border border-dashed border-stone-300 dark:border-zinc-700 bg-stone-100/40 dark:bg-zinc-900/40 flex flex-col items-center justify-center p-3 text-stone-400 dark:text-stone-600 text-center">
+          <img src="{% static 'img/brain-slug.svg' %}" alt="Гипножаба" class="w-10 h-10 opacity-40 mb-1">{# <-- СЮДА ДЕФОЛТНУЮ КАРТИНКУ #}
+          <span class="text-[10px] font-mono uppercase tracking-wider">Тут ничего не нарисовано</span>{# <-- А ПОСЛЕ ЭТО УБРАТЬ #}
+        </div>
+        {% endif %}
+      </div>
 
-    <!-- Лид / Тизер статьи -->
-    {% 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 }}
+      <!-- Заголовок + Тизер справа (3/4) -->
+      <div class="md:col-span-3">
+        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100 leading-tight border-l-1 border-purple-500 border-dotted pl-6">
+          {{ 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-1 border-purple-500 border-dotted pl-6 py-6 bg-stone-100/50 dark:bg-zinc-900/50 rounded-r-2xl ">
+          {{ post.s_teaser|safe }}
+        </div>
+        {% endif %}
+      </div>
     </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">
diff --git a/hypn0/templates/gallery/archive.html b/hypn0/templates/gallery/archive.html
index 8d2f47b..c24763a 100644
--- a/hypn0/templates/gallery/archive.html
+++ b/hypn0/templates/gallery/archive.html
@@ -23,7 +23,7 @@
 {% endblock EXTRA_HEAD %}
 
 {% block CONTENT %}
-<div class="max-w-6xl mx-auto space-y-8">
+<div class="mx-auto space-y-8">
 
   <!-- Хлебные крошки и навигация -->
   <div class="flex flex-wrap items-center justify-between gap-4">
diff --git a/hypn0/templates/gallery/detail.html b/hypn0/templates/gallery/detail.html
index a475ac3..14850cf 100644
--- a/hypn0/templates/gallery/detail.html
+++ b/hypn0/templates/gallery/detail.html
@@ -10,7 +10,7 @@
 {% block TWITTER_IMAGE %}{% static 'img/og-hypn0-default.png' %}{% endblock %}
 
 {% block CONTENT %}
-<div class="max-w-5xl mx-auto space-y-8" x-data="{ copiedSvg: false, copiedUrl: false }">
+<div class="mx-auto space-y-8" x-data="{ copiedSvg: false, copiedUrl: false }">
 
   <!-- Навигационная панель / Хлебные крошки и Переходы -->
   <div class="flex flex-wrap items-center justify-between gap-3">