From 0651f134e4a817d290213981f4169d2aeaa2491e Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Fri, 14 Aug 2015 15:21:51 -0400 Subject: [PATCH] Backed our new styles out of ink.css and moved them into style.css. Small margin tweaks, looking good to go. --- emails/assets/css/ink.css | 34 +------------- emails/assets/css/style.css | 68 +++++++++++++++++++++++++++ emails/templates/invited_to_org.html | 12 +---- emails/templates/new_user_invite.html | 18 ++----- public/emails/invited_to_org.html | 23 +++++---- public/emails/new_user_invite.html | 28 ++++++----- public/emails/reset_password.html | 17 +++++-- public/emails/welcome_on_signup.html | 17 +++++-- 8 files changed, 132 insertions(+), 85 deletions(-) diff --git a/emails/assets/css/ink.css b/emails/assets/css/ink.css index 8a9cd6194e7..29cba594fbe 100644 --- a/emails/assets/css/ink.css +++ b/emails/assets/css/ink.css @@ -417,38 +417,6 @@ h6 a:visited { /* Buttons */ -.better-button td{ - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; -} - -.better-button a{ - text-decoration: none; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - - padding: 12px 25px; - border: 1px solid #ff8f2b; - display: inline-block; - color: #FFF; -} - -.better-button:hover a { - color: #FFFFFF !important; - background-color: #F2821E; - border: 1px solid #F2821E; -} - -.better-button:visited a { - color: #FFFFFF !important; -} - -.better-button:active a { - color: #FFFFFF !important; -} - table.button, table.tiny-button, table.small-button, @@ -721,4 +689,4 @@ body.outlook p { table[class="body"] .hide-for-desktop { display: inherit !important; } -} +} \ No newline at end of file diff --git a/emails/assets/css/style.css b/emails/assets/css/style.css index 47a5213e33e..7d5d7a7f759 100644 --- a/emails/assets/css/style.css +++ b/emails/assets/css/style.css @@ -5,6 +5,37 @@ body, table.body, h1, h2, h3, h4, h5, h6, p, td { -webkit-text-size-adjust: none; } +h1 {font-size: 40px;} +h2 {font-size: 36px;} +h3 { + font-size: 22px; + margin-top: 20px; +} +h4 {font-size: 20px;} +h5 {font-size: 18px;} +h6 {font-size: 16px;} + +.emphasis { + font-weight: 600; +} + +a { + color: #E67612; + text-decoration: none; +} + +a:hover { + color: #ff8f2b !important; +} + +a:active { + color: #F2821E !important; +} + +a:visited { + color: #E67612 !important; +} + table.facebook td { background: #3b5998; border-color: #2d4473; @@ -65,3 +96,40 @@ table.google-plus:hover td { } } +table.better-button { + margin-top: 10px; + margin-bottom: 20px; +} + +table.columns td.better-button { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + padding-bottom: 0px; +} + +.better-button a { + text-decoration: none; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + + padding: 12px 25px; + border: 1px solid #ff8f2b; + display: inline-block; + color: #FFF; +} + +.better-button:hover a { + color: #FFFFFF !important; + background-color: #F2821E; + border: 1px solid #F2821E; +} + +.better-button:visited a { + color: #FFFFFF !important; +} + +.better-button:active a { + color: #FFFFFF !important; +} \ No newline at end of file diff --git a/emails/templates/invited_to_org.html b/emails/templates/invited_to_org.html index 3779978f797..bb79b141dcf 100644 --- a/emails/templates/invited_to_org.html +++ b/emails/templates/invited_to_org.html @@ -32,17 +32,9 @@ - - - +
- +
Log in nowLog in now
diff --git a/emails/templates/new_user_invite.html b/emails/templates/new_user_invite.html index 946536e3b73..86948a665f6 100644 --- a/emails/templates/new_user_invite.html +++ b/emails/templates/new_user_invite.html @@ -25,22 +25,14 @@ @@ -54,6 +46,4 @@
-

You've been invited to join the [[.OrgName]] organization by [[.InvitedBy]]

-

To accept your invitation and join the team, please click the link below:

+

You've been invited to join the [[.OrgName]] organization by [[.InvitedBy]]. To accept your invitation and join the team, please click the link below:
- - +
- +
Complete Sign UpAccept Invitation
- - - + \ No newline at end of file diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html index 62ef6f738a3..f4a2bf6a8dd 100644 --- a/public/emails/invited_to_org.html +++ b/public/emails/invited_to_org.html @@ -27,6 +27,18 @@ color: #F2821E !important; a:visited { color: #E67612 !important; } +body { +font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; +} +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} .better-button:hover a { color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } @@ -36,9 +48,6 @@ color: #FFFFFF !important; .better-button:active a { color: #FFFFFF !important; } -body { -font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -115,7 +124,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- @@ -138,11 +147,9 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

You have been added to {{.OrgName}}

+

You have been added to {{.OrgName}}
- - - +
- +
Log in nowLog in now
diff --git a/public/emails/new_user_invite.html b/public/emails/new_user_invite.html index 80c63f6458a..d3f0c615993 100644 --- a/public/emails/new_user_invite.html +++ b/public/emails/new_user_invite.html @@ -27,6 +27,18 @@ color: #F2821E !important; a:visited { color: #E67612 !important; } +body { +font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; +} +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} .better-button:hover a { color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } @@ -36,9 +48,6 @@ color: #FFFFFF !important; .better-button:active a { color: #FFFFFF !important; } -body { -font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -115,7 +124,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- @@ -131,16 +140,14 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

You're invited to join {{.OrgName}}

+

You're invited to join {{.OrgName}}
@@ -155,9 +162,6 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

You've been invited to join the {{.OrgName}} organization by {{.InvitedBy}}

-

To accept your invitation and join the team, please click the link below:

+

You've been invited to join the {{.OrgName}} organization by {{.InvitedBy}}. To accept your invitation and join the team, please click the link below:
- - +
- +
Complete Sign UpAccept Invitation
- - - diff --git a/public/emails/reset_password.html b/public/emails/reset_password.html index 2e4a5e20bd6..49b4a28ae7b 100644 --- a/public/emails/reset_password.html +++ b/public/emails/reset_password.html @@ -27,6 +27,18 @@ color: #F2821E !important; a:visited { color: #E67612 !important; } +body { +font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; +} +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} .better-button:hover a { color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } @@ -36,9 +48,6 @@ color: #FFFFFF !important; .better-button:active a { color: #FFFFFF !important; } -body { -font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -113,7 +122,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
diff --git a/public/emails/welcome_on_signup.html b/public/emails/welcome_on_signup.html index 7ab8e5abf22..53798e83eb1 100644 --- a/public/emails/welcome_on_signup.html +++ b/public/emails/welcome_on_signup.html @@ -27,6 +27,18 @@ color: #F2821E !important; a:visited { color: #E67612 !important; } +body { +font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; +} +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} .better-button:hover a { color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } @@ -36,9 +48,6 @@ color: #FFFFFF !important; .better-button:active a { color: #FFFFFF !important; } -body { -font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -113,7 +122,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

Hi {{.Name}}

+

Hi {{.Name}}
-

Hi {{.Name}}

+

Hi {{.Name}}