feat: free content with markdown + new flat theme + minor fixes (#9)

* feat: possibility to use markdown as content of email + use pretty table when generating fallback plain text e-mails
* feat: new flat theme
* fix: add a break word policy in actions troubleshooting section, in order to have a better responsive display when using really long Link URL on action
* feat: better layout of dt and dl in HTML template
* feat: pretty tables in plain text
This commit is contained in:
Mathieu Cornic
2017-05-31 20:36:16 +02:00
committed by GitHub
parent 6bf6103ca6
commit be1f57b7ab
32 changed files with 3533 additions and 441 deletions

View File

@ -105,6 +105,10 @@
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EDEFF2;
table-layout: fixed;
}
.body-sub a {
word-break: break-all;
}
.content-cell {
padding: 35px;
@ -131,6 +135,28 @@
font-size: 14px;
font-weight: bold;
}
blockquote {
margin: 1.7rem 0;
padding-left: 0.85rem;
border-left: 10px solid #F0F2F4;
}
blockquote p {
font-size: 1.1rem;
color: #999;
}
blockquote cite {
display: block;
text-align: right;
color: #666;
font-size: 1.2rem;
}
cite {
display: block;
font-size: 0.925rem;
}
cite:before {
content: "\2014 \0020";
}
p {
margin-top: 0;
color: #74787E;
@ -143,6 +169,29 @@
p.center {
text-align: center;
}
table {
width: 100%;
}
th {
padding: 0px 5px;
padding-bottom: 8px;
border-bottom: 1px solid #EDEFF2;
}
th p {
margin: 0;
color: #9BA2AB;
font-size: 12px;
}
td {
padding: 10px 5px;
color: #74787E;
font-size: 15px;
line-height: 18px;
}
.content {
align: center;
padding: 0;
}
.data-wrapper {
width: 100%;
@ -201,7 +250,7 @@
<body dir="ltr">
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<td class="content">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
<tr>
@ -213,6 +262,7 @@
</a>
</td>
</tr>
<tr>
<td class="email-body" width="100%">
@ -221,83 +271,90 @@
<tr>
<td class="content-cell">
<h1>Hi Jon Snow,</h1>
<p>Welcome to Hermes! We&#39;re very excited to have you on board.</p>
<p>Welcome to Hermes! We&#39;re very excited to have you on board.</p>
<dl class="body-dictionary">
<dt>Firstname:</dt>
<dd>Jon</dd>
<dt>Lastname:</dt>
<dd>Snow</dd>
<dt>Birthday:</dt>
<dd>01/01/283</dd>
</dl>
<dl class="body-dictionary">
<dt>Firstname:</dt>
<dd>Jon</dd>
<dt>Lastname:</dt>
<dd>Snow</dd>
<dt>Birthday:</dt>
<dd>01/01/283</dd>
</dl>
<p>To get started with Hermes, please click here:</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #22BC66" target="_blank">Confirm your account</a>
</div>
</td>
</tr>
</table>
<p>To get started with Hermes, please click here:</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: " target="_blank">
Confirm your account
</a>
</div>
</td>
</tr>
</table>
<p>Need help, or have questions? Just reply to this email, we&#39;d love to help.</p>
<p>Need help, or have questions? Just reply to this email, we&#39;d love to help.</p>
<p>
Yours truly,
<br>
<br />
Hermes
</p>
<table class="body-sub">
<tbody><tr>
<td>
<p class="sub">If youre having trouble with the button 'Confirm your account', copy and paste the URL below into your web browser.</p>
<p class="sub"><a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010</a></p>
</td>
</tr>
</tbody>
</table>
<table class="body-sub">
<tbody>
<tr>
<td>
<p class="sub">If youre having trouble with the button &#39;Confirm your account&#39;, copy and paste the URL below into your web browser.</p>
<p class="sub"><a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>