Add sample campaign, restyle email template to brand
Sync campaigns / sync (push) Failing after 18s

campaigns/welcome/ is a sample campaign showing the campaign.md format in
practice. Restyled email-templates/campaign.html to thistleandmoth.org's
actual brand colors and fonts (EB Garamond/Source Serif 4), no images, with
web-safe fallbacks for clients that can't load webfonts.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-23 20:42:08 -04:00
parent 92997db150
commit 6c65fd1379
3 changed files with 46 additions and 18 deletions
+28 -18
View File
@@ -1,14 +1,17 @@
<!--
Listmonk's own stock campaign template (static/email-templates/default.tpl
in knadh/listmonk), committed here verbatim as a known-good, unsubscribe-
capable starting point rather than something invented from scratch. Synced
into listmonk via `campaigns template <name> email-templates/campaign.html`
(see internal/campaign/template.go) as the is_default campaign template, so
every campaign this tool creates gets a real unsubscribe link/footer without
per-campaign template_id wiring. Restyle freely — the two load-bearing tags
are `{{ template "content" . }}` (where the campaign body gets injected) and
`{{ UnsubscribeURL }}` (the actual unsubscribe link); everything else here is
just Listmonk's default look.
in knadh/listmonk), restyled to match thistleandmoth.org's brand colors and
fonts (see thistleandmoth-site/assets/css/main.css) — no images, since this
domain prefers not to ship graphics in email. The Google Fonts <link> lets
clients that support remote webfonts (Apple/iOS Mail, some Android/web
clients) render the real EB Garamond/Source Serif 4 (the site self-hosts
these, but email clients can't reach relative site assets, so this pulls the
same two families from Google Fonts instead); every font-family below still
lists web-safe fallbacks first-class, since most email clients (Outlook,
Gmail's own rendering) strip external fonts entirely and need those to look
right. The two load-bearing tags are `{{ template "content" . }}` (where the
campaign body gets injected) and `{{ UnsubscribeURL }}` (the actual
unsubscribe link); everything else here is just this domain's look.
-->
<!doctype html>
<html>
@@ -17,14 +20,21 @@ just Listmonk's default look.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<base target="_blank">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
background-color: #F0F1F3;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
font-size: 15px;
line-height: 26px;
margin: 0;
color: #444;
color: #241C14;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
color: #1A140D;
}
pre {
@@ -42,7 +52,7 @@ just Listmonk's default look.
}
.wrap {
background-color: #fff;
background-color: #F6F0DF;
padding: 30px;
max-width: 525px;
margin: 0 auto;
@@ -50,7 +60,7 @@ just Listmonk's default look.
}
.button {
background: #0055d4;
background: #1D4F91;
border-radius: 3px;
text-decoration: none !important;
color: #fff !important;
@@ -59,7 +69,7 @@ just Listmonk's default look.
display: inline-block;
}
.button:hover {
background: #111;
background: #163B70;
}
.footer {
@@ -82,10 +92,10 @@ just Listmonk's default look.
}
a {
color: #0055d4;
color: #1D4F91;
}
a:hover {
color: #111;
color: #163B70;
}
@media screen and (max-width: 600px) {
.wrap {
@@ -97,9 +107,9 @@ just Listmonk's default look.
}
</style>
</head>
<body style="background-color: #F0F1F3;font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;font-size: 15px;line-height: 26px;margin: 0;color: #444;">
<body style="background-color: #F0F1F3;font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;font-size: 15px;line-height: 26px;margin: 0;color: #241C14;">
<div class="gutter" style="padding: 30px;">&nbsp;</div>
<div class="wrap" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;border-radius: 5px;">
<div class="wrap" style="background-color: #F6F0DF;padding: 30px;max-width: 525px;margin: 0 auto;border-radius: 5px;">
{{ template "content" . }}
</div>