resolves #35: Recreate blog title display to be more visible

PetoMPP · Feb 13, 2024 · d43e88d · d43e88d
1 parent 3b66dc5
commit d43e88d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/input.css b/src/input.css
@@ -10,4 +10,12 @@
   .grid-cols-auto-2 {
     grid-template-columns: auto auto;
   }
+
+  .aspect-1-1 {
+    aspect-ratio: 1 / 1;
+  }
+
+  .divider-base-content {
+    @apply before:bg-base-content after:bg-base-content;
+  }
 }
diff --git a/src/pages/blog_post.rs b/src/pages/blog_post.rs
@@ -15,6 +15,7 @@ use crate::{
     pages::page_base::PageBase,
     router::route::Route,
 };
+use chrono::{DateTime, Local};
 use petompp_web_models::models::blog_data::BlogMetaData;
 use yew::{platform::spawn_local, prelude::*};
 use yew_router::prelude::*;
@@ -118,12 +119,23 @@ pub fn blog_post_meta(props: &BlogPostMetaProps) -> Html {
         "" => "/img/placeholder.svg".to_string(),
         img => BlobClient::get_url(format!("image-upload/{}", img).as_str()),
     };
+    let sign = format!(
+        "{} by {}",
+        DateTime::<Local>::from(props.meta.created).format("%Y-%m-%d %H:%M:%S"),
+        "PetoMPP"
+    );
     html! {
-        <div class={"hero mb-4 md:pt-36 pt-16 rounded-lg p-2"} style={format!("background-image: url({}); -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,0.8));", img)}>
-            <div class={"prose text-neutral text-center max-w-md"}>
-                <h1 class={"text-neutral"}>{&props.meta.title}</h1>
-                <p>{&props.meta.summary}</p>
+        <>
+        <div class={"hero mb-4 py-12 lg:py-16 rounded-lg p-2"} style={format!("background-image: url({});", img)}>
+            <div class={"flex p-4 lg:w-1/2 text-base-content font-semibold text-center text-xl lg:text-4xl aspect-1-1 bg-base-100 bg-opacity-60 rounded-full items-center"}>
+                <div>
+                    <div class={"divider divider-base-content w-5/6 mx-auto"} />
+                    <p class={"px-6 lg:px-12"}>{&props.meta.title}</p>
+                    <div class={"divider divider-base-content w-5/6 mx-auto"} />
+                </div>
             </div>
         </div>
+        <p class={"italic text-lg"}>{sign}</p>
+        </>
     }
 }