dark mode

implementations/Catcrafts-Blog.cpp

@@ -34,7 +34,7 @@ export namespace Catcrafts {
                 }
             }
             html += std::format(R"(
-<div class="post fade-in">
+<div class="post fade-in" id="blog-post-{}">
     <div class="post-header">
         <h2 class="post-title"><a>{}</a></h2>
         <span class="post-date">{}</span>
@@ -43,18 +43,20 @@ export namespace Catcrafts {
         {}
     </div>
     <div class="post-footer">
-        <a id="blog-button-{}" class="btn">Read Full Post</a>
+        <a class="btn">Read Full Post</a>
     </div>
-</div>)", post.name, post.date, previewContent, post.slug);
+</div>)", post.slug, post.name, post.date, previewContent);
         }
         main->SetInnerHTML(html);
 
         for(const BlogPost& post : *posts) {
-            HtmlElementView& view = blogButtons->emplace_back(std::format("blog-button-{}", post.slug));
+            // Add click listener to the entire post card
-            view.AddClickListener([slug = post.slug](Crafter::MouseEvent e) {
+            HtmlElementView& cardView = blogButtons->emplace_back(std::format("blog-post-{}", post.slug));
+            cardView.AddClickListener([slug = post.slug](Crafter::MouseEvent e) {
                 PushState("{}", "", std::format("/blog/{}", slug));
                 RenderRoot(std::format("/blog/{}", slug));
             });
+
         }
     }
     

styles/styles.css

@@ -166,6 +166,9 @@ main {
   opacity: 0;
   transform: translateY(20px);
   animation-fill-mode: forwards;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
 }
 
 .post:nth-child(1) { animation-delay: 0.1s; }
@@ -241,6 +244,11 @@ main {
   margin-bottom: 0.5rem;
 }
 
+/* Make entire blog post card clickable */
+.post:hover {
+  cursor: pointer;
+}
+
 /* Footer */
 footer {
   background-color: var(--dark-color);