huanld/speckle-email-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: huanld:dim/fiddles
Branches Tags
huanld:main huanld:fabians/fixing-heading-line-height huanld:dim/fiddles
...
pull from: huanld:main
Branches Tags
huanld:main huanld:fabians/fixing-heading-line-height huanld:dim/fiddles

4 Commits
dim/fiddles ... main

Author SHA1 Message Date
Gergő Jedlicska bec7173beb Merge pull request #2 from specklesystems/fabians/fixing-heading-line-height 
fix: heading line heights now resolve correctly
 2022-08-18 09:42:19 +02:00
Fabians b363df2f73 more styling fixes 2022-08-18 10:22:56 +03:00
Fabians 3564757678 fix: heading line heights now resolve correctly 2022-08-17 17:20:48 +03:00
Kristaps Fabians Geikins da8c282087 Merge pull request #1 from specklesystems/dim/fiddles 
Minor changes to base template + adds a password reset template
 2022-08-11 10:53:15 +03:00
4 changed files with 48 additions and 80 deletions
Expand all files Collapse all files
dist/main_server_template.html
Vendored
+9 -5
View File
@@ -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>
package.json
+1 -1
View File
@@ -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/"
},
src/main_server_template.mjml
+38 -5
View File
@@ -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>
src/password_reset_template.mjml
-69
View File
@@ -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>