1
0
mirror of https://github.com/bitwarden/server.git synced 2025-04-22 05:25:10 -05:00

mail template updates

This commit is contained in:
Kyle Spearrin 2017-01-06 21:25:44 -05:00
parent e699e98447
commit 90607f6d93
4 changed files with 276 additions and 136 deletions

View File

@ -7,6 +7,7 @@
<body> <body>
<ol> <ol>
<li><a href="templates/welcome.html">Welcome</a></li> <li><a href="templates/welcome.html">Welcome</a></li>
<li><a href="templates/announcement.html">Announcement</a></li>
</ol> </ol>
</body> </body>
</html> </html>

View File

@ -6,8 +6,11 @@ body, html, body * {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 16px;
color: #333; color: #333;
line-height: 25px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
} }
img { img {
@ -20,7 +23,7 @@ body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
line-height: 22px; line-height: 25px;
} }
/* Let's make sure all tables have defaults */ /* Let's make sure all tables have defaults */
@ -44,19 +47,26 @@ body {
width: 100%; width: 100%;
} }
.container { .container, .container-table {
display: block !important; width: 600px;
max-width: 600px !important; max-width: 600px !important;
margin: 0 auto !important; display: block !important;
/* makes it centered */ /* makes it centered */
clear: both !important; clear: both !important;
margin: 0 auto !important;
} }
.content { .content {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
padding: 0 20px 20px 20px; font-size: 0;
line-height: 0;
padding-bottom: 20px;
}
.content-banner {
padding-top: 20px;
} }
/* ------------------------------------- /* -------------------------------------
@ -67,40 +77,58 @@ body {
text-align: center; text-align: center;
} }
.banner, .banner img {
font-size: 0;
line-height: 0;
}
.main { .main {
background-color: #fff; background-color: white;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
border-radius: 3px; border-radius: 3px;
} }
.content-banner .main {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
}
.content-wrap { .content-wrap {
padding: 20px; padding: 20px;
} }
.content-block { .content-block {
padding: 0 0 15px; padding: 0 0 10px;
} }
.header { .indented {
width: 100%; padding-left: 20px;
margin-bottom: 20px; }
.li {
padding-left: 10px;
} }
.footer { .footer {
width: 100%; width: 100%;
clear: both; clear: both;
color: #999; margin-top: 15px;
padding-top: 15px;
} }
.footer p, .footer a, .footer td { .footer, .footer p, .footer a, .footer td, .footer br {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
line-height: 20px;
} }
.footer .social-icons a { .footer .social-icons table {
padding: 0 10px; margin: 0 auto;
} }
.footer .social-icons td {
padding: 0 10px;
}
/* ------------------------------------- /* -------------------------------------
TYPOGRAPHY TYPOGRAPHY
@ -109,10 +137,13 @@ body {
.h3 { .h3 {
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
margin-bottom: 20px; font-weight: bold;
margin-top: 20px;
} }
.biglink a {
font-size: 20px;
}
/* ------------------------------------- /* -------------------------------------
LINKS & BUTTONS LINKS & BUTTONS
------------------------------------- */ ------------------------------------- */
@ -123,7 +154,7 @@ a {
.btn-primary { .btn-primary {
text-decoration: none; text-decoration: none;
color: #FFF; color: white;
background-color: #3c8dbc; background-color: #3c8dbc;
border: solid #3c8dbc; border: solid #3c8dbc;
border-width: 10px 20px; border-width: 10px 20px;
@ -179,7 +210,7 @@ a {
} }
.alert a { .alert a {
color: #fff; color: white;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -200,12 +231,12 @@ a {
/* ------------------------------------- /* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */ ------------------------------------- */
@media only screen and (max-width: 640px) { @media only screen and (max-width: 600px) {
body { body {
padding: 0 !important; padding: 0 !important;
} }
.container { .container, .container-table {
padding: 0 !important; padding: 0 !important;
width: 100% !important; width: 100% !important;
} }
@ -233,6 +264,10 @@ a {
} }
.footer { .footer {
padding-top: 10px !important; margin-top: 10px !important;
}
.indented {
padding-left: 10px;
} }
} }

View File

@ -0,0 +1,85 @@
<!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" />
<title>Announcement</title>
<link href="../styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="body-wrap" cellpadding="0" cellspacing="0">
<tr>
<td class="container" align="center">
<table cellpadding="0" cellspacing="0" class="container-table">
<tr>
<td class="content content-banner" align="center">
<a href="#" title="" target="_blank" class="banner">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Announcement%20Image&w=600&h=158"
width="600" alt="" />
</a>
<table class="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="content-wrap">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="h3 content-block">
A title!
</td>
</tr>
<tr>
<td class="content-block">
Some text about an announcement.
</td>
</tr>
<tr>
<td class="content-block indented">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15">&bull;</td>
<td class="li">Bullet 1</td>
</tr>
<tr>
<td>&bull;</td>
<td class="li">Bullet 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content-block last">
Thank you!<br />
The bitwarden Team
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="aligncenter content-block">
8bit Solutions LLC<br />
You can <a href="[unsubscribe]">unsubscribe</a> from future mailings.
</td>
</tr>
<tr>
<td class="aligncenter social-icons" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href="https://twitter.com/bitwarden_app" target="_blank"><img src="https://bitwarden.com/images/mail-twitter.png" alt="Twitter" width="30" height="30" /></a></td>
<td><a href="https://www.facebook.com/bitwarden/" target="_blank"><img src="https://bitwarden.com/images/mail-facebook.png" alt="Facebook" width="30" height="30" /></a></td>
<td><a href="https://plus.google.com/114869903467947368993" target="_blank"><img src="https://bitwarden.com/images/mail-gplus.png" alt="Google+" width="30" height="30" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

View File

@ -8,126 +8,145 @@
</head> </head>
<body> <body>
<table class="body-wrap"> <table class="body-wrap" cellpadding="0" cellspacing="0">
<tr> <tr>
<td valign="middle" class="aligncenter middle logo"> <td valign="middle" class="aligncenter middle logo">
<img src="https://bitwarden.com/images/logo-gray.png" alt="" width="250" height="39" /> <img src="https://bitwarden.com/images/logo-gray.png" alt="" width="250" height="39" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="container" width="600"> <td class="container" align="center">
<div class="content"> <table cellpadding="0" cellspacing="0" class="container-table">
<table class="main" width="100%" cellpadding="0" cellspacing="0"> <tr>
<tr> <td class="content" align="center">
<td class="content-wrap"> <table class="main" width="100%" cellpadding="0" cellspacing="0">
<table width="100%" cellpadding="0" cellspacing="0"> <tr>
<tr> <td class="content-wrap">
<td class="content-block"> <table width="100%" cellpadding="0" cellspacing="0">
Thank you for creating an account with bitwarden. You may now log in with your new account. <tr>
</td> <td class="content-block">
</tr> Thank you for creating an account with bitwarden. You may now log in with your new account.
<tr> </td>
<td class="content-block"> </tr>
Did you know that bitwarden is free to sync with all of your devices? Download bitwarden today on: <tr>
</td> <td class="content-block">
</tr> Did you know that bitwarden is free to sync with all of your devices? Download bitwarden today on:
<tr> </td>
<td class="h3"> </tr>
Mobile <tr>
</td> <td class="h3">
</tr> Mobile
<tr> </td>
<td class="content-block"> </tr>
<table width="100%" cellpadding="0" cellspacing="0"> <tr>
<tr> <td class="content-block">
<td valign="middle" class="aligncenter middle" width="50%"> <table width="100%" cellpadding="0" cellspacing="0">
<a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" title="Get bitwarden on Google Play" target="_blank"> <tr>
<img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" height="63" width="163" alt="Get bitwarden on Google Play" /> <td valign="middle" class="aligncenter middle" width="50%">
</a> <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" title="Get bitwarden on Google Play" target="_blank">
</td> <img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" height="63" width="163" alt="Get bitwarden on Google Play" />
<td valign="middle" class="aligncenter middle" width="50%"> </a>
<a href="https://itunes.apple.com/us/app/bitwarden-free-password-manager/id1137397744?mt=8" target="_blank" title="Get bitwarden for iOS"> </td>
<img src="https://bitwarden.com/images/app-store-badge.png" width="135" height="40" alt="Get bitwarden for iOS" /> <td valign="middle" class="aligncenter middle" width="50%">
</a> <a href="https://itunes.apple.com/us/app/bitwarden-free-password-manager/id1137397744?mt=8" target="_blank" title="Get bitwarden for iOS">
</td> <img src="https://bitwarden.com/images/app-store-badge.png" width="135" height="40" alt="Get bitwarden for iOS" />
</tr> </a>
</table> </td>
</td> </tr>
</tr> </table>
<tr> </td>
<td class="h3"> </tr>
Desktop <tr>
</td> <td class="h3">
</tr> Desktop
<tr> </td>
<td> </tr>
<table width="100%" cellpadding="0" cellspacing="0"> <tr>
<tr> <td>
<td class="aligncenter" width="33%">Chrome</td> <table width="100%" cellpadding="0" cellspacing="0">
<td class="aligncenter" width="34%">Firefox</td> <tr>
<td class="aligncenter" width="33%">Opera</td> <td class="aligncenter" width="33%">Chrome</td>
</tr> <td class="aligncenter" width="34%">Firefox</td>
</table> <td class="aligncenter" width="33%">Opera</td>
</td> </tr>
</tr> </table>
<tr> </td>
<td class="content-block"> </tr>
<table width="100%" cellpadding="0" cellspacing="0"> <tr>
<tr> <td class="content-block">
<td valign="middle" class="aligncenter middle" width="33%"> <table width="100%" cellpadding="0" cellspacing="0">
<a href="https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb?utm_source=welcome_email&utm_medium=email" title="Get bitwarden for Chrome" target="_blank"> <tr>
<img width="53" height="54" alt="Chrome Extension" src="https://bitwarden.com/images/chrome.png" /> <td valign="middle" class="aligncenter middle" width="33%">
</a> <a href="https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb?utm_source=welcome_email&utm_medium=email" title="Get bitwarden for Chrome" target="_blank">
</td> <img width="53" height="54" alt="Chrome Extension" src="https://bitwarden.com/images/chrome.png" />
<td valign="middle" class="aligncenter middle" width="34%"> </a>
<img width="57" height="54" alt="Firefox Extension" src="https://bitwarden.com/images/firefox.png" /> </td>
</td> <td valign="middle" class="aligncenter middle" width="34%">
<td valign="middle" class="aligncenter middle" width="33%"> <img width="57" height="54" alt="Firefox Extension" src="https://bitwarden.com/images/firefox.png" />
<img width="53" height="54" alt="Opera Extension" src="https://bitwarden.com/images/opera.png" /> </td>
</td> <td valign="middle" class="aligncenter middle" width="33%">
</tr> <a href="https://addons.opera.com/extensions/details/bitwarden-free-password-manager/?utm_source=welcome_email&utm_medium=email" title="Get bitwarden for Opera" target="_blank">
</table> <img width="53" height="54" alt="Opera Extension" src="https://bitwarden.com/images/opera.png" />
</td> </a>
</tr> </td>
<tr> </tr>
<td class="h3"> </table>
Web </td>
</td> </tr>
</tr> <tr>
<tr> <td class="h3">
<td class="content-block"> Web
You can also access your vault from any web-enabled device using our web vault at <a target="_blank" href="https://vault.bitwarden.com/?utm_source=welcome_email&utm_medium=email">https://vault.bitwarden.com</a>. </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td class="content-block"> You can also access your vault from any web-enabled device using our web vault at:
If you have any questions or problems you can email us from our website at <a target="_blank" href="https://bitwarden.com/contact/?utm_source=welcome_email&utm_medium=email">https://bitwarden.com/contact</a>. </td>
</td> </tr>
</tr> <tr>
<tr> <td class="content-block h3 biglink aligncenter">
<td class="content-block last"> <a target="_blank" href="https://vault.bitwarden.com/?utm_source=welcome_email&utm_medium=email">vault.bitwarden.com</a>
&mdash; The bitwarden Team </td>
</td> </tr>
</tr> <tr>
</table> <td class="content-block">
</td> If you have any questions or problems you can email us from our website at <a target="_blank" href="https://bitwarden.com/contact/?utm_source=welcome_email&utm_medium=email">https://bitwarden.com/contact</a>.
</tr> </td>
</table> </tr>
<div class="footer"> <tr>
<table width="100%"> <td class="content-block last">
<tr> Thank you!<br />
<td class="aligncenter content-block">8bit Solutions LLC&lt;%body%&gt;</td> The bitwarden Team
</tr> </td>
<tr> </tr>
<td class="aligncenter social-icons"> </table>
<a href="https://twitter.com/bitwarden_app" target="_blank"><img src="https://bitwarden.com/images/mail-twitter.png" alt="Twitter" width="30" height="30" /></a><a href="https://www.facebook.com/bitwarden/" target="_blank"><img src="https://bitwarden.com/images/mail-facebook.png" alt="Facebook" width="30" height="30" /></a><a href="https://plus.google.com/114869903467947368993" target="_blank"><img src="https://bitwarden.com/images/mail-gplus.png" alt="Google+" width="30" height="30" /></a> </td>
</td> </tr>
</tr> </table>
</table> <table class="footer" cellpadding="0" cellspacing="0" width="100%">
</div> <tr>
</div> <td class="aligncenter content-block">
8bit Solutions LLC
</td>
</tr>
<tr>
<td class="aligncenter social-icons" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href="https://twitter.com/bitwarden_app" target="_blank"><img src="https://bitwarden.com/images/mail-twitter.png" alt="Twitter" width="30" height="30" /></a></td>
<td><a href="https://www.facebook.com/bitwarden/" target="_blank"><img src="https://bitwarden.com/images/mail-facebook.png" alt="Facebook" width="30" height="30" /></a></td>
<td><a href="https://plus.google.com/114869903467947368993" target="_blank"><img src="https://bitwarden.com/images/mail-gplus.png" alt="Google+" width="30" height="30" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>