claudeandClaude Opus 5.5
a74d580b0a
Catppuccin Mocha campaign template (default) and archive variant, kept in sync in the database; system e-mail header/footer overridden via --static-dir from a ConfigMap. PNG logo for mail clients. Tested in Mailpit (desktop, phone width; 87% CSS support, rest inlined). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
2.6 KiB
Django/Jinja
54 lines
2.6 KiB
Django/Jinja
#jinja2:variable_start_string:'[[', variable_end_string:']]', block_start_string:'[%', block_end_string:'%]'
|
|
{{ define "header" }}
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta name="supported-color-schemes" content="dark">
|
|
<base target="_blank">
|
|
<!-- eom.dev system e-mails (opt-in, password reset, ...). Managed by ansible-role-listmonk. -->
|
|
<style>
|
|
body { margin: 0; padding: 0; background: #181825; color: #cdd6f4; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; }
|
|
.wrap { max-width: 600px; margin: 0 auto; background: #1e1e2e; border: 1px solid #3c3d56; border-radius: 20px; padding: 24px 36px 20px; color: #cdd6f4; }
|
|
.header { border-bottom: 1px solid #3c3d56; padding-bottom: 20px; margin-bottom: 24px; }
|
|
.header img { display: block; border: 0; width: 240px; height: 72px; }
|
|
.gutter { padding: 16px; }
|
|
h1, h2, h3 { color: #cdd6f4; line-height: 1.3; }
|
|
h2 { font-size: 21px; font-weight: 750; margin: 0 0 12px; }
|
|
p { margin: 0 0 16px; }
|
|
a { color: #cba6f7; }
|
|
ul { padding-left: 22px; }
|
|
table td { color: #cdd6f4; border-bottom: 1px solid #3c3d56; padding: 6px 4px; }
|
|
.button { display: inline-block; background: #cba6f7; color: #11111b !important; text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 10px; }
|
|
.footer { text-align: center; font-size: 13px; color: #7f849c; }
|
|
.footer a { color: #a6adc8; }
|
|
img { max-width: 100%; }
|
|
@media screen and (max-width: 620px) {
|
|
.wrap { border-radius: 0; border-left: 0; border-right: 0; padding: 20px; }
|
|
.gutter { padding: 6px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:#181825;" bgcolor="#181825">
|
|
<div class="gutter"> </div>
|
|
<div class="wrap" style="background:#1e1e2e;border:1px solid #3c3d56;border-radius:20px;color:#cdd6f4;">
|
|
<div class="header">
|
|
<a href="[[ listmonk_email_home_url ]]"><img src="[[ listmonk_email_logo_url ]]" width="240" height="72" alt="eom.dev"></a>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ define "footer" }}
|
|
</div>
|
|
<div class="footer">
|
|
<p><a href="[[ listmonk_email_home_url ]]">eom.dev</a> · <a href="[[ listmonk_email_members_url ]]">Membership</a></p>
|
|
[% if listmonk_email_postal_address | length > 0 %]
|
|
<p>[[ listmonk_email_postal_address | e ]]</p>
|
|
[% endif %]
|
|
</div>
|
|
<div class="gutter"> </div>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|