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
GitHub
@ -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,181 +271,188 @@
|
||||
<tr>
|
||||
<td class="content-cell">
|
||||
<h1>Hi Jon Snow,</h1>
|
||||
|
||||
|
||||
|
||||
<p>Your order has been processed successfully.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Your order has been processed successfully.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<table class="data-wrapper" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table class="data-table" width="100%" cellpadding="0" cellspacing="0">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<table class="data-wrapper" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
width="20%"
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
<p>Item</p>
|
||||
</th>
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
<p>Description</p>
|
||||
</th>
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
width="15%"
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
<p>Price</p>
|
||||
</th>
|
||||
|
||||
<td colspan="2">
|
||||
<table class="data-table" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
width="20%"
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
<p>Item</p>
|
||||
</th>
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
<p>Description</p>
|
||||
</th>
|
||||
|
||||
<th
|
||||
|
||||
|
||||
|
||||
width="15%"
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
<p>Price</p>
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Golang
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Open source programming language that makes it easy to build simple, reliable, and efficient software
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
$10.99
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Hermes
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Programmatically create beautiful e-mails using Golang.
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
$1.99
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Golang
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Open source programming language that makes it easy to build simple, reliable, and efficient software
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
$10.99
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Hermes
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
Programmatically create beautiful e-mails using Golang.
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
|
||||
|
||||
style="text-align:right"
|
||||
|
||||
|
||||
>
|
||||
$1.99
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>You can check the status of your order and more in your dashboard:</p>
|
||||
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<div>
|
||||
<a href="https://hermes-example.com/dashboard" class="button" style="background-color: " target="_blank">Go to Dashboard</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>You can check the status of your order and more in your dashboard:</p>
|
||||
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<div>
|
||||
<a href="https://hermes-example.com/dashboard" class="button" style="background-color: " target="_blank">
|
||||
Go to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Yours truly,
|
||||
<br>
|
||||
<br />
|
||||
Hermes
|
||||
</p>
|
||||
|
||||
|
||||
<table class="body-sub">
|
||||
<tbody><tr>
|
||||
|
||||
<td>
|
||||
<p class="sub">If you’re having trouble with the button 'Go to Dashboard', copy and paste the URL below into your web browser.</p>
|
||||
<p class="sub"><a href="https://hermes-example.com/dashboard">https://hermes-example.com/dashboard</a></p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<table class="body-sub">
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="sub">If you’re having trouble with the button 'Go to Dashboard', copy and paste the URL below into your web browser.</p>
|
||||
<p class="sub"><a href="https://hermes-example.com/dashboard">https://hermes-example.com/dashboard</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user