new blog structure

implementations/Catcrafts-Blog.cpp

@@ -61,10 +61,11 @@ export namespace Catcrafts {
     }
     
     void RenderBlogPost(const std::string_view slug) {
+        std::cout << "render "<< std::endl;
         for(const BlogPost& post : *posts) {
             if(post.slug == slug) {
                 main->SetInnerHTML(std::format(R"(
-<div class="post fade-in">
+<div class="blog-post-page">
     <div class="post-header">
         <h1 class="post-title">{}</h1>
         <span class="post-date">{}</span>

interfaces/Catcrafts-Blog.cppm

@@ -23,7 +23,13 @@ export namespace Catcrafts {
             "Hello World!",
             "hello-world",
             "2025-11-12",
-            R"(Welcome to catcrafts.net!<br><br> This blog will mostly be dedicated to random tidbits i come across while working on my Crafter series of libraries, This website is fully written in C++ using the Crafter.CppDOM library.)"
+            R"(Welcome to catcrafts.net!<br><br>
+            Here we believe optimization is everything and C++ is a gift from god.<br> 
+            This blog will mostly be dedicated to random tidbits i come across while working on my Crafter series of libraries.<br><br>
+            
+            Like this website which is fully written in C++ using the Crafter.CppDOM library.<br>
+            And source available too!<br>
+            <a href="https://forgejo.catcrafts.net/Catcrafts/catcrafts.net">https://forgejo.catcrafts.net/Catcrafts/catcrafts.net<a>)"
         }
     };
     void RenderBlog();

styles/styles.css

@@ -249,6 +249,39 @@ main {
   cursor: pointer;
 }
 
+/* Blog Post Page Styles (Natural Page View) */
+.blog-post-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.blog-post-page .post-header {
+  margin-bottom: 2rem;
+  text-align: center;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.blog-post-page .post-title {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.blog-post-page .post-date {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 25px;
+}
+
+.blog-post-page .post-content {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: var(--text-color);
+  animation: none;
+  opacity: 1;
+}
+
 /* Footer */
 footer {
   background-color: var(--dark-color);