yuzucchii/yuzucchii.xyz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new styles v2

Browse Source
This commit is contained in:
yuzu 2025-05-08 22:40:57 -05:00
parent de9aa6abf9
commit 54b2525029
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/views/blogs.zig
View File

@ -16,7 +16,7 @@ pub const Fragments = struct {
} }
pub fn block(allocator: std.mem.Allocator, node: Node) ![]const u8 { 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| return if (node.meta) |meta|
std.fmt.allocPrint(allocator, std.fmt.allocPrint(allocator,
@ -30,29 +30,29 @@ pub const Fragments = struct {
pub fn link(allocator: std.mem.Allocator, node: Node) ![]const u8 { pub fn link(allocator: std.mem.Allocator, node: Node) ![]const u8 {
return std.fmt.allocPrint(allocator, 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.? }); , .{ node.href.?, node.title.? });
} }
pub fn image(allocator: std.mem.Allocator, node: Node) ![]const u8 { pub fn image(allocator: std.mem.Allocator, node: Node) ![]const u8 {
return std.fmt.allocPrint(allocator, 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.? }); , .{ node.href.?, node.title.? });
} }
pub const h1 = .{ "<h1>", "</h1>\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>", "</h2>\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>", "</h3>\n" }; pub const h3 = .{ "<h3 style=\"font-family: 'Segoe UI', sans-serif; color: #555; padding-bottom: 6px;\">", "</h3>\n" };
pub const h4 = .{ "<h4>", "</h4>\n" }; pub const h4 = .{ "<h4 style=\"font-family: 'Segoe UI', sans-serif; color: #666; padding-bottom: 4px;\">", "</h4>\n" };
pub const h5 = .{ "<h5>", "</h5>\n" }; pub const h5 = .{ "<h5 style=\"font-family: 'Segoe UI', sans-serif; color: #777; padding-bottom: 2px;\">", "</h5>\n" };
pub const h6 = .{ "<h6>", "</h6>\n" }; pub const h6 = .{ "<h6 style=\"font-family: 'Segoe UI', sans-serif; color: #888; padding-bottom: 2px;\">", "</h6>\n" };
pub const bold = .{ "<b>", "</b>" }; pub const bold = .{ "<b style=\"font-weight: 600;\">", "</b>" };
pub const italic = .{ "<i>", "</i>" }; pub const italic = .{ "<i style=\"font-style: italic;\">", "</i>" };
pub const unordered_list = .{ "<ul>", "</ul>" }; pub const unordered_list = .{ "<ul style=\"list-style-type: disc; margin-left: 20px;\">", "</ul>" };
pub const ordered_list = .{ "<ol>", "</ol>" }; pub const ordered_list = .{ "<ol style=\"list-style-type: decimal; margin-left: 20px;\">", "</ol>" };
pub const list_item = .{ "<li>", "</li>" }; pub const list_item = .{ "<li style=\"margin-bottom: 5px;\">", "</li>" };
pub const code = .{ "<span style=\"font-family: Monospace\">", "</span>" }; pub const code = .{ "<span style=\"font-family: Monospace; background: #f4f4f4; padding: 2px 5px; border-radius: 4px;\">", "</span>" };
pub const paragraph = .{ "\n<p>", "</p>\n" }; pub const paragraph = .{ "\n<p style=\"line-height: 1.6; font-size: 1.1rem; color: #333;\">", "</p>\n" };
pub const default = .{ "", "" }; pub const default = .{ "", "" };
}; };

11
src/app/views/blogs/get.zmpl
View File

@ -1,6 +1,15 @@
<div> <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"> <div class="prose prose-slate max-w-none mt-6 dark:prose-dark">
{{zmpl.fmt.raw(zmpl.ref("blog.content"))}} {{zmpl.fmt.raw(zmpl.ref("blog.content"))}}
</div> </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> </div>