minor: design adjust (1)

hypn0/templates/blog/detail.html

@@ -30,11 +30,10 @@
 {% 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">
+  <nav class="flex items-center gap-2 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">
@@ -48,11 +47,6 @@
       {{ 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>
 
   <!-- Серия: индикатор цикла (если пост является частью серии) -->
@@ -73,8 +67,10 @@
   </div>
   {% endif %}
 
-  <!-- Заголовок и метаданные статьи -->
+  <!-- Заголовок, метаданные и превью статьи (двухколоночный блок) -->
-  <header class="space-y-4">
+  <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">
           Хроники гипноза
@@ -82,31 +78,49 @@
         {% 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 }}
+          Аддитивная картина «Галереи Транса»: #{{ 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">
+      <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>
+
+    <!-- Тизер-превью слева (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>
+
+      <!-- Заголовок + Тизер справа (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-4 border-purple-500 pl-4 py-1 bg-stone-100/50 dark:bg-zinc-900/50 rounded-r-2xl">
+        <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 %}
-  </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 %}
+    </div>
+  </header>
 
   <!-- БЛОК СВЯЗАННОГО SVG (если статья рассказывает о конкретной генерации) -->
   {% if post.k_item %}

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">

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">