From 54b2525029fc84f9c562bc9132b72dcedc6eef20 Mon Sep 17 00:00:00 2001
From: yuzu <yuzucchii@outlook.com>
Date: Thu, 8 May 2025 22:40:57 -0500
Subject: [PATCH] new styles v2

---
 src/app/views/blogs.zig      | 32 ++++++++++++++++----------------
 src/app/views/blogs/get.zmpl | 11 ++++++++++-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/app/views/blogs.zig b/src/app/views/blogs.zig
index 57a32ad..4d260a4 100644
--- a/src/app/views/blogs.zig
+++ b/src/app/views/blogs.zig
@@ -16,7 +16,7 @@ pub const Fragments = struct {
     }
 
     pub fn block(allocator: std.mem.Allocator, node: Node) ![]const u8 {
-        const style = "font-family: Monospace;";
+        const style = "font-family: Monospace; background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);";
 
         return if (node.meta) |meta|
             std.fmt.allocPrint(allocator,
@@ -30,29 +30,29 @@ pub const Fragments = struct {
 
     pub fn link(allocator: std.mem.Allocator, node: Node) ![]const u8 {
         return std.fmt.allocPrint(allocator,
-            \\<a href="{s}">{s}</a>
+            \\<a href="{s}" style="color: #1a73e8; text-decoration: none; font-weight: bold; transition: color 0.3s ease;">{s}</a>
         , .{ node.href.?, node.title.? });
     }
 
     pub fn image(allocator: std.mem.Allocator, node: Node) ![]const u8 {
         return std.fmt.allocPrint(allocator,
-            \\<img src="{s}" title="{s}" />
+            \\<img src="{s}" title="{s}" style="border: 4px solid #ccc; border-radius: 8px; max-width: 100%; height: auto;" />
         , .{ node.href.?, node.title.? });
     }
 
-    pub const h1 = .{ "<h1>", "</h1>\n" };
-    pub const h2 = .{ "<h2>", "</h2>\n" };
-    pub const h3 = .{ "<h3>", "</h3>\n" };
-    pub const h4 = .{ "<h4>", "</h4>\n" };
-    pub const h5 = .{ "<h5>", "</h5>\n" };
-    pub const h6 = .{ "<h6>", "</h6>\n" };
-    pub const bold = .{ "<b>", "</b>" };
-    pub const italic = .{ "<i>", "</i>" };
-    pub const unordered_list = .{ "<ul>", "</ul>" };
-    pub const ordered_list = .{ "<ol>", "</ol>" };
-    pub const list_item = .{ "<li>", "</li>" };
-    pub const code = .{ "<span style=\"font-family: Monospace\">", "</span>" };
-    pub const paragraph = .{ "\n<p>", "</p>\n" };
+    pub const h1 = .{ "<h1 style=\"font-family: 'Segoe UI', sans-serif; color: #333; border-bottom: 2px solid #ccc; padding-bottom: 10px;\">", "</h1>\n" };
+    pub const h2 = .{ "<h2 style=\"font-family: 'Segoe UI', sans-serif; color: #444; border-bottom: 1px solid #ddd; padding-bottom: 8px;\">", "</h2>\n" };
+    pub const h3 = .{ "<h3 style=\"font-family: 'Segoe UI', sans-serif; color: #555; padding-bottom: 6px;\">", "</h3>\n" };
+    pub const h4 = .{ "<h4 style=\"font-family: 'Segoe UI', sans-serif; color: #666; padding-bottom: 4px;\">", "</h4>\n" };
+    pub const h5 = .{ "<h5 style=\"font-family: 'Segoe UI', sans-serif; color: #777; padding-bottom: 2px;\">", "</h5>\n" };
+    pub const h6 = .{ "<h6 style=\"font-family: 'Segoe UI', sans-serif; color: #888; padding-bottom: 2px;\">", "</h6>\n" };
+    pub const bold = .{ "<b style=\"font-weight: 600;\">", "</b>" };
+    pub const italic = .{ "<i style=\"font-style: italic;\">", "</i>" };
+    pub const unordered_list = .{ "<ul style=\"list-style-type: disc; margin-left: 20px;\">", "</ul>" };
+    pub const ordered_list = .{ "<ol style=\"list-style-type: decimal; margin-left: 20px;\">", "</ol>" };
+    pub const list_item = .{ "<li style=\"margin-bottom: 5px;\">", "</li>" };
+    pub const code = .{ "<span style=\"font-family: Monospace; background: #f4f4f4; padding: 2px 5px; border-radius: 4px;\">", "</span>" };
+    pub const paragraph = .{ "\n<p style=\"line-height: 1.6; font-size: 1.1rem; color: #333;\">", "</p>\n" };
     pub const default = .{ "", "" };
 };
 
diff --git a/src/app/views/blogs/get.zmpl b/src/app/views/blogs/get.zmpl
index 0902091..2f6a517 100644
--- a/src/app/views/blogs/get.zmpl
+++ b/src/app/views/blogs/get.zmpl
@@ -1,6 +1,15 @@
 <div>
-  <h1>{{.blog.title}}</h1>
+	<h1 class="text-4xl font-bold text-gray-900 dark:text-white mt-6 mb-4" style="text-shadow: 1px 1px 5px rgba(0,0,0,0.1);">{{.blog.title}}</h1>
   <div class="prose prose-slate max-w-none mt-6 dark:prose-dark">
     {{zmpl.fmt.raw(zmpl.ref("blog.content"))}}
   </div>
+
+	<button class="fixed bottom-6 right-6 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600" id="back-to-top">
+		↑
+	</button>
+
+	<script>
+		document.getElementById('back-to-top').addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+	</script>
+
 </div>