minor: design adjust (5)

hypn0/templates/blog/detail.html

@@ -67,7 +67,7 @@
   </div>
   {% 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">
@@ -77,6 +77,7 @@
         </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-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">
+          Аддитивная картина: {{ post.k_item.s_title }}
         </a>
         {% endif %}
       </div>
@@ -85,44 +86,42 @@
         {{ 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] 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-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>
   </header>
-  {% comment %}
+
-  <!-- ОСНОВНАЯ ЧАСТЬ СТАТЬИ (Двухколоночная верстка: SVG с подписями слева 1/4, контент справа 3/4) -->{% endcomment %}
+  <!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 1/4 слева (превью + SVG), 3/4 справа (заголовок + тизер + контент) -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">{% comment %}
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 items-start">
-    <!-- Левая колонка (1/4): Связанный SVG + Музейные экспликации/подписи -->{% endcomment %}
+
+    <!-- 1. Верхний ряд слева (1/4): Тизер-превью обложки -->
+    <div class="md:col-span-1 w-full pb-8">
+      {% 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] uppercase tracking-wider">Тут ничего не нарисовано</span>{# <-- А ПОСЛЕ ЭТО УБРАТЬ #}
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- 1. Верхний ряд справа (3/4): Заголовок + Тизер с непрерывной пунктирной линией -->
+    <div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6 pb-8 space-y-4">
+      <h1 class="text-3xl sm:text-4xl lg: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 p-4 sm:p-5 bg-stone-100/50 dark:bg-zinc-900/50 rounded-2xl">
+        {{ post.s_teaser|safe }}
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- 2. Нижний ряд слева (1/4): Связанный SVG + Музейная экспликация (выровнены по вертикали с первой строкой контента) -->
     <div class="md:col-span-1 space-y-4">
       {% if post.k_item %}
       <aside class="space-y-3 md:sticky md:top-6">
@@ -166,7 +165,7 @@
             </div>
             <div class="flex items-center justify-end gap-1.5 mt-3.5">
               <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}"
-                 class="text-[10px] px-2 py-0.5 rounded-full font-mono text-purple-600 dark:text-purple-400 font-bold border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/15 hover:border-purple-500/40 transition-colors"
+                 class="text-[10px] px-2 py-0.5 rounded-full text-purple-600 dark:text-purple-400 font-bold border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/15 hover:border-purple-500/40 transition-colors"
                  title="Открыть картину в галерее">#{{ post.k_item.s_hash_id }}</a>
             </div>
             <div class="flex items-center justify-end gap-1.5 mt-1.5">
@@ -180,7 +179,7 @@
             {% if svg_stats.total_oscillators %}
             <div class="flex justify-between items-center">
               <span class="opacity-70">Осцилляций:</span>
-              <span class="font-bold text-stone-900 dark:text-stone-200 font-mono">{{ svg_stats.total_oscillators }}</span>
+              <span class="font-bold text-stone-900 dark:text-stone-200">{{ svg_stats.total_oscillators }}</span>
             </div>
             {% endif %}
             {% if svg_stats.viewbox %}
@@ -229,9 +228,9 @@
       {% endif %}
     </div>
 
-    <!-- Правая колонка (3/4): Текстовый блок статьи -->
+    <!-- 2. Нижний ряд справа (3/4): Текстовый блок статьи -->
-    <div class="md:col-span-3">
+    <div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6">
-      <div class="prose max-w-none font-sans text-base sm:text-lg border-l-1 border-purple-500 border-dotted pl-6">
+      <div class="prose max-w-none font-sans text-base sm:text-lg">
         {{ post.s_content|safe }}
       </div>
     </div>

hypn0/templates/css/tailwind-custom.css

@@ -99,6 +99,10 @@
   font-size: 1.0625rem;
 }
 
+.prose > :first-child {
+  margin-top: 0 !important;
+}
+
 .dark .prose {
   color: #e7e5e4;
 }