From 377aee315ece2857740e1b8b5e94684c38b85a44 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Fri, 20 Sep 2024 11:51:29 +0200
Subject: [PATCH] mooooar moooar pretty fixes

---
 axum_server/src/main.rs                       |  6 +--
 .../picture_markup_generator.rs               | 21 ++++++--
 axum_server/styles/input.css                  |  6 ++-
 axum_server/styles/output.css                 | 51 ++++++++++---------
 axum_server/templates/base.html               |  7 +--
 axum_server/templates/blog_post.html          |  2 +-
 axum_server/templates/blog_post_list.html     |  4 +-
 .../components/blog_post_preview.html         |  4 +-
 .../components/project_preview_card.html      | 11 ++--
 .../templates/components/talent_card.html     |  2 +-
 axum_server/templates/index.html              | 37 +++++++-------
 axum_server/templates/site_header.html        |  4 +-
 12 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/axum_server/src/main.rs b/axum_server/src/main.rs
index 224afba..594c127 100644
--- a/axum_server/src/main.rs
+++ b/axum_server/src/main.rs
@@ -35,6 +35,7 @@ async fn main() {
         .nest_service("/fonts", ServeDir::new("../static/fonts"))
         .nest_service("/generated_images", ServeDir::new("generated_images"))
         .nest_service("/svg", ServeDir::new("../static/svg"))
+        // TODO manifest logos have bad link, #directory-swap
         .nest_service(
             "/config.yml",
             ServeDir::new("../static/resources/config.yml"),
@@ -53,11 +54,10 @@ async fn main() {
 
 // TODO Socials
 // - fotos
-// TODO Colors
-// Text slate, and gray should be somehow customised
-// TODO print css and other 404 css linked in base.html
 // TODO go live pipeline
 // TODO after release
+// Remove old web completely
+// Restructure repository
 // - contact
 // - projects page
 // - linktree page
diff --git a/axum_server/src/picture_generator/picture_markup_generator.rs b/axum_server/src/picture_generator/picture_markup_generator.rs
index d6db6e3..a916f66 100644
--- a/axum_server/src/picture_generator/picture_markup_generator.rs
+++ b/axum_server/src/picture_generator/picture_markup_generator.rs
@@ -22,13 +22,24 @@ pub fn generate_picture_markup(
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+
+    if exported_formats.is_empty() {
+        return Ok(formatdoc!(
+            r#"<img
+            src="{orig_img_path}"
+            width="{width}"
+            height="{height}"
+            alt="{alt_text}"
+        >"#
+        ));
+    }
     let path_to_generated = get_generated_file_name(orig_img_path);
 
-    // TODO This should get removed when we move the project structure #move
-    let dev_only_img_path =
+    // TODO This should get removed when we move the project structure #directory-swap
+    let disk_img_path =
         Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
 
-    let orig_img_dimensions = image_dimensions(&dev_only_img_path)?;
+    let orig_img_dimensions = image_dimensions(&disk_img_path)?;
     let resolutions = get_resolutions(orig_img_dimensions, width, height);
 
     let path_to_generated_arc = Arc::new(path_to_generated);
@@ -40,8 +51,8 @@ pub fn generate_picture_markup(
 
     if generate_image {
         rayon::spawn(move || {
-            let orig_img = ImageReader::open(&dev_only_img_path)
-                .with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path))
+            let orig_img = ImageReader::open(&disk_img_path)
+                .with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
                 .unwrap()
                 .decode()
                 .unwrap();
diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css
index 233e779..9525b39 100644
--- a/axum_server/styles/input.css
+++ b/axum_server/styles/input.css
@@ -80,6 +80,10 @@ strong {
   @apply font-medium;
 }
 
+img[height] {
+  height: revert-layer;
+}
+
 .article-body {
   h1 {
     @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
@@ -114,7 +118,7 @@ strong {
   }
 
   table {
-    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base lg:text-xl lg:my-8;
+    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
   }
 
   thead {
diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css
index 44eeb5c..6544d16 100644
--- a/axum_server/styles/output.css
+++ b/axum_server/styles/output.css
@@ -807,10 +807,6 @@ video {
   width: 180px;
 }
 
-.w-full {
-  width: 100%;
-}
-
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -828,6 +824,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.break-inside-avoid {
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
+}
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
@@ -914,6 +915,11 @@ video {
   border-color: rgb(11 39 70 / var(--tw-border-opacity));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@@ -938,11 +944,6 @@ video {
   fill: #0b2746;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .p-0 {
   padding: 0px;
 }
@@ -1083,21 +1084,16 @@ video {
   color: rgb(11 39 70 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-pink-950 {
   --tw-text-opacity: 1;
   color: rgb(80 2 56 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .text-slate-800 {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
@@ -1107,11 +1103,6 @@ video {
   text-decoration-line: none;
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1140,6 +1131,10 @@ strong {
   font-weight: 500;
 }
 
+img[height] {
+  height: revert-layer;
+}
+
 .article-body {
   h1 {
     margin-left: auto;
@@ -1505,7 +1500,7 @@ strong {
   }
   table {
     --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+    border-color: rgb(226 232 240 / var(--tw-border-opacity));
   }
   table {
     font-size: 0.875rem;
@@ -1927,3 +1922,9 @@ strong {
     grid-template-columns: 1fr 2fr;
   }
 }
+
+@media print {
+  .print\:hidden {
+    display: none;
+  }
+}
diff --git a/axum_server/templates/base.html b/axum_server/templates/base.html
index 6d5f51f..98b416e 100644
--- 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" />
diff --git a/axum_server/templates/blog_post.html b/axum_server/templates/blog_post.html
index 4062b98..5000c61 100644
--- 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>
diff --git a/axum_server/templates/blog_post_list.html b/axum_server/templates/blog_post_list.html
index 7dc3104..f6ab23a 100644
--- 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>
diff --git a/axum_server/templates/components/blog_post_preview.html b/axum_server/templates/components/blog_post_preview.html
index c57d6e1..ec86558 100644
--- 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 %}
diff --git a/axum_server/templates/components/project_preview_card.html b/axum_server/templates/components/project_preview_card.html
index 6b3d14a..2db42e1 100644
--- 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 %}
diff --git a/axum_server/templates/components/talent_card.html b/axum_server/templates/components/talent_card.html
index c5d2a70..b779d00 100644
--- 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>
 
diff --git a/axum_server/templates/index.html b/axum_server/templates/index.html
index 6def15b..eb57dfd 100644
--- 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" %}
diff --git a/axum_server/templates/site_header.html b/axum_server/templates/site_header.html
index 109b446..986de7e 100644
--- 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>