]> git.0d.be Git - django-panik-newsletter.git/commitdiff
modernize newsletter style
authorFrédéric Péters <fpeters@0d.be>
Fri, 9 Feb 2018 15:23:57 +0000 (16:23 +0100)
committerFrédéric Péters <fpeters@0d.be>
Fri, 9 Feb 2018 15:24:12 +0000 (16:24 +0100)
newsletter/templates/newsletter/email_body.html
newsletter/templates/newsletter/email_body.txt

index 1869bb6bb25c9a39f805099ccef659ef4b43aad0..05ff5da855a94bbf797068574a257c3cbffe3eb3 100644 (file)
@@ -1 +1,168 @@
-{{html_part}}
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="x-apple-disable-message-reformatting">
+    <title></title>
+    <style>
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+        }
+
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        div[style*="margin: 16px 0"] {
+            margin:0 !important;
+        }
+
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+        table table table {
+            table-layout: auto;
+        }
+
+        img {
+            -ms-interpolation-mode:bicubic;
+        }
+
+        *[x-apple-data-detectors] {
+            color: inherit !important;
+            text-decoration: none !important;
+        }
+
+        .x-gmail-data-detectors,
+        .x-gmail-data-detectors *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+        }
+
+
+        .button-link {
+            text-decoration: none !important;
+        }
+
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
+            .email-container {
+                min-width: 375px !important;
+            }
+        }
+
+        h2, h3 { font-family: "Reglo", sans-serif; }
+        h3 { margin-bottom: 0; }
+        h3 + p { margin-top: 0; }
+        p strong { color: black; }
+        h3 strong { text-transform: uppercase; color: blue; }
+        p a { color: black; text-decoration: none; border-bottom: 1px dotted black; }
+        p a:hover { border-bottom: 1px solid black; }
+        img { max-width: 100%; }
+
+
+    </style>
+
+    <style>
+        .button-td,
+        .button-a {
+            transition: all 100ms ease-in;
+        }
+        .button-td:hover,
+        .button-a:hover {
+            background: #333333 !important;
+            border-color: #333333 !important;
+        }
+    </style>
+
+</head>
+<body width="100%" bgcolor="#F2F2F2" style="margin: 0; mso-line-height-rule: exactly;">
+    <center style="width: 100%; background: #F2F2F2;">
+
+        <div style="max-width: 600px; margin: auto;" class="email-container">
+            <!--[if mso]>
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
+            <tr>
+            <td>
+            <![endif]-->
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+              <tr>
+                <td style="padding: 20px 0; text-align: center; font-family: sans-serif;">
+                  <span style="font-size: 15px; line-height: 20px;">Cette semaine sur Radio Panik</span>
+                </td>
+              </tr>
+            </table>
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+
+                <tr>
+                    <td bgcolor="#3A3A3A">
+                            &nbsp;
+                    </td>
+                </tr>
+
+                <tr>
+                    <td bgcolor="#ffffff">
+                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                                <td style="overflow-wrap: break-word; word-wrap: break-word; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 22px; color: #333333;">
+
+     {% block content %}
+       {{html_part}}
+     {% endblock %}
+                                </td>
+                                </tr>
+                        </table>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td bgcolor="#3A3A3A">
+                            &nbsp;
+                    </td>
+                </tr>
+
+                <tr>
+                    <td height="10" style="font-size: 0; line-height: 0;">
+                        &nbsp;
+                    </td>
+                </tr>
+
+            </table>
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+              <tr>
+                <td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;" class="x-gmail-data-detectors">
+                  {% block footer %}
+                  <a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/newsletter-panik">Désabonnement</a>
+                  {% endblock %}
+                </td>
+              </tr>
+            </table>
+            <!--[if mso]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </div>
+    </center>
+    <!-- adapted from http://tedgoas.github.io/Cerberus templates -->
+</body>
+</html>
index 6d41fd1ae69aaaa2de194fb31f3dd5d1892738f7..054a734d6cda08f842cc9204e6e6eb592b62a14d 100644 (file)
@@ -1 +1,4 @@
 {{text_part}}
+
+-- 
+Désabonnement : https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/newsletter-panik