Make the email table wider

This commit is contained in:
snipe 2020-10-23 06:55:04 -07:00
parent aec2f2a249
commit f68580b482

View file

@ -1,13 +1,15 @@
/* Base */ /* Base */
body, body *:not(html):not(style):not(br):not(tr):not(code) { body,
font-family: Avenir, Helvetica, sans-serif; body *:not(html):not(style):not(br):not(tr):not(code) {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color: #f5f8fa; background-color: #f8fafc;
color: #74787E; color: #74787e;
height: 100%; height: 100%;
hyphens: auto; hyphens: auto;
line-height: 1.4; line-height: 1.4;
@ -30,7 +32,7 @@ blockquote {
} }
a { a {
color: #3869D4; color: #3869d4;
} }
a img { a img {
@ -40,7 +42,7 @@ a img {
/* Typography */ /* Typography */
h1 { h1 {
color: #2F3133; color: #3d4852;
font-size: 19px; font-size: 19px;
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
@ -48,7 +50,7 @@ h1 {
} }
h2 { h2 {
color: #2F3133; color: #3d4852;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
@ -56,7 +58,7 @@ h2 {
} }
h3 { h3 {
color: #2F3133; color: #3d4852;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
@ -64,7 +66,7 @@ h3 {
} }
p { p {
color: #74787E; color: #3d4852;
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
margin-top: 0; margin-top: 0;
@ -82,7 +84,7 @@ img {
/* Layout */ /* Layout */
.wrapper { .wrapper {
background-color: #f5f8fa; background-color: #f8fafc;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -105,7 +107,6 @@ img {
.header { .header {
padding: 25px 0; padding: 25px 0;
text-align: center; text-align: center;
font-size: 20px;
} }
.header a { .header a {
@ -119,9 +120,9 @@ img {
/* Body */ /* Body */
.body { .body {
background-color: #FFFFFF; background-color: #ffffff;
border-bottom: 1px solid #EDEFF2; border-bottom: 1px solid #edeff2;
border-top: 1px solid #EDEFF2; border-top: 1px solid #edeff2;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -131,9 +132,10 @@ img {
} }
.inner-body { .inner-body {
background-color: #FFFFFF; background-color: #ffffff;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
width: 90%;
-premailer-cellpadding: 0; -premailer-cellpadding: 0;
-premailer-cellspacing: 0; -premailer-cellspacing: 0;
-premailer-width: 570px; -premailer-width: 570px;
@ -142,7 +144,7 @@ img {
/* Subcopy */ /* Subcopy */
.subcopy { .subcopy {
border-top: 1px solid #EDEFF2; border-top: 1px solid #edeff2;
margin-top: 25px; margin-top: 25px;
padding-top: 25px; padding-top: 25px;
} }
@ -164,7 +166,7 @@ img {
} }
.footer p { .footer p {
color: #AEAEAE; color: #aeaeae;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
@ -180,19 +182,21 @@ img {
} }
.table th { .table th {
border-bottom: 1px solid #EDEFF2; border-bottom: 1px solid #edeff2;
padding-bottom: 8px; padding-bottom: 8px;
margin: 0;
} }
.table td { .table td {
color: #74787E; color: #74787e;
font-size: 15px; font-size: 15px;
line-height: 15px; line-height: 18px;
padding: 8px 0; padding: 10px 0;
margin: 0;
} }
.content-cell { .content-cell {
padding: 20px; padding: 35px;
} }
/* Buttons */ /* Buttons */
@ -210,34 +214,37 @@ img {
.button { .button {
border-radius: 3px; border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
color: #FFF; color: #fff;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
} }
.button-blue { .button-blue,
background-color: #3097D1; .button-primary {
border-top: 10px solid #3097D1; background-color: #3490dc;
border-right: 18px solid #3097D1; border-top: 10px solid #3490dc;
border-bottom: 10px solid #3097D1; border-right: 18px solid #3490dc;
border-left: 18px solid #3097D1; border-bottom: 10px solid #3490dc;
border-left: 18px solid #3490dc;
} }
.button-green { .button-green,
background-color: #2ab27b; .button-success {
border-top: 10px solid #2ab27b; background-color: #38c172;
border-right: 18px solid #2ab27b; border-top: 10px solid #38c172;
border-bottom: 10px solid #2ab27b; border-right: 18px solid #38c172;
border-left: 18px solid #2ab27b; border-bottom: 10px solid #38c172;
border-left: 18px solid #38c172;
} }
.button-red { .button-red,
background-color: #bf5329; .button-error {
border-top: 10px solid #bf5329; background-color: #e3342f;
border-right: 18px solid #bf5329; border-top: 10px solid #e3342f;
border-bottom: 10px solid #bf5329; border-right: 18px solid #e3342f;
border-left: 18px solid #bf5329; border-bottom: 10px solid #e3342f;
border-left: 18px solid #e3342f;
} }
/* Panels */ /* Panels */
@ -247,7 +254,7 @@ img {
} }
.panel-content { .panel-content {
background-color: #EDEFF2; background-color: #f1f5f8;
padding: 16px; padding: 16px;
} }
@ -263,8 +270,8 @@ img {
/* Promotions */ /* Promotions */
.promotion { .promotion {
background-color: #FFFFFF; background-color: #ffffff;
border: 2px dashed #9BA2AB; border: 2px dashed #9ba2ab;
margin: 0; margin: 0;
margin-bottom: 25px; margin-bottom: 25px;
margin-top: 25px; margin-top: 25px;
@ -284,15 +291,8 @@ img {
text-align: center; text-align: center;
} }
.logo-text { /* Utilities */
max-width: 150px;
max-height: 150px;
vertical-align:middle;
}
.logo-only { .break-all {
max-width: 640px; word-break: break-all;
max-height: 150px;
vertical-align:middle;
} }