91 lines
3.2 KiB
Plaintext
91 lines
3.2 KiB
Plaintext
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title><%= @subject %></title>
|
||
|
|
<!--
|
||
|
|
|
||
|
|
SALTED | A RESPONSIVE EMAIL TEMPLATE
|
||
|
|
=====================================
|
||
|
|
|
||
|
|
Based on code used and tested by Litmus (@litmusapp)
|
||
|
|
Originally developed by Kevin Mandeville (@KEVINgotbounce)
|
||
|
|
Cleaned up by Jason Rodriguez (@rodriguezcommaj)
|
||
|
|
Presented by A List Apart (@alistapart)
|
||
|
|
|
||
|
|
Email is surprisingly hard. While this has been thoroughly tested, your mileage may vary.
|
||
|
|
It's highly recommended that you test using a service like Litmus and your own devices.
|
||
|
|
|
||
|
|
Enjoy!
|
||
|
|
|
||
|
|
-->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
<style type="text/css">
|
||
|
|
/* CLIENT-SPECIFIC STYLES */
|
||
|
|
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
|
||
|
|
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
|
||
|
|
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
|
||
|
|
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
|
||
|
|
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
|
||
|
|
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
|
||
|
|
|
||
|
|
/* RESET STYLES */
|
||
|
|
body{margin:0; padding:0;}
|
||
|
|
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
|
||
|
|
table{border-collapse:collapse !important;}
|
||
|
|
body{height:100% !important; margin:0; padding:0; width:100% !important;}
|
||
|
|
|
||
|
|
/* iOS BLUE LINKS */
|
||
|
|
.appleBody a {color:#68440a; text-decoration: none;}
|
||
|
|
.appleFooter a {color:#999999; text-decoration: none;}
|
||
|
|
|
||
|
|
/* MOBILE STYLES */
|
||
|
|
@media screen and (max-width: 525px) {
|
||
|
|
|
||
|
|
/* ADJUSTS LAYOUT OF LOGO IMAGE */
|
||
|
|
td[class="logo"]{
|
||
|
|
text-align: left;
|
||
|
|
padding: 20px 0 20px 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
td[class="logo"] img{
|
||
|
|
margin:0 auto!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FULL-WIDTH TABLES */
|
||
|
|
table[class="responsive-table"]{
|
||
|
|
width:100%!important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="margin: 0; padding: 0;">
|
||
|
|
|
||
|
|
<%= render partial: 'mailer_modules/header', locals: { invitation: @invitation.present? ? @invitation : nil } %>
|
||
|
|
|
||
|
|
<!-- MESSAGE CONTENT -->
|
||
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||
|
|
<tr>
|
||
|
|
<td bgcolor="#ffffff" align="center" style="padding: 0px 15px 72px 15px;">
|
||
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 620px; width: 100% !important;">
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffffff; border-collapse: separate !important; width: 100% !important;">
|
||
|
|
|
||
|
|
<%= render partial: 'mailer_modules/message_title', locals: { subject: @subject } %>
|
||
|
|
|
||
|
|
<%= yield %>
|
||
|
|
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<%= render partial: 'mailer_modules/footer' %>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|