Improve header links in News emails

thechangelog · Nov 6, 2024 · 0db349c · 0db349c
1 parent 4926360
commit 0db349c
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 34 deletions.
diff --git a/assets/email/email.scss b/assets/email/email.scss
@@ -7,13 +7,13 @@ $open-sans: "Open Sans", Helvetica, Arial, Calibri, sans-serif;
 $roboto-mono: "Roboto Mono", Menlo, "Courier New", Courier, monospace;
 
 // Inter weights
-$open-sans-regular:    400;
-$open-sans-bold:       500;
+$open-sans-regular: 400;
+$open-sans-bold: 500;
 $open-sans-extra-bold: 700;
 
 // Roboto weights
-$roboto-mono-regular:  400;
-$roboto-mono-bold:     700;
+$roboto-mono-regular: 400;
+$roboto-mono-bold: 700;
 
 // Colors
 $white: #ffffff;
@@ -43,18 +43,18 @@ body {
 
 @media (max-width: 700px) {
   .hide-on-mobile {
-    display:none !important
+    display: none !important;
   }
   .show-on-mobile {
-    display:block !important
+    display: block !important;
   }
   .last-of-type-on-mobile {
-    margin-bottom:0 !important
+    margin-bottom: 0 !important;
   }
 }
 
 .last-of-type {
-  margin-bottom: 0 !important
+  margin-bottom: 0 !important;
 }
 
 .meta {
@@ -71,21 +71,26 @@ body {
     padding: 0 1em;
   }
 
-  input[type=email] {
+  input[type="email"] {
     max-width: 100px;
   }
 
   input::placeholder {
     color: $dark-grey;
-    opacity: .75;
+    opacity: 0.75;
   }
 }
 
 .content {
   margin-bottom: 32px;
-  &:last-of-type { margin-bottom: 0 !important; }
+  &:last-of-type {
+    margin-bottom: 0 !important;
+  }
 
-  h1, h2, h3, h4 {
+  h1,
+  h2,
+  h3,
+  h4 {
     color: $black;
 
     a {
@@ -140,7 +145,8 @@ body {
       color: $black;
     }
   }
-  p, li {
+  p,
+  li {
     font-size: 17px;
     line-height: 1.6;
     bold {
@@ -155,12 +161,13 @@ body {
     }
     @media (max-width: 700px) {
       img {
-        max-width:100%;
+        max-width: 100%;
         margin: 10px 0;
       }
     }
   }
-  p code, li code {
+  p code,
+  li code {
     background-color: #f8f8f8;
     border: 1px solid #eaeaea;
     border-radius: 3px;
@@ -189,23 +196,27 @@ body {
     }
   }
 
-  ul, ol {
+  ul,
+  ol {
     margin: 30px 0;
     padding-left: 20px;
   }
   li {
     margin: 0 0 15px 0;
   }
 
-  code, pre {
+  code,
+  pre {
     margin: 0;
     padding: 0;
   }
   pre {
     display: block;
     width: 100%;
     margin: 0 0 20px 0;
-    code { display: block; }
+    code {
+      display: block;
+    }
   }
   code {
     display: inline-block;
@@ -215,11 +226,12 @@ body {
     font-size: 15px;
     padding: 15px;
   }
-
 }
 
 @media (max-width: 700px) {
-  table { width: 100%; }
+  table {
+    width: 100%;
+  }
 }
 
 .header {
@@ -236,8 +248,7 @@ body {
   p {
     font-size: 12px;
     line-height: 1.5;
-    margin: 0 0 20px 0;
-    padding: 0 40px
+    margin: 15px 0;
   }
 }
 
@@ -254,12 +265,25 @@ body {
     font-size: 13px;
     line-height: 1.5;
     margin: 0 0 20px 0;
-    padding: 0 40px
+    padding: 0 40px;
   }
 }
 
-.spacer-10 { display:block; height: 10px; width: 1px; }
-.spacer-20 { display:block; height: 20px; width: 1px; }
+.spacer-10 {
+  display: block;
+  height: 10px;
+  width: 1px;
+}
+.spacer-15 {
+  display: block;
+  height: 15px;
+  width: 1px;
+}
+.spacer-20 {
+  display: block;
+  height: 20px;
+  width: 1px;
+}
 
 @media (prefers-color-scheme: dark) {
   body {
@@ -278,7 +302,10 @@ body {
   }
 
   .content {
-    h1, h2, h3, h4 {
+    h1,
+    h2,
+    h3,
+    h4 {
       color: $off-white;
 
       a {
@@ -296,13 +323,15 @@ body {
       }
     }
 
-    p code, li code {
+    p code,
+    li code {
       background-color: #333333;
       border: 1px solid #212121;
     }
   }
 
-  .footer, .header {
+  .footer,
+  .header {
     color: $off-white;
 
     a {
@@ -313,6 +342,8 @@ body {
       }
     }
 
-    @media (max-width: 700px) { background-color: $dark-grey; }
+    @media (max-width: 700px) {
+      background-color: $dark-grey;
+    }
   }
 }
diff --git a/lib/changelog_web/templates/email/news_published.html.heex b/lib/changelog_web/templates/email/news_published.html.heex
@@ -44,11 +44,14 @@
                       <tbody>
                         <tr>
                           <td class="header" align="center">
-                            <img class="spacer-10" src={url(~p"/images/email/spacer_1.gif")}>
-                            <p class="last-of-type"><%= link("View on Web", to: url(~p"/#{@episode.podcast.slug}/#{@episode.slug}"), title: "View this newsletter in your web browser") %>
-                              &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;
-                              <%= link("Audio Edition", to: EpisodeView.audio_url(@episode), title: "Direct link to the audio") %>
-                              &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;
+                            <p><%= link("Web View", to: url(~p"/#{@episode.podcast.slug}/#{@episode.slug}"), title: "View this newsletter in your web browser") %>
+                              &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                              <%= link("Audio", to: EpisodeView.audio_url(@episode), title: "Direct link to the audio") %>
+                              &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                              <%= link("Submit", to: url(~p"/news/submit"), title: "Submit news for coverage") %>
+                              &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                              <%= link("Merch", to: "https://merch.changelog.com", title: "Visit our Merch shop") %>
+                              &nbsp;&nbsp;&middot;&nbsp;&nbsp;
                               <%= link("Changelog++", to: url(~p"/++"), title: "It's better!") %>
                             </p>
                           </td>