mshillam
/
responsive-html-email-signature
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Template nr.2, have base64 encoding for img[src] as an option

This commit is contained in:
Dan Mindru 2015-10-19 17:26:13 +02:00
parent dbf59ce136
commit aa00e763e8
25 changed files with 248 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -2,8 +2,11 @@
Responsive templates for email signatures. Responsive templates for email signatures.
**Disclaimer**: super basic layout. **Disclaimer**: super basic layout.
## What does it do (checklist)
## Get started ## Get started
## Preview ## Preview
@todo @todo
Here's an example of what's inside: Here's an example of what's inside:
@ -24,3 +27,6 @@ fix inline-css issue, preprocessor support (simpler BEM)?
### Thunderbird ### Thunderbird
There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails. There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails.
### Apple mail

25
dist/fadeit/full-mail-fadeit.html vendored Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="main__welcome" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; padding: 10px 30px 0 30px;"><b>Hi there,</b></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="main__content" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px 30px 0 30px;">Thanks for writing up this email.<br>We are delighted to reply with a responsive template.</td></tr><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px; line-height: 20px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31, DK-8381 Tilst, Aarhus</td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="align: right; color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img src="http://fadeit.dk/src/assets/img/brand/fadeit-logo.png" alt="fadeit logo" class="footer__main__col2__td__img" style="border: 0; height: auto; max-height: 38px; max-width: 100%; padding-left: 10px; padding-top: 6px;"></a></td></table></tr></table></td></tr></table></body></html>

28
dist/fadeit/full-mail-sample.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__welcome" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; padding: 10px 30px 0 30px;"><b>Hi there,</b></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__content" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px 30px 0 30px;">Thanks for writing up this email.<br>We are delighted to reply with a responsive template.</td></tr><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31, DK-8381 Tilst, Aarhus</td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

25
dist/fadeit/signature-fadeit.html vendored Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px; line-height: 20px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31, DK-8381 Tilst, Aarhus</td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="align: right; color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img src="http://fadeit.dk/src/assets/img/brand/fadeit-logo.png" alt="fadeit logo" class="footer__main__col2__td__img" style="border: 0; height: auto; max-height: 38px; max-width: 100%; padding-left: 10px; padding-top: 6px;"></a></td></table></tr></table></td></tr></table></body></html>

25
dist/fadeit/signature-reply-fadeit.html vendored Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px; line-height: 20px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr></table></td></tr></table></body></html>

28
dist/fadeit/signature-reply-sample.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr></table></td></tr></table></body></html>

28
dist/fadeit/signature-sample.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>Jane Whatsmyname<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31, DK-8381 Tilst, Aarhus</td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

28
dist/play/full-mail-play-lars.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__welcome" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; padding: 10px 30px 0 30px;"><b>Hi there,</b></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__content" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px 30px 0 30px;">Thanks for writing up this email.<br>We are delighted to reply with a custom footer template.</td></tr><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br><br></td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

28
dist/play/signature-play-lars.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">info@fadeit.dk</a></strong><br>Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br><br></td></table><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

29
dist/play/signature-play.html vendored Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px; line-height: 22px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer" bgcolor="#303030" style="background-color: #303030; border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer__main__signature" align="left" style="align: left; color: #f5f5f5; font-size: 14px;">Best regards,<br><strong>Jane Whatsmyname</strong><br></td></tr><tr class="spd" height="60px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 60px; line-height: 22px;"></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="align: right; color: #f5f5f5; font-size: 14px;"><a href="http://tryplay.dk" style="color: #f5f5f5; text-decoration: none;"><img src="https://informationscreen.com/manage/assets/images/play-logo.png" alt="Play. logo" class="footer__main__col2__td__img" style="border: 0; height: auto; max-height: 65px; max-width: 100%; padding-left: 20px;"></a></td></table><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 40px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #9E9E9E; padding-top: 15px;"><span style="font-size: 18px; margin-bottom: 5px;">LED Pylon. LED Wall. Digital Signage.</span><br>Call <a href="tel:004581100200" style="color: #f5f5f5; text-decoration: none;"><span style="color: #f5f5f5; text-decoration: none;">(45) 81100200</span></a> or email us at <a href="mailto:info@tryplay.dk" target="_blank" style="color: #f5f5f5; text-decoration: none;">info@tryplay.dk</a></td></table></tr></table></td></tr></table></body></html>

28
dist/play/signature-reply-play-lars.html vendored
View File

@ -1,28 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr></table></td></tr></table></body></html>

29
dist/play/signature-reply-play.html vendored Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px; line-height: 22px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Best regards,<br>Jane Whatsmyname<br></td></tr></table></td></tr></table></body></html>

1
package.json
View File

@ -26,6 +26,7 @@
"del": "^2.0.2", "del": "^2.0.2",
"gulp": "^3.9.0", "gulp": "^3.9.0",
"gulp-inline-css": "^3.0.0", "gulp-inline-css": "^3.0.0",
"gulp-inline-image-html": "^0.2.1",
"gulp-minify-html": "^1.0.4", "gulp-minify-html": "^1.0.4",
"gulp-preprocess": "^1.2.0", "gulp-preprocess": "^1.2.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",

BIN
src/fadeit/assets/fadeit-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

8
src/fadeit/conf.js
View File

@ -1,6 +1,10 @@
/*
* NB: for images, if you pass in a relative path ('assets/logo.png'), they will be automatically embedded (base64). If you pass in a URL, it will stay as it is.
*/
module.exports = [ module.exports = [
{ {
id: 'sample', id: 'fadeit', // Will be appended to the built templates.
signature: 'Yours truly,', signature: 'Yours truly,',
name: 'Jane Whatsmyname', name: 'Jane Whatsmyname',
welcome: 'Hi there,', welcome: 'Hi there,',
@ -8,7 +12,7 @@ module.exports = [
contactMain: 'Call <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. contactMain: 'Call <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
contactMail: 'info@fadeit.dk', contactMail: 'info@fadeit.dk',
contactSecondary: 'Anelystparken 31, DK-8381 Tilst, Aarhus', contactSecondary: 'Anelystparken 31, DK-8381 Tilst, Aarhus',
logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', logoUrl: 'http://fadeit.dk/src/assets/img/brand/fadeit-logo.png',
logoAlt: 'fadeit logo', logoAlt: 'fadeit logo',
website: 'http://fadeit.dk' website: 'http://fadeit.dk'
} }

13
src/play/base.css → src/fadeit/fadeit.css
View File

@ -5,10 +5,20 @@
* 1. Common styles for general table things. * 1. Common styles for general table things.
* ===================================== * =====================================
*/ */
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{ tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
line-height: 20px;
} }
.main{ .main{
@ -136,10 +146,13 @@ a{
.footer__main__col2__td{ .footer__main__col2__td{
font-size: 14px; font-size: 14px;
color: #888; color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:right;
} }
.footer__main__col2__td__img{ .footer__main__col2__td__img{
border: 0; border: 0;
padding-top: 6px;
padding-left:10px; padding-left:10px;
max-width: 100%; max-width: 100%;
max-height:38px; max-height:38px;

2
src/fadeit/footer.inc.html
View File

@ -29,7 +29,7 @@
<!-- @todo gulp-inline-css doesn't parse align --> <!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right"> <td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->"> <a href="<!-- @echo website -->">
<img class="fix" src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/> <img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a> </a>
</td> </td>
</table> </table>

15
src/fadeit/head.inc.html
View File

@ -4,18 +4,11 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. --> <!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="fadeit.css">
</head> </head>
<style type="text/css"> <style type="text/css">
img { /* Responsive stuff goes here (inline css doesn't know what to do with it). */
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){ @media only screen and (max-width:480px){
.footer td{ .footer td{
font-size: 12px!important; font-size: 12px!important;
@ -33,5 +26,9 @@
text-align: left; text-align: left;
padding-bottom:20px; padding-bottom:20px;
} }
.footer__main__col2__td__img{
padding-left:0!important;
}
} }
</style> </style>

BIN
src/play/assets/play-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

20
src/play/conf.js
View File

@ -1,15 +1,13 @@
module.exports = [ module.exports = [
{ {
id: 'play-lars', id: 'play',
signature: 'Med venlig hilsen / best regards,', signature: 'Best regards,',
name: 'Lars Normark Holmgaard', name: 'Jane Whatsmyname',
welcome: 'Hi there,', contactMain: 'Call <a href="tel:004581100200"><span>(45) 81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
introParagraph: 'Thanks for writing up this email.<br/> We are delighted to reply with a custom footer template.', contactMail: 'info@tryplay.dk',
contactMain: 'Call <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. slogan: 'LED Pylon. LED Wall. Digital Signage.',
contactMail: 'info@fadeit.dk', logoUrl: 'https://informationscreen.com/manage/assets/images/play-logo.png',
contactSecondary: 'Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br />', logoAlt: 'Play. logo',
logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', website: 'http://tryplay.dk'
logoAlt: 'fadeit logo',
website: 'http://fadeit.dk'
} }
] ]

34
src/play/footer.inc.html
View File

@ -1,38 +1,36 @@
<td class="footer" bgcolor="#f5f5f5"> <td class="footer" bgcolor="#303030">
<!-- @todo gulp-inline-css can't use width in percentages --> <!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%"> <table class="rbcc footer__main" width="100%">
<tr> <tr>
<!-- @todo gulp-inline-css doesn't parse align --> <!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left"> <td class="footer__main__signature" align="left">
<!-- @echo signature --><br /> <!-- @echo signature --><br />
<!-- @echo name --><br /> <strong><!-- @echo name --></strong><br />
</td> </td>
</tr> </tr>
<tr>
<td width="100%">
<hr class="gray-hr"/></td>
</tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<strong>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</strong><br />
<!-- @echo contactSecondary --><br/>
</td>
</table>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="spd" height="60px"></tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align --> <!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right"> <table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @todo gulp-inline-css doesn't parse align --> <!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right"> <td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->"> <a href="<!-- @echo website -->">
<img class="fix" src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/> <img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a> </a>
</td> </td>
</table> </table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<span><!-- @echo slogan --></span><br/>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</td>
</table>
</tr> </tr>
</table> </table>
</td> </td>

25
src/play/full-mail.html
View File

@ -1,25 +0,0 @@
<!-- @include head.inc.html -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<body>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="rbcc">
<td class="main__welcome">
<b><!-- @echo welcome --></b>
</td>
</tr>
<tr class="rbcc">
<td class="main__content">
<!-- @echo introParagraph -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

21
src/play/head.inc.html
View File

@ -4,19 +4,12 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. --> <!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="play.css">
</head> </head>
<style type="text/css"> <style type="text/css">
img { /* Responsive stuff goes here (inline css doesn't know what to do with it). */
max-width: 100%; @media only screen and (max-width:560px){
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{ .footer td{
font-size: 12px!important; font-size: 12px!important;
} }
@ -25,6 +18,14 @@
width: 100%!important; width: 100%!important;
} }
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{ .footer__main__col2{
width: 100%!important; width: 100%!important;
} }

53
src/fadeit/base.css → src/play/play.css
View File

@ -5,10 +5,20 @@
* 1. Common styles for general table things. * 1. Common styles for general table things.
* ===================================== * =====================================
*/ */
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{ tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
line-height: 22px;
} }
.main{ .main{
@ -31,11 +41,17 @@ tr{
} }
.sp{ .sp{
/* Separator tr */ /* sp -> space, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */ /* @todo gulp-inline-css doesn't add height attrs */
height: 30px; height: 30px;
} }
.spd{
/* spd -> space - double, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 60px;
}
.gray-hr{ .gray-hr{
border-bottom:1px solid #E4E4E4; border-bottom:1px solid #E4E4E4;
border-top:none; border-top:none;
@ -76,14 +92,14 @@ a{
*/ */
.footer{ .footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #f5f5f5; background-color: #303030;
padding: 20px 30px 0px 30px; padding: 20px 30px 0px 30px;
color: #888; color: #f5f5f5;
border-top: 8px solid #EAEAEA; border-top: 8px solid #585858;
} }
.footer a{ .footer a{
color: #888; color: #f5f5f5;
} }
.footer--simple{ .footer--simple{
@ -92,6 +108,10 @@ a{
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.footer--simple tr td{
color: #888;
}
.footer__main{ .footer__main{
/* @todo gulp-inline-css can't use width in percentages */ /* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute -> /* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
@ -100,7 +120,7 @@ a{
.footer__main__signature{ .footer__main__signature{
font-size: 14px; font-size: 14px;
color: #888; color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align */
align:left; align:left;
} }
@ -108,21 +128,26 @@ a{
.footer__main__col1{ .footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */ /* @todo gulp-inline-css can't use width in percentages */
width:70%; width:70%;
margin-bottom:30px; margin-bottom:40px;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align */
align:left; align:left;
} }
.footer__main__col1__td{ .footer__main__col1__td{
font-size: 14px; color: #9E9E9E;
color: #888;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align */
align:left; align:left;
padding-top: 15px;
}
.footer__main__col1__td > span{
font-size:18px;
margin-bottom:5px;
} }
.footer__main a > span{ .footer__main a > span{
/* Revert apple blue-link style. */ /* Revert apple blue-link style. */
color: #888!important; color: #f5f5f5!important;
text-decoration:none!important; text-decoration:none!important;
} }
@ -135,13 +160,15 @@ a{
.footer__main__col2__td{ .footer__main__col2__td{
font-size: 14px; font-size: 14px;
color: #888; color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */
align:right;
} }
.footer__main__col2__td__img{ .footer__main__col2__td__img{
border: 0; border: 0;
padding-left:10px; padding-left:20px;
max-width: 100%; max-width: 100%;
max-height:38px; max-height:65px;
height: auto; height: auto;
} }

8
tasks/build.js
View File

@ -7,7 +7,8 @@ var gulp = require('gulp'),
rename = require('gulp-rename'), rename = require('gulp-rename'),
wrench = require('wrench'), wrench = require('wrench'),
Q = require('q'), Q = require('q'),
del = require('del'); del = require('del'),
inlineimg = require('gulp-inline-image-html');
function buildTask(options){ function buildTask(options){
gulp.task('build', function(cb) { gulp.task('build', function(cb) {
@ -24,10 +25,13 @@ function buildTask(options){
function makeTemplates(dir, confItems){ function makeTemplates(dir, confItems){
confItems.forEach(function(item){ confItems.forEach(function(item){
gulp.src([options.src + '/' + dir + '/**/*.html', '!' + options.src + '/**/*.inc.html']) var cwd = options.src + '/' + dir;
gulp.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
.pipe(preprocess({ .pipe(preprocess({
context: item context: item
})) }))
.pipe(inlineimg(cwd))
.pipe(inlineCss({ .pipe(inlineCss({
applyTableAttributes: true, applyTableAttributes: true,
applyWidthAttributes: true, applyWidthAttributes: true,