mooooar moooar pretty fixes

2024-09-20 11:51:29 +02:00
parent f3c4df4458
commit 377aee315e
12 changed files with 84 additions and 71 deletions
--- a/axum_server/templates/base.html
+++ b/axum_server/templates/base.html
@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <title>{% block title %} {{title}} @michalvankodev {% endblock %}</title>
+    <title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="theme-color" content="#333333" />
@ -13,16 +13,13 @@
      rel="alternate"
      type="application/rss+xml"
      title="RSS feed for latest posts"
-      href="https://michalvanko.dev/feed.xml"
+      href="/feed.xml"
    />

    <!-- Tailwind output file -->
    <link rel="stylesheet" href="/styles/output.css" />

-    <link rel="stylesheet" href="/print.css" media="print" />
-    <link rel="stylesheet" href="/fonts.css" />
    <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/prism.css" />

    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
    <link rel="icon" type="image/png" href="/m-logo-192.png" />
--- a/axum_server/templates/blog_post.html
+++ b/axum_server/templates/blog_post.html
@ -8,7 +8,7 @@
  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
  <aside class="flex justify-between flex-row">
    {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
+    <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
      <span>Published on</span>
      <time datetime="{date}"> {{date|pretty_date}} </time>
    </section>
--- a/axum_server/templates/blog_post_list.html
+++ b/axum_server/templates/blog_post_list.html
@ -25,13 +25,13 @@
      </ul>
    </section>

-    <hr class="border-blue-950 m-5 md:my-8">
+    <hr class="border-slate-300 m-5 md:my-8">

    <ul class="mx-5">
      {% for post in posts %}
      <li>
        {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
      </li>
      {% endfor %}
    </ul>
--- a/axum_server/templates/components/blog_post_preview.html
+++ b/axum_server/templates/components/blog_post_preview.html
@ -1,4 +1,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">
+<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
 	<aside class="row-span-3 self-center">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
@ -14,7 +14,7 @@
 		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
-	<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
+	<section class="text-base leading-5 text-slate-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 %}
--- a/axum_server/templates/components/project_preview_card.html
+++ b/axum_server/templates/components/project_preview_card.html
@ -1,4 +1,4 @@
-<article class="border rounded-md bg-white m-4 p-4">
+<article class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
  <header class="px-4 mb-3"> 
    <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
      {% match project.metadata.link %}
@ -18,16 +18,17 @@

  {% match project.metadata.cover_image %}
  {% when Some with (source) %}
-  <figure class="mx-4 my-2">
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
+  <figure class="mx-4 my-2 flex justify-center">
      {% match project.metadata.link %}
      {% when Some with (href) %}
      <a href="{{href}}">
-        <img src="{{source}}" class="object-contain w-full aspect-video"/>
+       {{picture|safe}}
      </a>
      {% when None %}
-      <img src="{{source}}" />
+       {{picture|safe}}
      {% endmatch %}
-		<!-- TODO <figure> -->
+		<!-- TODO <figure> generate_image -->
  </figure>
  {% when None %}
  {% endmatch %}
--- a/axum_server/templates/components/talent_card.html
+++ b/axum_server/templates/components/talent_card.html
@ -10,7 +10,7 @@
 		<header>
 			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
 		</header>
-		<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
+		<p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
 	</section>
 </section>

--- a/axum_server/templates/index.html
+++ b/axum_server/templates/index.html
@ -7,23 +7,22 @@
 {% block content %}
 <section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
  <section id="about-me">
-    <header class="index-header hidden">
-      <figure class="profile-pic">
-        <picture>
-          <img
-            alt="Portrait"
-            {# TODO generate `srcset` for optimal image #}
-            {# TODO Take a new photo #}
-            src="/images/profile-portugal-landscape.jpg"
-          />
-        </picture>
-      </figure>
+    <!-- <header class="index-header hidden"> -->
+      <!-- <figure class="profile-pic"> -->
+        <!-- <picture> -->
+          <!-- <img -->
+            <!-- alt="Portrait" -->
+            <!-- {# TODO Take a new photo #} -->
+            <!-- src="/images/profile-portugal-landscape.jpg" -->
+          <!-- /> -->
+        <!-- </picture> -->
+      <!-- </figure> -->

-      <p class="motto">
-        <cite>“Let your ambition carry you.”</cite>
-        <span class="cite-owner">- La Flame</span>
-      </p>
-    </header>
+      <!-- <p class="motto"> -->
+        <!-- <cite>“Let your ambition carry you.”</cite> -->
+        <!-- <span class="cite-owner">- La Flame</span> -->
+      <!-- </p> -->
+    <!-- </header> -->

    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>

@ -52,13 +51,13 @@
        {% endfor %}
      </ul>
    </section>
-    <hr class="border-blue-950 m-5">
+    <hr class="border-slate-300 m-5">

    <ul class="mx-5">
     {% for post in featured_blog_posts %}
      <li>
        {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
      </li>
     {% endfor %}
    </ul>
@ -68,7 +67,7 @@
    {% include "sections/social.html" %}
  </section>

-  <hr class="border-blue-950 m-5 lg:hidden">
+  <hr class="border-slate-300 m-5 lg:hidden">

  <section id="showcase" class="col-span-2">
    {% include "sections/showcase.html" %}
--- a/axum_server/templates/site_header.html
+++ b/axum_server/templates/site_header.html
@ -3,7 +3,7 @@
  {% match header_props.back_link %}
  {% when Some with (link) %}
  <a
-    class="px-3 py-2 text-lg font-medium"
+    class="px-3 py-2 text-lg font-medium print:hidden"
    href="{{link.href}}"
  >
    {{link.label}}
@ -16,5 +16,5 @@
      </a>
    </aside>
 </nav>
-<hr class="border-blue-950 mx-5">
+<hr class="border-slate-300 mx-5">
 </header>