layout tweaks

This commit is contained in:
Konstantin 2024-03-23 15:35:03 +01:00
parent f6e1324a2b
commit efe3c23c67
4 changed files with 25 additions and 20 deletions

View file

@ -12,11 +12,11 @@
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h2>
<div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>
<div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20 blog-pages">
<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 lg:flex-row">
<div class="relative aspect-[16/9] lg:w-64 lg:shrink-0">
<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 %}
@ -33,8 +33,9 @@
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li>
<a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
<li class="space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2"
href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>

View file

@ -22,7 +22,11 @@
</div>
<div class="ml-3">
<p class="text-sm font-medium m-0"> {{ author.name }}</p>
<p class="space-x-2 m-0 mt-1 text-left"><span class="emoji" aria-hidden="true">🕘</span><time class="text-sm" datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time></p>
<p class="space-x-2 m-0 mt-1 text-left"><span class="emoji"
aria-hidden="true">🕘</span>
<time class="text-sm"
datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time>
</p>
</div>
</div>
</div>
@ -49,20 +53,25 @@
{% with tags=page.tags.all %}
{% if tags %}
<div class="tags">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
{% endfor %}
</ul>
<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>
<nav class="w-full px-2 lg:px-4">
<nav class="w-full text-center px-2 lg:px-4">
<a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
</nav>

View file

@ -40,11 +40,6 @@
</head>
<body class="flex h-full bg-zinc-50 dark:bg-black {% block body_class %}{% endblock %}">
<div class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl px-0 md:px-4 lg:px-8">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
</div>
</div>
<div class="relative w-full sm:px-8">
{% include "includes/header.html" %}

View file

@ -33,7 +33,7 @@
}
h3 {
@apply mt-4 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
@apply mt-12 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
}
h4 {