src/templates/messages/base.html

   1 <!DOCTYPE html>
   2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   3 <head>
   4         {# Based on https://www.cerberusemail.com #}
   5     <meta charset="utf-8">
   6
   7         {# Enable "responsiveness" #}
   8     <meta name="viewport" content="width=device-width">
   9
  10         {# Use the latest (edge) version of IE rendering engine #}
  11     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12
  13         {# Disable auto-scale in iOS 10 Mail entirely #}
  14     <meta name="x-apple-disable-message-reformatting">
  15
  16         {# Tell iOS not to automatically link certain text strings #}
  17     <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
  18
  19         {# Declare supported color schemes #}
  20     <meta name="color-scheme" content="light dark">
  21     <meta name="supported-color-schemes" content="light dark">
  22
  23         {# Title #}
  24     <title>{% block title %}{% end block %}</title>
  25
  26     {# Make background images in 72ppi Outlook render at correct size #}
  27     <!--[if gte mso 9]>
  28     <xml>
  29         <o:OfficeDocumentSettings>
  30             <o:PixelsPerInch>96</o:PixelsPerInch>
  31         </o:OfficeDocumentSettings>
  32     </xml>
  33     <![endif]-->
  34
  35    {# Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font #}
  36     <!--[if mso]>
  37         <style>
  38             * {
  39                 font-family: sans-serif !important;
  40             }
  41         </style>
  42     <![endif]-->
  43
  44     {# All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks.
  45                 More on that here: https://web.archive.org/web/20190717120616/http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ #}
  46     <!--[if !mso]>
  47                 <style>
  48                         {% include "fonts.css" %}
  49                 </style>
  50     <![endif]-->
  51
  52         {# Import the main CSS #}
  53     <style>
  54                 {# Tell the email client that both light and dark styles are provided #}
  55                 :root {
  56                         color-scheme: light dark
  57                         supported-color-schemes: light dark
  58                 }
  59
  60                 {% include "main.css" %}
  61     </style>
  62 </head>
  63
  64 <body class="bg">
  65         <center role="article" aria-roledescription="email" lang="en" class="bg">
  66                 <!--[if mso | IE]>
  67                 <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="bg">
  68                 <tr>
  69                 <td>
  70                 <![endif]-->
  71                         {# Visually Hidden Pre-header Text #}
  72                         <div class="pre-header" aria-hidden="true">
  73                                 {% block preview %}{% end block %}
  74                         </div>
  75
  76                         {# Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview #}
  77                         <div class="whitespace">
  78                                 &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
  79                         </div>
  80
  81                         <div class="container">
  82                                 <!--[if mso]>
  83                                 <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  84                                 <tr>
  85                                 <td>
  86                                 <![endif]-->
  87
  88                                 {# Body #}
  89                                 <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0">
  90                                         {% block body %}
  91                                                 {# Header #}
  92                                                 <tr class="header">
  93                                                         <td>
  94                                                                 <h1>
  95                                                                         IPFire<span class="has-text-primary">_</span>
  96                                                                 </h1>
  97                                                         </td>
  98                                                 </tr>
  99
 100                                                 {# Hero #}
 101                                                 {% block hero %}{% end block %}
 102
 103                                                 {# Content #}
 104                                                 <tr class="content">
 105                                                         <td>
 106                                                                 <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
 107                                                                         {% block content %}{% end block %}
 108                                                                 </tabke>
 109                                                         </td>
 110                                                 </tr>
 111                                         {% end block %}
 112                                 </table>
 113
 114                                 {# Footer #}
 115                                 <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0">
 116                                         <tr class="footer">
 117                                                 <td>
 118                                                         {{ _("The IPFire Project") }},
 119                                                         {{ _("c/o") }} Lightning Wire Labs GmbH,
 120                                                         <span class="unstyle-auto-detected-links">Gerhardstraße 8, 45711 Datteln, Germany</span>
 121
 122                                                         <br><br>
 123
 124                                                         {% block footer %}{% end block %}
 125                                                 </td>
 126                                         </tr>
 127                                 </table>
 128
 129                                 <!--[if mso]>
 130                                 </td>
 131                                 </tr>
 132                                 </table>
 133                                 <![endif]-->
 134                         </div>
 135
 136                 <!--[if mso | IE]>
 137                 </td>
 138                 </tr>
 139                 </table>
 140                 <![endif]-->
 141     </center>
 142 </body>
 143 </html>