From 16b0b0441b98314dd3aee06feef2a369d6bb7a52 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Mon, 29 Oct 2018 15:17:48 +0530
Subject: [PATCH] Fix the horrible HTML typos in the default template

---
 default-template.html | 100 ++++++++++++++++++++++++------------------
 1 file changed, 57 insertions(+), 43 deletions(-)
diff --git a/default-template.html b/default-template.html
index 0ed44ec..08f207d 100644
--- a/default-template.html
+++ b/default-template.html
@@ -1,52 +1,66 @@
 <!doctype html>
 <html>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 
-    <style>
-        body {
-            background: #F0F1F3;
-            font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
-            font-size: 15px;
-            line-height: 26px;
-            color: #444;
-        }
-
-        .wrap {
-            background: #fff;
-            padding: 30px;
-            max-width: 525px;
-            margin: 60px auto 30px auto;
-            border-radius: 5px;
-        }
-
-        .footer {
-            text-align: center;
-            font-size: 12px;
-            color: #888;
-        }
-            .footer a {
-                color: #888;
+        <style>
+            body {
+                background-color: #F0F1F3;
+                font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
+                font-size: 15px;
+                line-height: 26px;
+                margin: 0;
+                color: #444;
             }
 
-        a {
-            color: #7f2aff;
-        }
-        a:hover {
-            color: #111;
-        }
-    </style>
-</html>
-<body>
+            .wrap {
+                background-color: #fff;
+                padding: 30px;
+                max-width: 525px;
+                margin: 0 auto;
+                border-radius: 5px;
+            }
 
-<div class="wrap">
-    {{ template "content" . }}
-</div>
+            .footer {
+                text-align: center;
+                font-size: 12px;
+                color: #888;
+            }
+                .footer a {
+                    color: #888;
+                }
 
-<div class="footer">
-    <p>Don't want to receive these e-mails? <a href="{{ .UnsubscribeURL }}">Unsubscribe</a></p>
-    <p>Powered by <a href="https://listmonk.app" target="_blank">listmonk</a></p>
-</div>
+            .gutter {
+                padding: 30px;
+            }
 
+            a {
+                color: #7f2aff;
+            }
+                a:hover {
+                    color: #111;
+                }
+            @media screen and (max-width: 600px) {
+                .wrap {
+                    max-width: auto;
+                }
+                .gutter {
+                    padding: 10px;
+                }
+            }
+        </style>
+    </head>
+<body style="background-color: #F0F1F3;">
+    <div class="gutter">&nbsp;</div>
+    <div class="wrap">
+        {{ template "content" . }}
+    </div>
+    
+    <div class="footer">
+        <p>Don't want to receive these e-mails? <a href="{{ .UnsubscribeURL }}">Unsubscribe</a></p>
+        <p>Powered by <a href="https://listmonk.app" target="_blank">listmonk</a></p>
+    </div>
+    <div class="gutter">&nbsp;</div>
 </body>
-</html>
\ No newline at end of file
+</html>
