Update CSS & HTML to newer inline-css (more table attrs. are automatically inlined now), light theme #4
This commit is contained in:
Dan Mindru
parent
9bd227283f
commit
331746d1ea
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,64 @@
|
|||
<!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">@media only screen and (max-width:560px){.footer__main__col1,.footer__main__col2{width:100%!important}.footer td{font-size:12px!important}.footer__main__col1__td{text-align:left}.footer__main__col1__td>span{margin-bottom:10px}.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="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="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>The dark mail team<br></td></tr></table></td></tr></table></body></html>
|
||||
<!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">
|
||||
<!-- 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). */
|
||||
@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;
|
||||
}
|
||||
|
||||
.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="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;">
|
||||
<!-- @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">
|
||||
<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;">
|
||||
Best regards,<br>
|
||||
The dark mail team<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,60 @@
|
|||
<!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">@media only screen and (max-width:480px){.footer td{font-size:12px!important}.footer__main__col1,.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="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="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>The light mail team<br></td></tr></table></td></tr></table></body></html>
|
||||
<!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">
|
||||
/* 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: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" 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: 20px;"><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: 20px;">
|
||||
<td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; 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: 20px;">
|
||||
<!-- @todo gulp-inline-css doesn't parse align -->
|
||||
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">
|
||||
Yours truly,<br>
|
||||
The light mail team<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body></html>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<td class="footer" bgcolor="#f5f5f5">
|
||||
<!-- @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">
|
||||
|
|
@ -8,13 +7,12 @@
|
|||
<!-- @echo name --><br />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100%">
|
||||
<hr class="gray-hr"/></td>
|
||||
<tr class="gray-hr">
|
||||
<td><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">
|
||||
<!-- @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 -->
|
||||
|
|
@ -24,8 +22,8 @@
|
|||
</td>
|
||||
</table>
|
||||
|
||||
<!-- @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 -->">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<!-- @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";>
|
||||
<table class="main rbcc">
|
||||
<tr class="rbcc">
|
||||
<td class="main__welcome">
|
||||
<b><!-- @echo welcome --></b>
|
||||
|
|
@ -14,11 +13,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- @todo gulp-inline-css doesn't add height attrs -->
|
||||
<tr class="sp" height="30px"></tr>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,32 +3,37 @@
|
|||
<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="light.css">
|
||||
</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;
|
||||
}
|
||||
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
|
||||
|
||||
.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;
|
||||
}
|
||||
/*
|
||||
* ================
|
||||
* 4. Basic responsive stuff.
|
||||
* ================
|
||||
*/
|
||||
@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>
|
||||
|
|
@ -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,13 +35,19 @@ tr{
|
|||
cellspacing:0;
|
||||
}
|
||||
|
||||
.sp{
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.gray-hr{
|
||||
.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;
|
||||
|
|
@ -85,7 +86,6 @@ a{
|
|||
* ================
|
||||
*/
|
||||
.footer{
|
||||
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px 30px 0px 30px;
|
||||
color: #888;
|
||||
|
|
@ -98,14 +98,12 @@ a{
|
|||
|
||||
.footer--simple{
|
||||
padding-bottom: 20px;
|
||||
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.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%; */
|
||||
/* NB: This prop fucks up the width on OS X, needs to be *JUST* attribute. */
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.footer__main__signature{
|
||||
|
|
@ -116,7 +114,6 @@ a{
|
|||
}
|
||||
|
||||
.footer__main__col1{
|
||||
/* @todo gulp-inline-css can't use width in percentages */
|
||||
width:70%;
|
||||
margin-bottom:30px;
|
||||
/* @todo gulp-inline-css doesn't parse align */
|
||||
|
|
@ -137,7 +134,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;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@
|
|||
|
||||
<body>
|
||||
<br/>
|
||||
<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 -->
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue