konstantin/iamkonstantin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

layout tweaks

Browse source
This commit is contained in:
Konstantin 2024-03-23 16:10:46 +01:00
parent efe3c23c67
commit f032383ed0
4 changed files with 68 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

86
blog/templates/blog/blog_index_page.html
View file

@ -9,65 +9,55 @@
<section class="py-24 sm:py-32 mx-4">
<div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h2>
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h1>
<div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>
<div class="mt-16 space-y-20 lg:mt-20 blog-pages">
{% for post in blogpages %}
{% with post=post.specific %}
<article class="relative isolate flex flex-col gap-8">
<div class="relative aspect-[16/9]">
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image width-800 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %}
{% endwith %}
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<div class="group relative w-full">
<h2 class="mt-3 text-lg font-semibold leading-6 group-hover:text-klavender border-klavender border-b-4">
<a href="{% pageurl post %}">
<span class="absolute inset-0"></span>
{{ post.title }}
</a>
</h2>
<p class="mt-5 leading-6">{{ post.intro }}</p>
</div>
<div>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="{{ post.date|date:"Y-m-d" }}">{{ post.date }}</time>
{% with tags=post.tags.all %}
{% if tags %}
<div class="tags">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li class="space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2"
href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if post.main_image %}
<div class="relative aspect-[16/9]">
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image width-800 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %}
{% endwith %}
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-klavender">
<a href="{% pageurl post %}">
<span class="absolute inset-0"></span>
{{ post.title }}
</a>
</h3>
<p class="mt-5 leading-6">{{ post.intro }}</p>
{% endif %}
<div class="flex-col items-center text-xs">
<div class="space-x-2 text-left"><span class="emoji"
aria-hidden="true">🕘</span>
<time class="text-sm"
datetime="{{ post.date|date:"Y-m-d" }}">{{ post.date }}</time>
</div>
{# <div class="mt-6 flex border-t border-gray-900/5 pt-6">#}
{# <div class="relative flex items-center gap-x-4">#}
{# <img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"#}
{# alt="" class="h-10 w-10 rounded-full bg-gray-50">#}
{# <div class="text-sm leading-6">#}
{# <p class="font-semibold text-gray-900">#}
{# <a href="#">#}
{# <span class="absolute inset-0"></span>#}
{# Michael Foster#}
{# </a>#}
{# </p>#}
{# <p class="text-gray-600">Co-Founder / CTO</p>#}
{# </div>#}
{# </div>#}
{# </div>#}
{% with tags=post.tags.all %}
{% if tags %}
<div class="tags mt-2">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li class="lg:space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2"
href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
</div>
</article>
{% endwith %}
{% endfor %}

41
blog/templates/blog/blog_page.html
View file

@ -36,9 +36,10 @@
{% endif %}
{% endwith %}
<div class="intro mt-6">{{ page.intro }}</div>
<div class="blog-content">
<div class="blog-content w-full px-2 lg:px-4">
<div class="my-6 text-lg font-medium">{{ page.intro }}</div>
{{ page.body }}
<div class="flex">
@ -49,25 +50,27 @@
</div>
{% endfor %}
</div>
{% with tags=page.tags.all %}
{% if tags %}
<div class="flex items-center gap-x-4 text-xs">
<div class="tags">
<h2 class="sr-only">Tags</h2>
<ul class="flex">
{% for tag in tags %}
<li class="space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endwith %}
</div>
{% with tags=page.tags.all %}
{% if tags %}
<div class="flex items-center gap-x-4 text-xs">
<div class="tags">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li class="space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endwith %}
</article>