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

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

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

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

@ -1,16 +1,18 @@
<!-- @include head.inc.html -->
<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">
<tr class="sp"><td class="sp__inner"></td></tr>
<tr class="sp">
<td class="sp__inner"></td>
</tr>
<tr class="rbcc">
<td class="footer footer--simple">
<table class="rbcc footer__main">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
@ -20,4 +22,4 @@
</td>
</tr>
</table>
</body>
</body>

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

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

137
templates/light/light.css
View File

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

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

@ -1,15 +1,16 @@
<!-- @include head.inc.html -->
<body>
<br/>
<br />
<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">
<td class="footer footer--simple">
<table class="rbcc footer__main">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
@ -19,4 +20,4 @@
</td>
</tr>
</table>
</body>
</body>