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

Update CSS & HTML to newer inline-css (more table attrs. are automatically inlined now), dark theme #4

This commit is contained in:
Dan Mindru 2016-05-15 15:28:38 +02:00
parent 331746d1ea
commit 955240ae80
7 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
dist/dark/signature-dark.html vendored
View File

@ -3,12 +3,17 @@
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
/*
* ================
* 4. Basic responsive stuff.
* ================
*/
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
@ -43,15 +48,13 @@
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
<br> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff" ;="" style="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>
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="" height="30px"></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: 22px;">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer" bgcolor="#303030" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px;">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0">
<td class="footer" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px;" bgcolor="#303030">
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left" style="align: left; color: #f5f5f5; font-size: 14px;">
@ -60,12 +63,11 @@
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<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 class="spd" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="spd__inner" style="" height="60px"></td></tr>
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0">
<!-- @todo gulp-inline-css doesn't parse align -->
<table class="rbcc footer__main__col2" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="30%">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right" style="align: right; color: #f5f5f5; font-size: 14px;">
<a href="http://dark.dk" style="color: #f5f5f5; text-decoration: none;">
@ -74,8 +76,9 @@
</td>
</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" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 40px;" border="0" cellpadding="0" cellspacing="0">
<!-- @todo gulp-inline-css doesn't parse align -->
<table class="rbcc footer__main__col1" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 40px;" border="0" cellpadding="0" cellspacing="0" width="70%">
<!-- @todo gulp-inline-css doesn't parse align -->
<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:004580100100" style="color: #f5f5f5; text-decoration: none;"><span style="color: #f5f5f5 !important; text-decoration: none !important;">(45) 80100100</span></a> or email us at

21
dist/dark/signature-reply-dark.html vendored
View File

@ -3,12 +3,17 @@
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
/*
* ================
* 4. Basic responsive stuff.
* ================
*/
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
@ -42,14 +47,14 @@
</style>
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
<br>
<table class="main rbcc" width="100%" bgcolor="#ffffff" ;="" style="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>
<br> <!-- <br/> Makes it easier to add text when composing -->
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="" height="30px"></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: 22px;">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#FFFFFF" style="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">
<td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF">
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">

28
src/dark/dark.css
View File

@ -1,5 +1,3 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
@ -22,10 +20,7 @@ tr{
}
.main{
/* @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 ->
width:100%; */
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
width:100%;
background-color: #ffffff;
}
@ -40,15 +35,15 @@ tr{
cellspacing:0;
}
.sp{
/* sp -> space, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
.sp{ /* Separator tr; props are actually contained by it's inner element atm. */ }
.sp__inner{
height: 30px;
}
.spd{
/* spd -> space - double, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
.spd{ /* Separator tr (double); props are actually contained by it's inner element atm. */ }
.spd__inner{
height: 60px;
}
@ -91,7 +86,6 @@ a{
* ================
*/
.footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #303030;
padding: 20px 30px 0px 30px;
color: #f5f5f5;
@ -104,7 +98,6 @@ a{
.footer--simple{
padding-bottom: 20px;
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #FFFFFF;
}
@ -113,9 +106,8 @@ a{
}
.footer__main{
/* @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 ->
width:100%; */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute */
width:100%;
}
.footer__main__signature{
@ -126,7 +118,6 @@ a{
}
.footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */
width:70%;
margin-bottom:40px;
/* @todo gulp-inline-css doesn't parse align */
@ -152,7 +143,6 @@ a{
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @todo gulp-inline-css doesn't parse align */
align:right;

17
src/dark/footer.inc.html
View File

@ -1,6 +1,5 @@
<td class="footer" bgcolor="#303030">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<td class="footer">
<table class="rbcc footer__main">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
@ -9,12 +8,11 @@
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="spd" height="60px"></tr>
<tr class="spd"><td class="spd__inner"></td></tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @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 -->">
@ -23,8 +21,9 @@
</td>
</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">
<!-- @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/>
<!-- @echo contactMain -->

9
src/dark/head.inc.html
View File

@ -3,12 +3,17 @@
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="dark.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
/*
* ================
* 4. Basic responsive stuff.
* ================
*/
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;

12
src/dark/signature-reply.html
View File

@ -1,14 +1,14 @@
<!-- @include head.inc.html -->
<body>
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<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="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<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">

7
src/dark/signature.html
View File

@ -2,12 +2,11 @@
<body>
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<table class="main rbcc">
<tr class="sp"><td class="sp__inner"></td></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>