Responsive design for index page

This commit is contained in:
2024-09-12 15:00:20 +02:00
parent 4305da1d0c
commit 255536c681
6 changed files with 255 additions and 118 deletions

View File

@ -8,9 +8,9 @@
{% endmatch %}
</aside>
<header>
<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3>
<h3 class="text-lg font-bold mb-1 md:text-3xl">{{post.metadata.title}}</h3>
</header>
<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
<section class="text-base leading-5 text-gray-800 md:text-xl">{{post.body|description_filter|safe}}</section>
<footer class="text-sm">
<ul class="inline-block">
{% for tag in post.metadata.tags %}

View File

@ -1,6 +1,6 @@
<article class="border rounded-md bg-white m-4 p-4">
<header class="px-4 mb-3">
<h2 class="text-xl font-semibold text-blue-900">
<h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
{% match project.metadata.link %}
{% when Some with (href) %}
<a href="{{href}}" class="text-blue-900 no-underline">
@ -10,9 +10,9 @@
{{project.metadata.title}}
{% endmatch %}
</h2>
<p class="text-gray-800 text-lg my-2">
<section class="description text-slate-800 my-2 md:text-xl">
{{project.metadata.description|safe}}
</p>
</section>
</header>
<!-- <hr class="border-blue-950 my-5"> -->
@ -33,8 +33,8 @@
{% endmatch %}
<footer class="text-sm px-4">
<h3 class="text-xl font-semibold text-blue-900 my-2">
<footer class="text-sm px-4 md:text-base">
<h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
{{crate::projects::project_model::translate_classification(project.metadata.classification)}}
</h3>
<ul class="inline-block">

View File

@ -2,15 +2,15 @@
<section class="flex border rounded bg-white m-4 p-3">
<aside class="flex justify-center items-center pr-3">
<svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
<svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
</svg>
</aside>
<section>
<header>
<h3 class="text-lg font-medium mb-1">{{heading}}</h3>
<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
</header>
<p class="text-sm leading-5 text-gray-800">{{description|safe}}</p>
<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
</section>
</section>