Skip to content

Commit

Permalink
Increase email template compatibility
Browse files Browse the repository at this point in the history 
Replace font awesome with png icons
Add fallback fonts for header
  • Loading branch information
@Brutus5000
Brutus5000 committed Feb 17, 2022
1 parent 500b8c3 commit f3248b6
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 33 deletions.
23 changes: 12 additions & 11 deletions config.template/faf-java-api/mail/account-activation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
</style>
Expand Down Expand Up @@ -78,17 +80,16 @@
.footer a:hover {
color: #d32a0e;
}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous">
</head>
<body style="word-spacing:normal;background-color:#fafafa;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
FAForever account activation
</div>
<div style="background-color:#fafafa;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="https://faforever.com/images/index-background.jpg" type="tile" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://faforever.com/images/index-background.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;margin:0px auto;max-width:600px;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="https://content.faforever.com/images/background/email-header.jpg" type="tile" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://content.faforever.com/images/background/email-header.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table align="center" background="https://faforever.com/images/index-background.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://faforever.com/images/index-background.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;width:100%;">
<table align="center" background="https://content.faforever.com/images/background/email-header.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://content.faforever.com/images/background/email-header.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
Expand All @@ -114,7 +115,7 @@
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Yanone Kaffeesatz;font-size:40px;line-height:1;text-align:center;color:white;">
<div style="font-family:Yanone Kaffeesatz, Open Sans, Helvetica, Arial, sans-serif;font-size:40px;line-height:1;text-align:center;color:white;">
Forged Alliance Forever
</div> </td>
</tr>
Expand Down Expand Up @@ -221,11 +222,11 @@ <h1>Activate your account</h1>
<td align="center" style="font-size:0px;padding:2px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:white;">
<ul>
<li> <a target="_blank" href="https://discord.com/invite/hgvj6Af"> <i class="fab fa-discord" aria-label="FAF Discord"></i> </a> </li>
<li> <a target="_blank" href="https://www.youtube.com/c/ForgedAllianceForever"> <i class="fab fa-youtube" aria-label="FAF Youtube"></i> </a> </li>
<li> <a target="_blank" href="https://www.facebook.com/ForgedAllianceForever"> <i class="fab fa-facebook" aria-label="FAF Facebook"></i> </a> </li>
<li> <a target="_blank" href="https://github.com/FAForever/"> <i class="fab fa-github" aria-label="FAF Github"></i> </a> </li>
<li> <a target="_blank" href="https://www.patreon.com/faf"> <i class="fab fa-patreon" aria-label="FAF Patreon"></i> </a> </li>
<li> <a target="_blank" href="https://discord.com/invite/hgvj6Af"> <img src="https://content.faforever.com/images/icons/discord-white-20px.png" alt="Discord"> </a> </li>
<li> <a target="_blank" href="https://www.youtube.com/c/ForgedAllianceForever"> <img src="https://content.faforever.com/images/icons/youtube-white-20px.png" alt="Youtube"> </a> </li>
<li> <a target="_blank" href="https://www.facebook.com/ForgedAllianceForever"> <img src="https://content.faforever.com/images/icons/facebook-white-20px.png" alt="Facebook"> </a> </li>
<li> <a target="_blank" href="https://github.com/FAForever/"> <img src="https://content.faforever.com/images/icons/github-white-20px.png" alt="Github"> </a> </li>
<li> <a target="_blank" href="https://www.patreon.com/faf"> <img src="https://content.faforever.com/images/icons/patreon-white-20px.png" alt="Patreon"> </a> </li>
</ul>
<p> <a href="https://wwww.faforever.com">www.faforever.com</a> </p>
</div> </td>
Expand All @@ -241,4 +242,4 @@ <h1>Activate your account</h1>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>
</html>
23 changes: 12 additions & 11 deletions config.template/faf-java-api/mail/password-reset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
</style>
Expand Down Expand Up @@ -78,17 +80,16 @@
.footer a:hover {
color: #d32a0e;
}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous">
</head>
<body style="word-spacing:normal;background-color:#fafafa;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Password reset
</div>
<div style="background-color:#fafafa;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="https://faforever.com/images/index-background.jpg" type="tile" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://faforever.com/images/index-background.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;margin:0px auto;max-width:600px;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="https://content.faforever.com/images/background/email-header.jpg" type="tile" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://content.faforever.com/images/background/email-header.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table align="center" background="https://faforever.com/images/index-background.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://faforever.com/images/index-background.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;width:100%;">
<table align="center" background="https://content.faforever.com/images/background/email-header.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://content.faforever.com/images/background/email-header.jpg') center top / cover repeat;background-position:center top;background-repeat:repeat;background-size:cover;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
Expand All @@ -114,7 +115,7 @@
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Yanone Kaffeesatz;font-size:40px;line-height:1;text-align:center;color:white;">
<div style="font-family:Yanone Kaffeesatz, Open Sans, Helvetica, Arial, sans-serif;font-size:40px;line-height:1;text-align:center;color:white;">
Forged Alliance Forever
</div> </td>
</tr>
Expand Down Expand Up @@ -214,11 +215,11 @@ <h1>Password reset</h1>
<td align="center" style="font-size:0px;padding:2px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:white;">
<ul>
<li> <a target="_blank" href="https://discord.com/invite/hgvj6Af"> <i class="fab fa-discord" aria-label="FAF Discord"></i> </a> </li>
<li> <a target="_blank" href="https://www.youtube.com/c/ForgedAllianceForever"> <i class="fab fa-youtube" aria-label="FAF Youtube"></i> </a> </li>
<li> <a target="_blank" href="https://www.facebook.com/ForgedAllianceForever"> <i class="fab fa-facebook" aria-label="FAF Facebook"></i> </a> </li>
<li> <a target="_blank" href="https://github.com/FAForever/"> <i class="fab fa-github" aria-label="FAF Github"></i> </a> </li>
<li> <a target="_blank" href="https://www.patreon.com/faf"> <i class="fab fa-patreon" aria-label="FAF Patreon"></i> </a> </li>
<li> <a target="_blank" href="https://discord.com/invite/hgvj6Af"> <img src="https://content.faforever.com/images/icons/discord-white-20px.png" alt="Discord"> </a> </li>
<li> <a target="_blank" href="https://www.youtube.com/c/ForgedAllianceForever"> <img src="https://content.faforever.com/images/icons/youtube-white-20px.png" alt="Youtube"> </a> </li>
<li> <a target="_blank" href="https://www.facebook.com/ForgedAllianceForever"> <img src="https://content.faforever.com/images/icons/facebook-white-20px.png" alt="Facebook"> </a> </li>
<li> <a target="_blank" href="https://github.com/FAForever/"> <img src="https://content.faforever.com/images/icons/github-white-20px.png" alt="Github"> </a> </li>
<li> <a target="_blank" href="https://www.patreon.com/faf"> <img src="https://content.faforever.com/images/icons/patreon-white-20px.png" alt="Patreon"> </a> </li>
</ul>
<p> <a href="https://wwww.faforever.com">www.faforever.com</a> </p>
</div> </td>
Expand All @@ -234,4 +235,4 @@ <h1>Password reset</h1>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>
</html>
Loading

0 comments on commit f3248b6

Please sign in to comment.