specklesystems
/
speckle-email-templates
зеркало из https://github.com/specklesystems/speckle-email-templates.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #2 from specklesystems/fabians/fixing-heading-line-height 

fix: heading line heights now resolve correctly
This commit is contained in:
Gergő Jedlicska 2022-08-18 09:42:19 +02:00 коммит произвёл GitHub
Родитель da8c282087 b363df2f73
Коммит bec7173beb
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
4 изменённых файлов: 48 добавлений и 80 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

14
dist/main_server_template.html поставляемый
Просмотреть файл

@ -91,7 +91,7 @@
</head>
<body style="word-spacing:normal;">
<div style="">
<div style>
<!-- Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);margin:0px auto;border-radius:8px;max-width:600px;">
@ -109,7 +109,7 @@
<tbody>
<tr>
<td style="width:100px;">
<img alt="Speckle" height="auto" src="http://localhost:4040/assets/logo-slab-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="100" />
<img alt="Speckle" height="auto" src="http://localhost:4040/assets/logo-slab-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="100">
</td>
</tr>
</tbody>
@ -140,8 +140,12 @@
<!-- Some example text -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:16px;line-height:20px;text-align:left;color:#000000;">
<div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
<p> Hello, </p>
<h1 style="font-size: 2em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </h1>
<h2 style="font-size: 1.5em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </h2>
<h3 style="font-size: 1.17em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </h3>
<h4 style="font-size: 1em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </p>
<p> Here's a basic <a href="#" alt="link title">link</a>. </p>
</div>
@ -174,7 +178,7 @@
<tbody>
<tr>
<td align="center" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" role="presentation" style="border:none;border-radius:8px;cursor:auto;mso-padding-alt:25px 55px;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);" valign="middle">
<a href="#" rel="notrack" title="CTA Title" style="display:inline-block;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);color:white;font-family:Helvetica;font-size:16px;font-weight:bold;line-height:20px;margin:0;text-decoration:none;text-transform:none;padding:25px 55px;mso-padding-alt:0px;border-radius:8px;" target="_blank"> Call To Action (CTA) </a>
<a href="#" rel="notrack" title="CTA Title" style="display:inline-block;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);color:white;font-family:Helvetica;font-size:16px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:25px 55px;mso-padding-alt:0px;border-radius:8px;" target="_blank"> Call To Action (CTA) </a>
</td>
</tr>
</tbody>
@ -205,7 +209,7 @@
<!-- Some example finishing text -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:16px;line-height:20px;text-align:left;color:#000000;">
<div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
<p> If this was not you, feel free to ignore this email! </p>
</div>
</td>

2
package.json
Просмотреть файл

@ -2,7 +2,7 @@
"name": "speckle-email-templates",
"packageManager": "yarn@3.2.2",
"scripts": {
"serve:assets": "http-server -p 4040",
"serve": "http-server -p 4040",
"build": "mjml ./src/*.mjml -o ./dist/",
"watch": "mjml -w ./src/*.mjml -o ./dist/"
},

43
src/main_server_template.mjml
Просмотреть файл

@ -1,14 +1,31 @@
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Helvetica" font-size="16px" line-height="20px"/>
<mj-all font-family="Helvetica" font-size="16px" />
</mj-attributes>
<mj-style inline="inline">
h1 {
font-size: 2em
}
h2 {
font-size: 1.5em
}
h3 {
font-size: 1.17em
}
h4 {
font-size: 1em
}
</mj-style>
</mj-head>
<mj-body>
<!-- Header -->
<mj-section border-radius="8px" background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" padding="0">
<mj-column>
<mj-image width="100px" src="http://localhost:4040/assets/logo-slab-white.png" alt="Speckle" />
<mj-image width="100px" src="http://localhost:4040/assets/logo-slab-white.png" alt="Speckle" />
</mj-column>
</mj-section>
@ -21,8 +38,24 @@
Hello,
</p>
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
</h2>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
</h3>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor.
</p>
<p>
@ -61,10 +94,10 @@
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="20px" >
<mj-section padding-top="20px">
<mj-column>
<mj-text font-size="12px" line-height="18px" align="center" color="#e0e0e0">
Brought to you by <a href="https://speckle.systems" target="_blank">Speckle</a>, the Open Source Data Platform for 3D Data
Brought to you by <a href="https://speckle.systems" target="_blank">Speckle</a>, the Open Source Data Platform for 3D Data
</mj-text>
</mj-column>
</mj-section>

69
src/password_reset_template.mjml
Просмотреть файл

@ -1,69 +0,0 @@
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Helvetica" font-size="16px" line-height="20px"/>
</mj-attributes>
</mj-head>
<mj-body>
<!-- Header -->
<mj-section border-radius="8px" background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" padding="0">
<mj-column>
<mj-image width="100px" src="http://localhost:4040/assets/logo-slab-white.png" alt="Speckle" />
</mj-column>
</mj-section>
<!-- Body - Start -->
<mj-section>
<mj-column>
<!-- Some example text -->
<mj-text>
<p>
Hello,
</p>
<p>
You have just requested a password reset a few moments ago for your Speckle account. Please click on the button below to complete the process:
</p>
</mj-text>
</mj-column>
</mj-section>
<!-- CTA -->
<mj-section padding="0">
<mj-column>
<mj-button background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" border-radius="8px" color="white" href="#" title="CTA Title" rel="notrack" inner-padding="25px 55px" font-weight="bold">
Reset Your Password
</mj-button>
</mj-column>
</mj-section>
<!-- Body - End -->
<mj-section>
<mj-column>
<!-- Some example finishing text -->
<mj-text>
<p>
The link above is valid for <b>1 hour</b>.
If you didn't request a password reset, feel free to ignore this email - nothing will happen, and your account is secure.
</p>
</mj-text>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section padding-top="0" border-bottom="1px solid #e0e0e0">
<mj-column>
<mj-text font-size="12px" line-height="18px" align="center" color="#999">
Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="20px" >
<mj-column>
<mj-text font-size="12px" line-height="18px" align="center" color="#e0e0e0">
Brought to you by <a href="https://speckle.systems" target="_blank">Speckle</a>, the Open Source Data Platform for 3D Data
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>