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

more layout improvements

Browse source
This commit is contained in:
Konstantin 2024-03-18 17:52:23 +01:00
parent dee2d33a36
commit 30e8f29d1f
3 changed files with 72 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,27 +5,74 @@
{% block body_class %}template-blogindexpage{% endblock %}
{% block content %}
<section class="flex flex-col items-center justify-center h-full mx-4">
<h1>{{ page.title }}</h1>
<div class="intro">{{ page.intro|richtext }}</div>
</section>
<section class="py-24 sm:py-32 mx-4">
<div class="mx-auto max-w-7xl px-6 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>
<div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>
<section class="flex flex-col h-full mx-4">
{% for post in blogpages %}
{% with post=post.specific %}
<article class="w-full flex flex-col items-center">
<h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
<div class="mt-16 space-y-20 lg:mt-20 lg:space-y-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] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image width-400 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>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16">{{ post.date }}</time>
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image width-400 class="blog" %}{% endif %}
{% endwith %}
<p>{{ post.intro }}</p>
</article>
{% endwith %}
{% endfor %}
{% with tags=post.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>
{% endif %}
{% endwith %}
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
<a href="{% pageurl post %}">
<span class="absolute inset-0"></span>
{{ post.title }}
</a>
</h3>
<p class="mt-5 leading-6">{{ post.intro }}</p>
</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>#}
</div>
</article>
{% endwith %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}

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

@ -47,7 +47,7 @@
</div>
</div>
{% with tags=page.tags.all %}
{% with tags=page.tags.all %}
{% if tags %}
<div class="tags">
<h3 class="sr-only">Tags</h3>

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

@ -78,13 +78,17 @@
}
.tags ul {
@apply flex space-x-4 text-center text-lg;
@apply flex space-x-4 text-center text-sm;
}
.tags li {
@apply flex-1 p-4 inline-flex items-center rounded-md bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
@apply flex-1 p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
}
.tags a {
@apply border-b-0 w-full;
}
.blog-pages a {
@apply border-b-0;
}