From 2404710e66387f55746eec8d3c8f67abdfbd0956 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 1 May 2020 11:06:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20tiny=20font=20sizes=20so?=
 =?UTF-8?q?metimes=20seen=20in=20member=20emails=20on=20gmail=20mobile=20a?=
 =?UTF-8?q?pps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients
---
 core/server/services/mega/template.js | 75 +++++++++++++--------------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/core/server/services/mega/template.js b/core/server/services/mega/template.js
index 010e1992d5..ca4d361d38 100644
--- a/core/server/services/mega/template.js
+++ b/core/server/services/mega/template.js
@@ -62,7 +62,6 @@ table td {
     margin: 0 auto !important;
     /* makes it centered */
     max-width: 600px;
-    width: 600px;
 }
 
 /* This should also be a block element, so that it will fill 100% of the .container */
@@ -627,148 +626,148 @@ figure blockquote p {
 ------------------------------------- */
 @media only screen and (max-width: 620px) {
 
-    table[class=body] {
+    table.body {
         width: 100%;
         min-width: 100%;
     }
 
-    table[class=body] p,
-    table[class=body] ul,
-    table[class=body] ol,
-    table[class=body] td,
-    table[class=body] span {
+    table.body p,
+    table.body ul,
+    table.body ol,
+    table.body td,
+    table.body span {
         font-size: 16px !important;
     }
 
-    table[class=body] pre {
+    table.body pre {
         white-space: pre-wrap !important;
         word-break: break-word !important;
     }
 
-    table[class=body] .wrapper,
-    table[class=body] .article {
+    table.body .wrapper,
+    table.body .article {
         padding: 0 10px !important;
     }
 
-    table[class=body] .content {
+    table.body .content {
         padding: 0 !important;
     }
 
-    table[class=body] .container {
+    table.body .container {
         padding: 0 !important;
         width: 100% !important;
     }
 
-    table[class=body] .main {
+    table.body .main {
         border-left-width: 0 !important;
         border-radius: 0 !important;
         border-right-width: 0 !important;
     }
 
-    table[class=body] .btn table {
+    table.body .btn table {
         width: 100% !important;
     }
 
-    table[class=body] .btn a {
+    table.body .btn a {
         width: 100% !important;
     }
 
-    table[class=body] .img-responsive {
+    table.body .img-responsive {
         height: auto !important;
         max-width: 100% !important;
         width: auto !important;
     }
 
-    table[class=body] .site-icon img {
+    table.body .site-icon img {
         width: 40px !important;
         height: 40px !important;
     }
 
-    table[class=body] .site-url a {
+    table.body .site-url a {
         font-size: 14px !important;
         padding-bottom: 15px !important;
     }
 
-    table[class=body] .post-meta {
+    table.body .post-meta {
         white-space: normal !important;
         font-size: 12px !important;
         line-height: 1.5em;
     }
 
-    table[class=body] .view-online-link,
-    table[class=body] .footer,
-    table[class=body] .footer a {
+    table.body .view-online-link,
+    table.body .footer,
+    table.body .footer a {
         font-size: 12px !important;
     }
 
-    table[class=body] .post-title a {
+    table.body .post-title a {
         font-size: 32px !important;
         line-height: 1.15em !important;
     }
 
-    table[class=body] .kg-bookmark-card {
+    table.body .kg-bookmark-card {
         width: 90vw !important;
     }
 
-    table[class=body] .kg-bookmark-thumbnail {
+    table.body .kg-bookmark-thumbnail {
         display: none !important;
     }
 
-    table[class=body] .kg-bookmark-metadata span {
+    table.body .kg-bookmark-metadata span {
         font-size: 13px !important;
     }
 
-    table[class=body] .kg-embed-card {
+    table.body .kg-embed-card {
         max-width: 90vw !important;
     }
 
-    table[class=body] h1 {
+    table.body h1 {
         font-size: 32px !important;
         line-height: 1.3em !important;
     }
 
-    table[class=body] h2 {
+    table.body h2 {
         font-size: 26px !important;
         line-height: 1.22em !important;
     }
 
-    table[class=body] h3 {
+    table.body h3 {
         font-size: 21px !important;
         line-height: 1.25em !important;
     }
 
-    table[class=body] h4 {
+    table.body h4 {
         font-size: 19px !important;
         line-height: 1.3em !important;
     }
 
-    table[class=body] h5 {
+    table.body h5 {
         font-size: 16px !important;
         line-height: 1.4em !important;
     }
 
-    table[class=body] h6 {
+    table.body h6 {
         font-size: 16px !important;
         line-height: 1.4em !important;
     }
 
-    table[class=body] blockquote {
+    table.body blockquote {
         font-size: 17px !important;
         line-height: 1.6em !important;
         margin-bottom: 0 !important;
         padding-left: 15px !important;
     }
 
-    table[class=body] blockquote + * {
+    table.body blockquote + * {
         margin-top: 1.5em !important;
     }
 
-    table[class=body] hr {
+    table.body hr {
         margin: 2em 0 !important;
     }
 
-    table[class=body] figcaption,
-    table[class=body] figcaption a {
+    table.body figcaption,
+    table.body figcaption a {
         font-size: 13px !important;
     }