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

improve layout for images, makes them a bit smaller v37

Browse source
This commit is contained in:
Konstantin 2024-04-10 19:49:04 +02:00
parent 9aa4f405ce
commit 95bbdc45bc
3 changed files with 44 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -1,5 +1,5 @@
.PHONY: help build publish
VERSION = 1.0.36
VERSION = 1.0.37
help:
@perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

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

@ -8,61 +8,61 @@
<section class="px-1 md:px-4 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<div class="mx-auto max-w-xl lg:max-w-2xl">
<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="group relative w-full">
<h2 class="mt-3 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>
{% if post.main_image %}
<div class="relative aspect-[16/9]">
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image width-1600 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>
{% 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>
{% 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 %}
<div class="relative isolate flex flex-col gap-8">
<div class="group relative w-full">
<h2 class="mt-3 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>
{% if post.main_image %}
<div class="relative mx-auto">
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image width-1600 class="blog" %}{% endif %}
{% endwith %}
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
{% 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>
{% 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 %}
</div>
</div>
</div>
</section>

2
theme/static_src/src/styles.css
View file

@ -45,7 +45,7 @@
}
img.blog {
@apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
@apply inset-0 h-full w-full rounded-2xl bg-gray-50 object-contain shadow-lg;
}
.blog-content img {