michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive design for index and blog listing page

Browse Source
This commit is contained in:
Michal Vanko
2024-09-12 17:03:11 +02:00
parent 255536c681
commit cb61962812
15 changed files with 214 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
axum_server/templates/components/blog_post_preview.html
View File

@ -1,17 +1,19 @@
<article class="grid grid-cols-[max-content_1fr] grid-flow-col gap-4">
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8">
<aside class="row-span-3">
{% match post.metadata.thumbnail %}
{% when Some with (orig_path) %}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap()|safe }}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("".to_string())|safe }}
{% when None %}
<div> TODO default obrazok </div>
{% endmatch %}
</aside>
<header>
<h3 class="text-lg font-bold mb-1 md:text-3xl">{{post.metadata.title}}</h3>
<h3 class="text-lg font-bold mb-1 md:text-3xl">
<a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
</h3>
</header>
<section class="text-base leading-5 text-gray-800 md:text-xl">{{post.body|description_filter|safe}}</section>
<footer class="text-sm">
<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
<footer class="text-sm md:text-base lg:text-lg">
<ul class="inline-block">
{% for tag in post.metadata.tags %}
<li class="inline-block">

2
axum_server/templates/components/project_preview_card.html
View File

@ -10,7 +10,7 @@
{{project.metadata.title}}
{% endmatch %}
</h2>
<section class="description text-slate-800 my-2 md:text-xl">
<section class="description text-slate-800 my-2 md:text-xl text-justify">
{{project.metadata.description|safe}}
</section>
</header>