From 90607f6d937a50902e51a4ef0ad49b91304a94d1 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 6 Jan 2017 21:25:44 -0500 Subject: [PATCH] mail template updates --- src/Mail/wwwroot/index.html | 1 + src/Mail/wwwroot/styles.css | 83 +++++-- src/Mail/wwwroot/templates/announcement.html | 85 +++++++ src/Mail/wwwroot/templates/welcome.html | 243 ++++++++++--------- 4 files changed, 276 insertions(+), 136 deletions(-) create mode 100644 src/Mail/wwwroot/templates/announcement.html diff --git a/src/Mail/wwwroot/index.html b/src/Mail/wwwroot/index.html index 5e88bad573..9402874c21 100644 --- a/src/Mail/wwwroot/index.html +++ b/src/Mail/wwwroot/index.html @@ -7,6 +7,7 @@
  1. Welcome
    2. +
  2. Announcement
diff --git a/src/Mail/wwwroot/styles.css b/src/Mail/wwwroot/styles.css index c3a570c7fd..2831104a69 100644 --- a/src/Mail/wwwroot/styles.css +++ b/src/Mail/wwwroot/styles.css @@ -6,8 +6,11 @@ body, html, body * { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; box-sizing: border-box; - font-size: 14px; + font-size: 16px; color: #333; + line-height: 25px; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; } img { @@ -20,7 +23,7 @@ body { -webkit-text-size-adjust: none; width: 100% !important; height: 100%; - line-height: 22px; + line-height: 25px; } /* Let's make sure all tables have defaults */ @@ -44,19 +47,26 @@ body { width: 100%; } -.container { - display: block !important; +.container, .container-table { + width: 600px; max-width: 600px !important; - margin: 0 auto !important; + display: block !important; /* makes it centered */ clear: both !important; + margin: 0 auto !important; } .content { max-width: 600px; margin: 0 auto; 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; } +.banner, .banner img { + font-size: 0; + line-height: 0; +} + .main { - background-color: #fff; + background-color: white; border: 1px solid #e9e9e9; border-radius: 3px; } +.content-banner .main { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; +} + .content-wrap { padding: 20px; } .content-block { - padding: 0 0 15px; + padding: 0 0 10px; } -.header { - width: 100%; - margin-bottom: 20px; +.indented { + padding-left: 20px; +} + +.li { + padding-left: 10px; } .footer { width: 100%; clear: both; - color: #999; - padding-top: 15px; + margin-top: 15px; } - .footer p, .footer a, .footer td { + .footer, .footer p, .footer a, .footer td, .footer br { color: #999; font-size: 12px; + line-height: 20px; } - .footer .social-icons a { - padding: 0 10px; - } + .footer .social-icons table { + margin: 0 auto; + } + + .footer .social-icons td { + padding: 0 10px; + } /* ------------------------------------- TYPOGRAPHY @@ -109,10 +137,13 @@ body { .h3 { font-size: 18px; line-height: 25px; - margin-bottom: 20px; - margin-top: 20px; + font-weight: bold; } + .biglink a { + font-size: 20px; + } + /* ------------------------------------- LINKS & BUTTONS ------------------------------------- */ @@ -123,7 +154,7 @@ a { .btn-primary { text-decoration: none; - color: #FFF; + color: white; background-color: #3c8dbc; border: solid #3c8dbc; border-width: 10px 20px; @@ -179,7 +210,7 @@ a { } .alert a { - color: #fff; + color: white; text-decoration: none; font-weight: 500; font-size: 16px; @@ -200,12 +231,12 @@ a { /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ -@media only screen and (max-width: 640px) { +@media only screen and (max-width: 600px) { body { padding: 0 !important; } - .container { + .container, .container-table { padding: 0 !important; width: 100% !important; } @@ -233,6 +264,10 @@ a { } .footer { - padding-top: 10px !important; + margin-top: 10px !important; + } + + .indented { + padding-left: 10px; } } diff --git a/src/Mail/wwwroot/templates/announcement.html b/src/Mail/wwwroot/templates/announcement.html new file mode 100644 index 0000000000..75c3c881ad --- /dev/null +++ b/src/Mail/wwwroot/templates/announcement.html @@ -0,0 +1,85 @@ + + + + + + Announcement + + + + + + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + + + +
+ A title! +
+ Some text about an announcement. +
+ + + + + + + + + +
•Bullet 1
•Bullet 2
+
+ Thank you!
+ The bitwarden Team +
+
+ + + + + + + +
+ 8bit Solutions LLC
+ You can unsubscribe from future mailings. +
+
+
+ + diff --git a/src/Mail/wwwroot/templates/welcome.html b/src/Mail/wwwroot/templates/welcome.html index dd541eff76..5050c58019 100644 --- a/src/Mail/wwwroot/templates/welcome.html +++ b/src/Mail/wwwroot/templates/welcome.html @@ -8,126 +8,145 @@ - +
-
-
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Thank you for creating an account with bitwarden. You may now log in with your new account. -
- Did you know that bitwarden is free to sync with all of your devices? Download bitwarden today on: -
- Mobile -
- - - - - -
- - Get bitwarden on Google Play - - - - Get bitwarden for iOS - -
-
- Desktop -
- - - - - - -
ChromeFirefoxOpera
-
- - - - - - -
- - Chrome Extension - - - Firefox Extension - - Opera Extension -
-
- Web -
- You can also access your vault from any web-enabled device using our web vault at https://vault.bitwarden.com. -
- If you have any questions or problems you can email us from our website at https://bitwarden.com/contact. -
- — The bitwarden Team -
-
-
- - - - - - - -
8bit Solutions LLC<%body%>
-
-
+ 		+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Thank you for creating an account with bitwarden. You may now log in with your new account. +
+ Did you know that bitwarden is free to sync with all of your devices? Download bitwarden today on: +
+ Mobile +
+ + + + + +
+ + Get bitwarden on Google Play + + + + Get bitwarden for iOS + +
+
+ Desktop +
+ + + + + + +
ChromeFirefoxOpera
+
+ + + + + + +
+ + Chrome Extension + + + Firefox Extension + + + Opera Extension + +
+
+ Web +
+ You can also access your vault from any web-enabled device using our web vault at: +
+ vault.bitwarden.com +
+ If you have any questions or problems you can email us from our website at https://bitwarden.com/contact. +
+ Thank you!
+ The bitwarden Team +
+
+ + + + + + + +
+ 8bit Solutions LLC +
+
+