Skip to content

Commit

Permalink
Fix: Formatting does not work in gmail from browser
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhflorey
jhflorey committed Apr 30, 2024
1 parent e0aa473 commit 376fef7
Showing 1 changed file with 125 additions and 185 deletions.
310 changes: 125 additions & 185 deletions newsletter/anniversary.html
View file
Original file line number Diff line number Diff line change
@@ -1,198 +1,138 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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" style="color-scheme:light dark;supported-color-schemes:light dark;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template</title>
<style type="text/css">
body {
margin: 0;
background-color: #cccccc;
}
p {
margin: 0;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.landingImg:hover {
content: url(https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/oneyear.gif?raw=true)
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 60px;
}
.main {
background-color: #2A72A5;
margin: 0 auto;
width: 300%;
max-width: 800px;;
border-spacing: 20px;
font-family: sans-serif;
color: #171a1b;
}
.two-columns {
text-align: center;
font-size: 0;
}
.two-columns .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
text-align: center;
}

/* Custom Dark Mode Colors */
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* Custom Dark Mode Colors */
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template</title>
</head>

@media (prefers-color-scheme: dark) {
.darkmode-bg {
background: #2d2d2d!important;
color: #ffffff!important;
}
p {
color: #ffffff!important;
margin: 0;
}
#dark-btn {
background-color: #FFBF17!important;
color: #000000!important;
}
.darkmode-transparent {
background-color: transparent!important;
}
.dark-hyperlink {
color: #2A72A5!important;
font-weight: bold;
}
}
</style>
</head>
<body style="margin:0;background-color:#cccccc;">


<table class="main" style="border-spacing:0;background-color:#2A72A5;margin:0 auto;width:300%;max-width:800px;border-spacing:20px;font-family:sans-serif;color:#171a1b;">
<!--[if (gte mso 9)|(IE)]>
<body style="margin:0;background-color:#cccccc;">
<table class="main"
style="border-spacing:0;background-color:#2A72A5;margin:0 auto;width:300%;max-width:800px;border-spacing:20px;font-family:sans-serif;color:#171a1b;">
<!--[if (gte mso 9)|(IE)]>
<table width="300%" style="max-width: 800px;" role="presentation">
<![endif]-->
<td style="padding: 14px 0 4px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td class="two-columns" style="padding:0;text-align:center;font-size:0;">
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td style="padding: 0 0 15px 10px; ">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank">
<img src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/connectlogo.png?raw=true"
style="border:0; display: flex; justify-content: center; margin: auto 5px; float: left; width: 100%;
height: auto;">
</a>
</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 0px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="color: #ffffff; font-family: sans-serif; font-size: 28px; font-weight: bold; letter-spacing: 0; line-height: 30.8px; display: flex; justify-content: center;">
It’s your Connect anniversary! </p>
</td>
</tr>
<tr>
<td style="padding: 0 32px 10px;">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank"><img class="landingImg" src="https://user-images.githubusercontent.com/30497847/224184907-80e79218-ad99-4660-bbb0-8a23a1f5dddc.png" alt="" width="700px"
style="border:0; display: flex;
justify-content: center;"></a>
<!--[if (gte mso 9)|(IE)]>
<tr>
<td style="padding: 14px 0 4px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 10px;">
<p
style="margin:0;color: #ffffff;font-size: 14px; font-weight: bold; letter-spacing: 0; text-align: right; ;">
View in <a class="dark-hyperlink" href="https://episphere.github.io/dashboard/newsletter/anniversary"
target="_blank" style="color: #ffffff;">browser</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank">
<img
src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/connectlogo.png?raw=true"
style="border:0; margin: auto 5px; width: 100%; height: auto;max-width: 300px;">
</a>
</p>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 0px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p
style="color: #ffffff; font-family: sans-serif; font-size: 28px; font-weight: bold; letter-spacing: 0; line-height: 30.8px; text-align: center;">
It’s your Connect anniversary! </p>
</td>
</tr>
<tr>
<td style="padding: 0 32px 10px;">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank"><img class="landingImg"
src="https://user-images.githubusercontent.com/30497847/224184907-80e79218-ad99-4660-bbb0-8a23a1f5dddc.png"
alt="" width="700px" style="border:0;"></a>
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:374px;">
<v:fill type="tile" src="https://user-images.githubusercontent.com/30497847/224184907-80e79218-ad99-4660-bbb0-8a23a1f5dddc.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
</td>
</tr>
</tr>
<tr>

<tr width="100%">
<td style="padding: 0px 0 10px 30px;">
<p style="margin:0;height: 75px; width: 760px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; letter-spacing: 0; line-height: 24px; text-align: justify;">Over the past year, your contributions to Connect have helped us start to build a resource for cancer prevention research.
Your continued participation will help us grow and use this resource to explore the causes of cancer and learn how to better prevent it. <br/><br><b>We appreciate your commitment to partnering with us for the future of cancer prevention and encourage you to
<a href="https://www.cancer.gov/connect-prevention-study/" style="color: #FFBF17;">spread the word</a> to others.</b> We look forward to having you as part of the Connect community for years to come!
<br/></p>
</td>
</tr>
<tr>
<td style="padding: 0 1px 100px 40px;">
<p style="margin:0;"></p>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 15px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;background-color: #2A72A5; padding-bottom: 20px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="height: 92px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; letter-spacing: 0;
</td>
<tr>

<tr width="100%">
<td style="padding: 0px 0 10px 30px;">
<p
style="margin:0;height: 75px; width: 760px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; letter-spacing: 0; line-height: 24px; text-align: justify;">
Over the past year, your contributions to Connect have helped us start to build a resource for cancer
prevention research.
Your continued participation will help us grow and use this resource to explore the causes of cancer and learn
how to better prevent it. <br /><br><b>We appreciate your commitment to partnering with us for the future of
cancer prevention and encourage you to
<a href="https://www.cancer.gov/connect-prevention-study/" style="color: #FFBF17;">spread the word</a> to
others.</b> We look forward to having you as part of the Connect community for years to come!
<br />
</p>
</td>
</tr>
<tr>
<td style="padding: 0 1px 100px 40px;">
<p style="margin:0;"></p>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 15px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;background-color: #2A72A5; padding-bottom: 20px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="height: 92px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; letter-spacing: 0;
line-height: 24px; text-align: center; padding: 10px 0 20px 20px;">
<p style="margin:0;">Connect for Cancer Prevention Study</p>
<a href="https://www.cancer.gov/" style="color: white" target="_blank">National Cancer Institute</a> | <a href="https://www.nih.gov" style="color: white" target="_blank">National Institutes of Health</a><a> |
</a><a href="https://www.hhs.gov/" style="color: white" target="_blank">U.S. Department of Health and Human Services</a> | <a href="https://www.usa.gov/" style="color: white" target="_blank">USA.gov</a>
</td>
</tr>
</table>
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding:0;height: 64px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 15px; letter-spacing: 0; line-height: 21px; text-align: center;">
<p style="margin:0;">Connect for Cancer Prevention Study, the Connect for Cancer Prevention Study logo, and “Connect today. Prevent cancer tomorrow.”
are trademarks of the U.S. Department of Health and Human Services (HHS).®</p>
</td>
</tr>
</table>
</td>
</tr>
<p style="margin:0;">Connect for Cancer Prevention Study</p>
<a href="https://www.cancer.gov/" style="color: white" target="_blank">National Cancer Institute</a> | <a
href="https://www.nih.gov" style="color: white" target="_blank">National Institutes of Health</a><a> |
</a><a href="https://www.hhs.gov/" style="color: white" target="_blank">U.S. Department of Health and
Human Services</a> | <a href="https://www.usa.gov/" style="color: white" target="_blank">USA.gov</a>
</td>
</tr>
</table>
<table width="100%" style="border-spacing:0;">
<tr>
<td
style="padding:0;height: 64px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 15px; letter-spacing: 0; line-height: 21px; text-align: center;">
<p style="margin:0;">Connect for Cancer Prevention Study, the Connect for Cancer Prevention Study logo,
and “Connect today. Prevent cancer tomorrow.”
are trademarks of the U.S. Department of Health and Human Services (HHS).®</p>
</td>
</tr>
</table>
</td>
<!--[if (gte mso 9)|(IE)]>
</table>
<![endif]-->
</table>
</body>
</html>
</table>
</body>

</html>

0 comments on commit 376fef7

Please sign in to comment.