Nicer responsive full mail (only light theme)
This commit is contained in:
Dan Mindru
parent
3e1016ac45
commit
1618ed1dce
|
|
@ -1,11 +1,7 @@
|
||||||
@TODO
|
@TODO
|
||||||
- email wrap like phones
|
- email wrap like phones
|
||||||
- ipad responsive center
|
|
||||||
- body bg
|
|
||||||
- wrap content for proper bg..?
|
|
||||||
- less margin for mobile hr
|
- less margin for mobile hr
|
||||||
|
- add foundation example
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Responsive HTML email signature(s)
|
# Responsive HTML email signature(s)
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
||||||
<!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"><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></head><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="padding: 15px 0;"></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;"><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"><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}}@media only screen and (min-width:1025px){.background,.body-with-bg{background-color:#F1F1F1}.body-with-bg .main{border:1px solid #E9E9E9!important;max-width:960px;margin:0 auto}.background{padding:30px}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" 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="padding: 15px 0;"></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;"><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,22 +1,28 @@
|
||||||
<!-- @include head.inc.html -->
|
<!-- @include head.inc.html -->
|
||||||
|
|
||||||
<body>
|
<body class="body-with-bg">
|
||||||
<table class="main rbcc">
|
<table class="background rbcc">
|
||||||
<tr class="rbcc">
|
<tr>
|
||||||
<td class="main__welcome">
|
<td>
|
||||||
<b><!-- @echo welcome --></b>
|
<table class="main rbcc">
|
||||||
</td>
|
<tr class="rbcc">
|
||||||
</tr>
|
<td class="main__welcome">
|
||||||
<tr class="rbcc">
|
<b><!-- @echo welcome --></b>
|
||||||
<td class="main__content">
|
</td>
|
||||||
<!-- @echo introParagraph -->
|
</tr>
|
||||||
</td>
|
<tr class="rbcc">
|
||||||
</tr>
|
<td class="main__content">
|
||||||
|
<!-- @echo introParagraph -->
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<tr class="sp"><td class="sp__inner"></td></tr>
|
<tr class="sp"><td class="sp__inner"></td></tr>
|
||||||
|
|
||||||
<tr class="rbcc">
|
<tr class="rbcc">
|
||||||
<!-- @include footer.inc.html -->
|
<!-- @include footer.inc.html -->
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -35,5 +35,23 @@
|
||||||
padding-left:0!important;
|
padding-left:0!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width:1025px){
|
||||||
|
/* After iPad size */
|
||||||
|
.body-with-bg{
|
||||||
|
background-color: #F1F1F1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-with-bg .main{
|
||||||
|
border:1px solid #E9E9E9!important; /* Sorry! */
|
||||||
|
max-width:960px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background{
|
||||||
|
padding:30px;
|
||||||
|
background-color: #F1F1F1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -19,11 +19,6 @@ tr{
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main{
|
|
||||||
width:100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rbcc{
|
.rbcc{
|
||||||
/*
|
/*
|
||||||
* rbcc -> reset - border - cellspacing - cellpading
|
* rbcc -> reset - border - cellspacing - cellpading
|
||||||
|
|
@ -35,6 +30,16 @@ tr{
|
||||||
cellspacing: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{ /* Separator tr; props are actually contained by it's inner element atm. */ }
|
||||||
|
|
||||||
.sp__inner{
|
.sp__inner{
|
||||||
|
|
@ -52,6 +57,8 @@ tr{
|
||||||
border-top:none;
|
border-top:none;
|
||||||
margin-bottom:20px;
|
margin-bottom:20px;
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
|
color: transparent;
|
||||||
|
background:transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
a{
|
a{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue