blog post default thumbnail

axum_server/styles/output.css

@@ -705,6 +705,14 @@ video {
   height: 1.75rem;
 }
 
+.h-\[220px\] {
+  height: 220px;
+}
+
+.h-\[240px\] {
+  height: 240px;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -725,6 +733,10 @@ video {
   width: 100%;
 }
 
+.w-\[180px\] {
+  width: 180px;
+}
+
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -737,6 +749,16 @@ video {
   flex-grow: 1;
 }
 
+.-translate-y-1 {
+  --tw-translate-y: -0.25rem;
+  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));
+}
+
+.-translate-y-1\.5 {
+  --tw-translate-y: -0.375rem;
+  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));
+}
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
@@ -761,6 +783,10 @@ video {
   place-content: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .content-end {
   align-content: flex-end;
 }
@@ -789,10 +815,20 @@ video {
   gap: 1rem;
 }
 
+.self-center {
+  align-self: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -805,6 +841,18 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -813,6 +861,10 @@ video {
   border-width: 2px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
@@ -848,6 +900,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .fill-blue-950 {
   fill: #172554;
 }
@@ -939,6 +996,16 @@ video {
   line-height: 1.75rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
+.text-8xl {
+  font-size: 6rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1007,6 +1074,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -1502,6 +1574,10 @@ a {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-rows-\[masonry\] {
+    grid-template-rows: masonry;
+  }
+
   .md\:items-stretch {
     align-items: stretch;
   }

axum_server/templates/components/blog_post_default_thumbnail.html

@@ -0,0 +1,3 @@
+<div class="rounded-2xl w-[180px] h-[240px] bg-blue-100 border-4 border-blue-500 flex justify-center items-center">
+  <span class="text-blue-500 text-8xl -translate-y-1.5">{{post.metadata.title|fmt("{:.1}")|lower}}</span>
+</div> 

axum_server/templates/components/blog_post_preview.html

@@ -1,15 +1,17 @@
 <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">
+	<aside class="row-span-3 self-center">
 		{% 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_or("".to_string())|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
-		<div> TODO default obrazok </div>
+		<div> 
+			{% include "components/blog_post_default_thumbnail.html" %}
+		</div>
 		{% endmatch %}
 	</aside>
 	<header>
 		<h3 class="text-lg font-bold mb-1 md:text-3xl">
-		  <a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
+		  <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>

axum_server/templates/components/terminal.svg

@@ -0,0 +1,32 @@
+<svg
+  width="200"
+  height="150"
+  viewBox="0 0 200 150"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="none"
+  stroke-width="0"
+>
+  <!-- Background of the terminal window -->
+  <rect x="10" y="10" width="180" height="130" rx="8" ry="8" fill="#F5F5F5" />
+
+  <!-- Close, Minimize, Maximize buttons (moved to the right side) -->
+  <circle cx="155" cy="25" r="5" fill="#FF5F56" />
+  <circle cx="175" cy="25" r="5" fill="#FFBD2E" />
+  <circle cx="195" cy="25" r="5" fill="#27C93F" />
+
+  <!-- Terminal Text (Example commands, updated to dark color for light theme) -->
+  <text x="20" y="55" font-family="monospace" font-size="12" fill="#333333">
+    $ ls -l
+  </text>
+  <text x="20" y="75" font-family="monospace" font-size="12" fill="#333333">
+    Desktop Documents Downloads
+  </text>
+  <text x="20" y="95" font-family="monospace" font-size="12" fill="#333333">
+    Music Pictures Videos
+  </text>
+  <text x="20" y="115" font-family="monospace" font-size="12" fill="#333333">
+    $
+  </text>
+</svg>
+

axum_server/templates/sections/showcase.html

@@ -1,6 +1,6 @@
 <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
 
-<ul class="mx-5 md:grid md:grid-cols-2 md:justify-stretch md:items-stretch xl:grid-cols-3">
+<ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
  {% for project in featured_projects %}
   <li class="my-2">
     {% include "components/project_preview_card.html" %}