minor: design adjust (1)
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user