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

Remove todos from html templates

This commit is contained in:
Dan Mindru 2019-09-03 23:33:19 +02:00 committed by Dan Mindru
parent 7cd7e53300
commit a04d8a225a
6 changed files with 146 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
templates/dark/dark.css
View File

@ -12,42 +12,46 @@ body {
-webkit-text-size-adjust: none; -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; line-height: 22px;
} }
.main{ .main {
width:100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
} }
.rbcc{ .rbcc {
/* /*
* rbcc -> reset - border - cellspacing - cellpading * rbcc -> reset - border - cellspacing - cellpading
* *
* Resets table attributes. * Resets table attributes.
*/ */
border:0; border: 0;
cellpadding:0; cellpadding: 0;
cellspacing:0; cellspacing: 0;
} }
.sp{ /* Separator tr; props are actually contained by it's inner element atm. */ } .sp {
/* Separator tr; props are actually contained by it's inner element atm. */
}
.sp__inner{ .sp__inner {
padding: 15px 0; padding: 15px 0;
} }
.spd{ /* Separator tr (double); props are actually contained by it's inner element atm. */ } .spd {
/* Separator tr (double); props are actually contained by it's inner element atm. */
}
.spd__inner{ .spd__inner {
height: 60px; height: 60px;
} }
a{ a {
text-decoration: none; text-decoration: none;
color: #0fade1; color: #0fade1;
} }
@ -57,7 +61,7 @@ a{
* 2. Content styles. * 2. Content styles.
* ================== * ==================
*/ */
.main__welcome{ .main__welcome {
color: #000; color: #000;
padding: 10px 30px 0 30px; padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -65,93 +69,92 @@ a{
line-height: 22px; line-height: 22px;
} }
.main__content{ .main__content {
color: #000; color: #000;
padding: 10px 30px 0 30px; padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
} }
/* /*
* ================ * ================
* 3. Footer styles. * 3. Footer styles.
* ================ * ================
*/ */
.footer{ .footer {
background-color: #303030; background-color: #303030;
padding: 20px 30px 0px 30px; padding: 20px 30px 0px 30px;
color: #f5f5f5; color: #f5f5f5;
border-top: 8px solid #585858; border-top: 8px solid #585858;
} }
.footer a{ .footer a {
color: #f5f5f5; color: #f5f5f5;
} }
.footer--simple{ .footer--simple {
padding-bottom: 20px; padding-bottom: 20px;
background-color: #FFFFFF; background-color: #ffffff;
} }
.footer--simple tr td{ .footer--simple tr td {
color: #888; color: #888;
} }
.footer__main{ .footer__main {
/* 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 */
width:100%; width: 100%;
} }
.footer__main__signature{ .footer__main__signature {
font-size: 14px; font-size: 14px;
color: #f5f5f5; color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
} }
.footer__main__col1{ .footer__main__col1 {
width:70%; width: 70%;
margin-bottom:40px; margin-bottom: 40px;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
} }
.footer__main__col1__td{ .footer__main__col1__td {
color: #9E9E9E; color: #9e9e9e;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
padding-top: 15px; padding-top: 15px;
} }
.footer__main__col1__td > span{ .footer__main__col1__td > span {
font-size:18px; font-size: 18px;
margin-bottom:5px; margin-bottom: 5px;
} }
.footer__main a > span{ .footer__main a > span {
/* Revert apple blue-link style. */ /* Revert apple blue-link style. */
color: #f5f5f5!important; color: #f5f5f5 !important;
text-decoration:none!important; text-decoration: none !important;
} }
.footer__main__col2{ .footer__main__col2 {
width:30%; width: 30%;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:right; align: right;
} }
.footer__main__col2__td{ .footer__main__col2__td {
font-size: 14px; font-size: 14px;
color: #f5f5f5; color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:right; align: right;
} }
.footer__main__col2__td__img{ .footer__main__col2__td__img {
border: 0; border: 0;
padding-left:20px; padding-left: 20px;
max-width: 100%; max-width: 100%;
max-height:65px; max-height: 65px;
height: auto; height: auto;
} }

15
templates/dark/footer.inc.html
View File

@ -1,35 +1,32 @@
<td class="footer"> <td class="footer">
<table class="rbcc footer__main"> <table class="rbcc footer__main">
<tr> <tr>
<!-- @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 />
<strong><!-- @echo name --></strong><br /> <strong><!-- @echo name --></strong><br />
</td> </td>
</tr> </tr>
<tr class="spd"><td class="spd__inner"></td></tr> <tr class="spd">
<td class="spd__inner"></td>
</tr>
<tr> <tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<table class="rbcc footer__main__col2" align="right"> <table class="rbcc footer__main__col2" align="right">
<!-- @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 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 doesn't parse align -->
<table class="rbcc footer__main__col1" align="left"> <table class="rbcc footer__main__col1" align="left">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col1__td" align="left"> <td class="footer__main__col1__td" align="left">
<span><!-- @echo slogan --></span><br/> <span><!-- @echo slogan --></span><br />
<!-- @echo contactMain --> <!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a> <a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</td> </td>
</table> </table>
</tr> </tr>
</table> </table>
</td> </td>

10
templates/dark/signature-reply.html
View File

@ -1,16 +1,18 @@
<!-- @include head.inc.html --> <!-- @include head.inc.html -->
<body> <body>
<br/> <!-- <br/> Makes it easier to add text when composing --> <br />
<!-- <br/> Makes it easier to add text when composing -->
<table class="main rbcc"> <table class="main rbcc">
<tr class="sp"><td class="sp__inner"></td></tr> <tr class="sp">
<td class="sp__inner"></td>
</tr>
<tr class="rbcc"> <tr class="rbcc">
<td class="footer footer--simple"> <td class="footer footer--simple">
<table class="rbcc footer__main"> <table class="rbcc footer__main">
<tr> <tr>
<!-- @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 /> <!-- @echo name --><br />
@ -20,4 +22,4 @@
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>

14
templates/light/footer.inc.html
View File

@ -1,36 +1,32 @@
<td class="footer"> <td class="footer">
<table class="rbcc footer__main"> <table class="rbcc footer__main">
<tr> <tr>
<!-- @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 /> <!-- @echo name --><br />
</td> </td>
</tr> </tr>
<tr class="gray-hr"> <tr class="gray-hr">
<td><hr class="gray-hr"/></td> <td><hr class="gray-hr" /></td>
</tr> </tr>
<tr> <tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<table class="rbcc footer__main__col1" align="left"> <table class="rbcc footer__main__col1" align="left">
<td class="footer__main__col1__td" align="left"> <td class="footer__main__col1__td" align="left">
<strong> <strong>
<!-- @echo contactMain --> <!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a> <a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a> </strong
</strong><br /> ><br />
<!-- @echo contactSecondary --> <!-- @echo contactSecondary -->
</td> </td>
</table> </table>
<!-- @todo gulp-inline-css doesn't parse align -->
<table class="rbcc footer__main__col2" align="right"> <table class="rbcc footer__main__col2" align="right">
<!-- @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 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>
</tr> </tr>
</table> </table>
</td> </td>

137
templates/light/light.css
View File

@ -12,56 +12,60 @@ body {
-webkit-text-size-adjust: none; -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; line-height: 20px;
} }
.rbcc{ .rbcc {
/* /*
* rbcc -> reset - border - cellspacing - cellpading * rbcc -> reset - border - cellspacing - cellpading
* *
* Resets table attributes. * Resets table attributes.
*/ */
border:0; border: 0;
cellpadding:0; cellpadding: 0;
cellspacing:0; cellspacing: 0;
} }
.background{ .background {
width:100%;
}
.main{
width:100%;
background-color: #ffffff;
padding-top:15px;
}
.sp{ /* Separator tr; props are actually contained by it's inner element atm. */ }
.sp__inner{
padding: 15px 0;
}
.gray-hr{ /* 100% width light grey line; props are actually contained by inner elements atm. */ }
.gray-hr td{
width: 100%; width: 100%;
} }
.gray-hr hr{ .main {
border-bottom:1px solid #E4E4E4; width: 100%;
border-top:none; background-color: #ffffff;
margin-bottom:20px; padding-top: 15px;
margin-top:20px;
color: transparent;
background:transparent;
} }
a{ .sp {
/* Separator tr; props are actually contained by it's inner element atm. */
}
.sp__inner {
padding: 15px 0;
}
.gray-hr {
/* 100% width light grey line; props are actually contained by inner elements atm. */
}
.gray-hr td {
width: 100%;
}
.gray-hr hr {
border-bottom: 1px solid #e4e4e4;
border-top: none;
margin-bottom: 20px;
margin-top: 20px;
color: transparent;
background: transparent;
}
a {
text-decoration: none; text-decoration: none;
color: #0fade1; color: #0fade1;
} }
@ -71,7 +75,7 @@ a{
* 2. Content styles. * 2. Content styles.
* ================== * ==================
*/ */
.main__welcome{ .main__welcome {
color: #000; color: #000;
padding: 10px 30px 0 30px; padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -79,85 +83,84 @@ a{
line-height: 22px; line-height: 22px;
} }
.main__content{ .main__content {
color: #000; color: #000;
padding: 10px 30px 0 30px; padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
} }
/* /*
* ================ * ================
* 3. Footer styles. * 3. Footer styles.
* ================ * ================
*/ */
.footer{ .footer {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 20px 30px 0px 30px; padding: 20px 30px 0px 30px;
color: #888; color: #888;
border-top: 8px solid #EAEAEA; border-top: 8px solid #eaeaea;
} }
.footer a{ .footer a {
color: #888; color: #888;
} }
.footer--simple{ .footer--simple {
padding-bottom: 20px; padding-bottom: 20px;
background-color: #FFFFFF; background-color: #ffffff;
} }
.footer__main{ .footer__main {
/* NB: This prop fucks up the width on OS X, needs to be *JUST* attribute. */ /* NB: This prop fucks up the width on OS X, needs to be *JUST* attribute. */
width:100%; width: 100%;
} }
.footer__main__signature{ .footer__main__signature {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
} }
.footer__main__col1{ .footer__main__col1 {
width:70%; width: 70%;
margin-bottom:30px; margin-bottom: 30px;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
} }
.footer__main__col1__td{ .footer__main__col1__td {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:left; align: left;
} }
.footer__main a > span{ .footer__main a > span {
/* Revert apple blue-link style. */ /* Revert apple blue-link style. */
color: #888!important; color: #888 !important;
text-decoration:none!important; text-decoration: none !important;
} }
.footer__main__col2{ .footer__main__col2 {
width:30%; width: 30%;
/* @todo gulp-inline-css doesn't parse align */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:right; align: right;
} }
.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 */ /* @todo gulp-inline-css doesn't parse align; it needs to be duplicated in the HTML template */
align:right; align: right;
} }
.footer__main__col2__td__img{ .footer__main__col2__td__img {
border: 0; border: 0;
padding-top: 6px; padding-top: 6px;
padding-left:10px; padding-left: 10px;
max-width: 100%; max-width: 100%;
max-height:38px; max-height: 38px;
height: auto; height: auto;
} }

9
templates/light/signature-reply.html
View File

@ -1,15 +1,16 @@
<!-- @include head.inc.html --> <!-- @include head.inc.html -->
<body> <body>
<br/> <br />
<table class="main rbcc"> <table class="main rbcc">
<tr class="sp"><td class="sp__inner"></td></tr> <tr class="sp">
<td class="sp__inner"></td>
</tr>
<tr class="rbcc"> <tr class="rbcc">
<td class="footer footer--simple"> <td class="footer footer--simple">
<table class="rbcc footer__main"> <table class="rbcc footer__main">
<tr> <tr>
<!-- @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 /> <!-- @echo name --><br />
@ -19,4 +20,4 @@
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>