mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-13 05:15:21 +02:00
Marijn
97cec66083
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.
169 lines
5.7 KiB
Twig
169 lines
5.7 KiB
Twig
{% 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 %}
|