From dd847ce1f9ff7703859ed605092fc1f1850ca51f Mon Sep 17 00:00:00 2001
From: Jorijn van der Graaf <jorijnvdgraaf@catcrafts.net>
Date: Wed, 12 Nov 2025 22:40:33 +0100
Subject: [PATCH] new blog structure

---
 implementations/Catcrafts-Blog.cpp |  3 ++-
 interfaces/Catcrafts-Blog.cppm     |  8 +++++++-
 styles/styles.css                  | 33 ++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/implementations/Catcrafts-Blog.cpp b/implementations/Catcrafts-Blog.cpp
index 7cf52b1..b9f5273 100644
--- a/implementations/Catcrafts-Blog.cpp
+++ b/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>
diff --git a/interfaces/Catcrafts-Blog.cppm b/interfaces/Catcrafts-Blog.cppm
index cd9cb37..88fadd1 100644
--- a/interfaces/Catcrafts-Blog.cppm
+++ b/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();
diff --git a/styles/styles.css b/styles/styles.css
index f859fe6..daf2f14 100644
--- a/styles/styles.css
+++ b/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);