fix

public/new-styles.css

@@ -554,31 +554,26 @@ video {
   display: none;
 }
 
-.prose {
-  color: #1f2937;
-}
-
-.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: #2563eb;
-}
-
-.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  background-color: #f3f4f6;
-}
-
-.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-left-color: #facc15;
-  font-style: italic;
-}
-
 .static {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .relative {
   position: relative;
 }
 
+.bottom-6 {
+  bottom: 1.5rem;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -701,8 +696,8 @@ video {
   max-width: 56rem;
 }
 
-.max-w-none {
+.max-w-prose {
-  max-width: none;
+  max-width: 65ch;
 }
 
 .max-w-sm {
@@ -747,16 +742,14 @@ video {
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .rounded-2xl {
   border-radius: 1rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -792,6 +785,11 @@ video {
   border-color: rgb(181 205 228 / var(--tw-border-opacity, 1));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
@@ -851,6 +849,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -914,6 +917,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -974,6 +982,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
@@ -1024,6 +1037,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1042,6 +1061,21 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-slate-700\/10 {
+  --tw-shadow-color: rgb(51 65 85 / 0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-gray-900\/5 {
+  --tw-ring-color: rgb(17 24 39 / 0.05);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1065,6 +1099,11 @@ video {
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -1130,8 +1169,43 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .md\:max-w-3xl {
+    max-width: 48rem;
+  }
+
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+}
+
+@media (min-width: 1024px) {
+  .lg\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .lg\:pb-28 {
+    padding-bottom: 7rem;
+  }
+
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
 }

src/app/views/blogs/get.zmpl

@@ -1,8 +1,8 @@
-<div>
+<div class="relative w-full px-6 py-12 bg-white shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
 	<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">
+	<article class="prose lg:prose-xl">
     {{zmpl.fmt.raw(zmpl.ref("blog.content"))}}
-  </div>
+  </article>
 
 	<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">
 		↑

src/main.zig

@@ -7,78 +7,28 @@ const zmd = @import("zmd");
 pub const routes = @import("routes");
 pub const static = @import("static");
 
-// Override default settings in `jetzig.config` here:
 pub const jetzig_options = struct {
-    /// Middleware chain. Add any custom middleware here, or use middleware provided in
+    pub const middleware: []const type = &.{};
-    /// `jetzig.middleware` (e.g. `jetzig.middleware.HtmxMiddleware`).
-    pub const middleware: []const type = &.{
-       //jetzig.middleware.AntiCsrfMiddleware,
-       //@import("app/middleware/BasicMiddleware.zig"),
-       //@import("app/middleware/AuthMiddleware.zig"),
-    };
 
-    // Maximum bytes to allow in request body.
     pub const max_bytes_request_body: usize = std.math.pow(usize, 2, 16);
-
-    // Maximum filesize for `public/` content.
     pub const max_bytes_public_content: usize = std.math.pow(usize, 2, 20);
-
-    // Maximum filesize for `static/` content (applies only to apps using `jetzig.http.StaticRequest`).
     pub const max_bytes_static_content: usize = std.math.pow(usize, 2, 18);
-
-    // Maximum length of a header name. There is no limit imposed by the HTTP specification but
-    // AWS load balancers reference 40 as a limit so we use that as a baseline:
-    // https://docs.aws.amazon.com/elasticloadbalancing/latest/APIReference/API_HttpHeaderConditionConfig.html
-    // This can be increased if needed.
     pub const max_bytes_header_name: u16 = 40;
-
-    /// Maximum number of `multipart/form-data`-encoded fields to accept per request.
     pub const max_multipart_form_fields: usize = 20;
-
-    // Log message buffer size. Log messages exceeding this size spill to heap with degraded
-    // performance. Log messages should aim to fit in the message buffer.
     pub const log_message_buffer_len: usize = 4096;
-
-    // Maximum log pool size. When a log buffer is no longer required it is returned to a pool
-    // for recycling. When logging i/o is slow, a high volume of requests will result in this
-    // pool growing. When the pool size reaches the maximum value defined here, log events are
-    // freed instead of recycled.
     pub const max_log_pool_len: usize = 256;
-
-    // Number of request threads. Defaults to number of detected CPUs.
     pub const thread_count: ?u16 = null;
-
-    // Number of response worker threads.
     pub const worker_count: u16 = 4;
-
-    // Total number of connections managed by worker threads.
     pub const max_connections: u16 = 512;
-
-    // Per-thread stack memory to use before spilling into request arena (possibly with allocations).
     pub const buffer_size: usize = 64 * 1024;
-
-    // The size of each item in the available memory pool used by requests for rendering.
-    // Total retained allocation: `worker_count * max_connections`.
     pub const arena_size: usize = 1024 * 1024;
-
-    // Path relative to cwd() to serve public content from. Symlinks are not followed.
     pub const public_content_path = "public";
-
-    // HTTP buffer. Must be large enough to store all headers. This should typically not be modified.
     pub const http_buffer_size: usize = std.math.pow(usize, 2, 16);
-
-    // The number of worker threads to spawn on startup for processing Jobs (NOT the number of
-    // HTTP server worker threads).
     pub const job_worker_threads: usize = 4;
-
-    // Duration before looking for more Jobs when the queue is found to be empty, in
-    // milliseconds.
     pub const job_worker_sleep_interval_ms: usize = 10;
 
-    /// Database Schema. Set to `@import("Schema")` to load `src/app/database/Schema.zig`.
     pub const Schema = @import("Schema");
 
-    /// HTTP cookie configuration
     pub const cookies: jetzig.http.Cookies.CookieOptions = switch (jetzig.environment) {
         .development, .testing => .{
             .domain = "localhost",
@@ -92,78 +42,17 @@ pub const jetzig_options = struct {
         },
     };
 
-    /// Key-value store options.
-    /// Available backends:
-    /// * memory: Simple, in-memory hashmap-backed store.
-    /// * file: Rudimentary file-backed store.
-    /// * valkey: Valkey-backed store with connection pool.
-    ///
-    /// When using `.file` or `.valkey` backend, you must also set `.file_options` or
-    /// `.valkey_options` respectively.
-    ///
-    /// ## File backend:
-    // .backend = .file,
-    // .file_options = .{
-    //     .path = "/path/to/jetkv-store.db",
-    //     .truncate = false, // Set to `true` to clear the store on each server launch.
-    //     .address_space_size = jetzig.jetkv.JetKV.FileBackend.addressSpace(4096),
-    // },
-    //
-    // ## Valkey backend
-    // .backend = .valkey,
-    // .valkey_options = .{
-    //     .host = "localhost",
-    //     .port = 6379,
-    //     .timeout = 1000, // in milliseconds, i.e. 1 second.
-    //     .connect = .lazy, // Connect on first use, or `auto` to connect on server startup.
-    //     .buffer_size = 8192,
-    //     .pool_size = 8,
-    // },
-    /// Available configuration options for `store`, `job_queue`, and `cache` are identical.
-    ///
-    /// For production deployment, the `valkey` backend is recommended for all use cases.
-    ///
-    /// The general-purpose key-value store is exposed as `request.store` in views and is also
-    /// available in as `env.store` in all jobs/mailers.
     pub const store: jetzig.kv.Store.Options = .{
         .backend = .memory,
     };
-
-    /// Job queue options. Identical to `store` options, but allows using different
-    /// backends (e.g. `.memory` for key-value store, `.file` for jobs queue.
-    /// The job queue is managed internally by Jetzig.
     pub const job_queue: jetzig.kv.Store.Options = .{
         .backend = .memory,
     };
-
-    /// Cache options. Identical to `store` options, but allows using different
-    /// backends (e.g. `.memory` for key-value store, `.file` for cache.
     pub const cache: jetzig.kv.Store.Options = .{
         .backend = .memory,
     };
-
-    /// SMTP configuration for Jetzig Mail. It is recommended to use a local SMTP relay,
-    /// e.g.: https://github.com/juanluisbaptiste/docker-postfix
-    ///
-    /// Each configuration option can be overridden with environment variables:
-    /// `JETZIG_SMTP_PORT`
-    /// `JETZIG_SMTP_ENCRYPTION`
-    /// `JETZIG_SMTP_HOST`
-    /// `JETZIG_SMTP_USERNAME`
-    /// `JETZIG_SMTP_PASSWORD`
-    // pub const smtp: jetzig.mail.SMTPConfig = .{
-    //     .port = 25,
-    //     .encryption = .none, // .insecure, .none, .tls, .start_tls
-    //     .host = "localhost",
-    //     .username = null,
-    //     .password = null,
-    // };
-
-    /// Force email delivery in development mode (instead of printing email body to logger).
     pub const force_development_email_delivery = false;
 
-    // Set custom fragments for rendering markdown templates. Any values will fall back to
-    // defaults provided by Zmd (https://github.com/jetzig-framework/zmd/blob/main/src/zmd/html.zig).
     pub const markdown_fragments = struct {
         pub const root = .{
             "<div class='p-5'>",

src/tailwind.css

@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@plugin "@tailwindcss/typography";
+@config "../tailwind.config.js";
 
 /* Base typography improvements */
 @layer base {
@@ -9,10 +11,6 @@
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
 
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-semibold text-gray-900;
-  }
-
   a {
     @apply text-blue-600 hover:underline transition;
   }

tailwind.config.js

@@ -34,7 +34,7 @@ module.exports = {
 			},
 			fontFamily: {
 				sans: ['"Segoe UI"', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif'],
-			}
+			},
-		}
+		},
 	}
 };