mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-13 05:15:21 +02:00
Add Inky-based, WIDM-styled email templates (#212)
Adds twig/inky-extra and twig/cssinliner-extra to build the password reset and email confirmation emails from a shared responsive layout, styled after the quiz's green/black look, with Dutch copy in the show's dramatic tone.
This commit is contained in:
GitHub
@@ -0,0 +1,168 @@
|
||||
{% apply inline_css %}
|
||||
{% apply inky_to_html %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Tijd voor de test{% endblock %}</title>
|
||||
<style>
|
||||
body, table, td { font-family: Arial, Helvetica, sans-serif; }
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
background-color: #f2f4f1;
|
||||
color: #22281f;
|
||||
}
|
||||
table { border-collapse: collapse; }
|
||||
img { border: 0; }
|
||||
a { color: #2d7a1f; }
|
||||
|
||||
.body-table { width: 100%; background-color: #f2f4f1; }
|
||||
|
||||
.container { width: 100%; max-width: 580px; }
|
||||
|
||||
.header > tbody > tr > th { padding: 28px 24px 20px 24px; text-align: center; }
|
||||
|
||||
.brand-table { margin: 0 auto; }
|
||||
.square-cell { width: 18px; }
|
||||
.square {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
max-width: 18px;
|
||||
min-width: 18px;
|
||||
max-height: 18px;
|
||||
min-height: 18px;
|
||||
font-size: 0;
|
||||
line-height: 1px;
|
||||
border-radius: 4px;
|
||||
background-color: #6abf4b;
|
||||
}
|
||||
.square-gap { width: 10px; font-size: 0; line-height: 1px; }
|
||||
.brand {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
color: #17321a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-wrapper { background-color: #f2f4f1; }
|
||||
.content-wrapper > tbody > tr > th { padding: 24px 28px; }
|
||||
|
||||
.card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e1e6dd;
|
||||
}
|
||||
.card td.card-inner { padding: 32px; }
|
||||
|
||||
h1.heading {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 21px;
|
||||
line-height: 1.3;
|
||||
color: #17321a;
|
||||
}
|
||||
|
||||
p.text {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #3a4239;
|
||||
}
|
||||
p.text:last-child { margin-bottom: 0; }
|
||||
|
||||
.button { margin: 8px auto 12px auto; width: auto !important; }
|
||||
.button table { width: auto; margin: 0 auto; }
|
||||
.button td { border-radius: 5px; background: #2d7a1f; }
|
||||
.button a {
|
||||
background: #2d7a1f;
|
||||
color: #ffffff !important;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
padding: 12px 26px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2d7a1f;
|
||||
}
|
||||
|
||||
.h-line th { border-bottom: 1px solid #e1e6dd; height: 1px; font-size: 0; line-height: 0; }
|
||||
|
||||
.footer > tbody > tr > th { padding: 24px 28px 32px 28px; text-align: center; }
|
||||
.footer p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #8b9186;
|
||||
}
|
||||
|
||||
.preheader {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
color: transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
font-size: 1px;
|
||||
line-height: 1px;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="preheader">{% block preheader %}{% endblock %}</span>
|
||||
<table class="body-table" role="presentation">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<container>
|
||||
<row class="header">
|
||||
<columns small="12" large="12" no-expander="true">
|
||||
<table class="brand-table" role="presentation" align="center">
|
||||
<tr>
|
||||
<td class="square-cell" valign="middle">
|
||||
<table role="presentation" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px;">
|
||||
<tr style="height: 18px !important;">
|
||||
<td class="square" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px; max-height: 18px; min-height: 18px;"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="square-gap"> </td>
|
||||
<td class="brand" valign="middle">Tijd voor de test</td>
|
||||
</tr>
|
||||
</table>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<row class="content-wrapper">
|
||||
<columns small="12" large="12" class="content" no-expander="true">
|
||||
<table class="card" role="presentation" width="100%">
|
||||
<tr>
|
||||
<td class="card-inner">
|
||||
<h1 class="heading">{% block heading %}{% endblock %}</h1>
|
||||
{% block body %}{% endblock %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<row class="footer">
|
||||
<columns small="12" large="12" no-expander="true">
|
||||
<h-line></h-line>
|
||||
<spacer size="16"></spacer>
|
||||
{% block footer_extra %}{% endblock %}
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
{% endapply %}
|
||||
{% endapply %}
|
||||
Reference in New Issue
Block a user