diff --git a/src/routes/admin/emails.tsx b/src/routes/admin/emails.tsx
index 9e9496f..6dca08e 100644
--- a/src/routes/admin/emails.tsx
+++ b/src/routes/admin/emails.tsx
@@ -18,6 +18,7 @@ import { processEmailContent } from "../../infrastructure/html-processor";
import { formatBytes } from "../../domain/format";
import { EmailAddress } from "../../domain/value-objects/email-address";
import { emailsPageScript } from "../../scripts/generated/emails-page";
+import emailPreviewCss from "../../styles/email-preview.css";
type AppEnv = { Bindings: Env };
@@ -476,7 +477,7 @@ emailsRouter.get("/emails/:emailKey", async (c) => {
emailData.attachments,
baseUrl(env),
);
- const htmlContent = `${renderedBody}`;
+ const htmlContent = `${renderedBody}`;
const encodedHtmlContent = (() => {
const encoder = new TextEncoder();
diff --git a/src/routes/entries.ts b/src/routes/entries.ts
index 384e906..a137452 100644
--- a/src/routes/entries.ts
+++ b/src/routes/entries.ts
@@ -6,6 +6,7 @@ import { formatBytes } from "../domain/format";
import { FeedRepository } from "../infrastructure/feed-repository";
import { FeedId } from "../domain/value-objects/feed-id";
import { isExpired } from "../domain/feed";
+import entryCss from "../styles/entry.css";
export async function handle(c: Context<{ Bindings: Env }>): Promise {
const feedId = c.req.param("feedId");
@@ -80,49 +81,7 @@ export async function handle(c: Context<{ Bindings: Env }>): Promise {
${emailData.subject}
diff --git a/src/styles/email-preview.css b/src/styles/email-preview.css
new file mode 100644
index 0000000..757e3bc
--- /dev/null
+++ b/src/styles/email-preview.css
@@ -0,0 +1,26 @@
+body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
+ "Helvetica Neue", Arial, sans-serif;
+ line-height: 1.5;
+ padding: 16px;
+ margin: 0;
+ color: #333;
+ box-sizing: border-box;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+a {
+ color: #0070f3;
+}
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #1c1c1e;
+ color: #ffffff;
+ }
+ a {
+ color: #0a84ff;
+ }
+}
diff --git a/src/styles/entry.css b/src/styles/entry.css
new file mode 100644
index 0000000..4eb71a3
--- /dev/null
+++ b/src/styles/entry.css
@@ -0,0 +1,43 @@
+body {
+ font-family: sans-serif;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1rem;
+}
+.meta {
+ color: #666;
+ font-size: 0.875rem;
+ margin-bottom: 1.5rem;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 0.75rem;
+}
+.meta dt {
+ display: inline;
+ font-weight: bold;
+}
+.meta dd {
+ display: inline;
+ margin: 0 1rem 0 0.25rem;
+}
+.attachments {
+ margin-top: 2rem;
+ border-top: 1px solid #eee;
+ padding-top: 1rem;
+}
+.attachments h2 {
+ font-size: 1rem;
+ margin: 0 0 0.5rem;
+}
+.attachments ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.attachments li {
+ margin: 0.25rem 0;
+}
+.attachments .size {
+ color: #666;
+ font-size: 0.875rem;
+ margin-left: 0.5rem;
+}