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

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

@ -8,14 +8,14 @@
<section class="px-1 md:px-4 lg:px-8"> <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> <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-2 text-lg leading-8">{{ page.intro|richtext }}</div>
<div class="mt-16 space-y-20 lg:mt-20 blog-pages"> <div class="mt-16 space-y-20 lg:mt-20 blog-pages">
{% for post in blogpages %} {% for post in blogpages %}
{% with post=post.specific %} {% with post=post.specific %}
<article class="relative isolate flex flex-col gap-8"> <div class="relative isolate flex flex-col gap-8">
<div class="group relative w-full"> <div class="group relative w-full">
<h2 class="mt-3 font-semibold leading-6 group-hover:text-klavender border-klavender border-b-4"> <h2 class="mt-3 font-semibold leading-6 group-hover:text-klavender border-klavender border-b-4">
<a href="{% pageurl post %}"> <a href="{% pageurl post %}">
@ -26,10 +26,10 @@
<p class="mt-5 leading-6">{{ post.intro }}</p> <p class="mt-5 leading-6">{{ post.intro }}</p>
</div> </div>
{% if post.main_image %} {% if post.main_image %}
<div class="relative aspect-[16/9]"> <div class="relative mx-auto">
{% with post.main_image as main_image %} {% with post.main_image as main_image %}
{% if 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 %} {% image main_image width-1600 class="blog" %}{% endif %}
{% endwith %} {% endwith %}
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div> <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div> </div>

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

@ -45,7 +45,7 @@
} }
img.blog { 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 { .blog-content img {