Better looking newsletter (specially in Android Gmail).

4 files changed, 250 insertions, 692 deletions

diff --git a/themes/newsletter/static/css/ink.css b/themes/newsletter/static/css/ink.css
deleted file mode 100644
index ea216a5..0000000
--- a/themes/newsletter/static/css/ink.css
+++ /dev/null
@@ -1,513 +0,0 @@
-/**********************************************
-* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
-**********************************************/
-
-/* Client-specific Styles & Reset */
-
-#outlook a { 
-  padding:0; 
-} 
-
-body{ 
-  width:100% !important; 
-  min-width: 100%;
-  -webkit-text-size-adjust:100%; 
-  -ms-text-size-adjust:100%; 
-  margin:0; 
-  padding:0;
-}
-
-.ExternalClass { 
-  width:100%;
-} 
-
-.ExternalClass, 
-.ExternalClass p, 
-.ExternalClass span, 
-.ExternalClass font, 
-.ExternalClass td, 
-.ExternalClass div { 
-  line-height: 100%; 
-} 
-
-#backgroundTable { 
-  margin:0; 
-  padding:0; 
-  width:100% !important; 
-  line-height: 100% !important; 
-}
-
-img { 
-  outline:none; 
-  text-decoration:none; 
-  -ms-interpolation-mode: bicubic;
-  width: auto;
-  max-width: 100%; 
-  float: left; 
-  clear: both; 
-  display: block;
-}
-
-center {
-  width: 100%;
-  min-width: 580px;
-}
-
-a img { 
-  border: none;
-}
-
-p {
-  margin: 0 0 0 10px;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-td { 
-  word-break: break-word;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-  border-collapse: collapse !important; 
-}
-
-table, tr, td {
-  padding: 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-hr {
-  color: #d9d9d9; 
-  background-color: #d9d9d9; 
-  height: 1px; 
-  border: none;
-}
-
-/* Responsive Grid */
-
-table.body {
-  height: 100%;
-  width: 100%;
-}
-
-table.container {
-  width: 580px;
-  margin: 0 auto;
-  text-align: inherit;
-}
-
-table.row { 
-  padding: 0px; 
-  width: 100%;
-  position: relative;
-}
-
-table.container table.row {
-  display: block;
-}
-
-td.wrapper {
-  padding: 10px 20px 0px 0px;
-  position: relative;
-}
-
-table.columns,
-table.column {
-  margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
-  padding: 0px 0px 10px; 
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
-  padding-right: 10px;
-}
-
-td.sub-column, td.sub-columns {
-  min-width: 0px;
-}
-
-table.row td.last,
-table.container td.last {
-  padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-table.one center { min-width: 30px; }
-table.two center { min-width: 80px; }
-table.three center { min-width: 130px; }
-table.four center { min-width: 180px; }
-table.five center { min-width: 230px; }
-table.six center { min-width: 280px; }
-table.seven center { min-width: 330px; }
-table.eight center { min-width: 380px; }
-table.nine center { min-width: 430px; }
-table.ten center { min-width: 480px; }
-table.eleven center { min-width: 530px; }
-table.twelve center { min-width: 580px; }
-
-table.one .panel center { min-width: 10px; }
-table.two .panel center { min-width: 60px; }
-table.three .panel center { min-width: 110px; }
-table.four .panel center { min-width: 160px; }
-table.five .panel center { min-width: 210px; }
-table.six .panel center { min-width: 260px; }
-table.seven .panel center { min-width: 310px; }
-table.eight .panel center { min-width: 360px; }
-table.nine .panel center { min-width: 410px; }
-table.ten .panel center { min-width: 460px; }
-table.eleven .panel center { min-width: 510px; }
-table.twelve .panel center { min-width: 560px; }
-
-.body .columns td.one,
-.body .column td.one { width: 8.333333%; }
-.body .columns td.two,
-.body .column td.two { width: 16.666666%; }
-.body .columns td.three,
-.body .column td.three { width: 25%; }
-.body .columns td.four,
-.body .column td.four { width: 33.333333%; }
-.body .columns td.five,
-.body .column td.five { width: 41.666666%; }
-.body .columns td.six,
-.body .column td.six { width: 50%; }
-.body .columns td.seven,
-.body .column td.seven { width: 58.333333%; }
-.body .columns td.eight,
-.body .column td.eight { width: 66.666666%; }
-.body .columns td.nine,
-.body .column td.nine { width: 75%; }
-.body .columns td.ten,
-.body .column td.ten { width: 83.333333%; }
-.body .columns td.eleven,
-.body .column td.eleven { width: 91.666666%; }
-.body .columns td.twelve,
-.body .column td.twelve { width: 100%; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.expander {
-  visibility: hidden;
-  width: 0px;
-  padding: 0 !important;
-}
-
-table.columns .text-pad,
-table.column .text-pad {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
-  padding-left: 10px;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
-  padding-right: 10px;
-}
-
-/* Block Grid */
-
-.block-grid {
-  width: 100%;
-  max-width: 580px;
-}
-
-.block-grid td {
-  display: inline-block;
-  padding:10px;
-}
-
-.two-up td {
-  width:270px;
-}
-
-.three-up td {
-  width:173px;
-}
-
-.four-up td {
-  width:125px;
-}
-
-.five-up td {
-  width:96px;
-}
-
-.six-up td {
-  width:76px;
-}
-
-.seven-up td {
-  width:62px;
-}
-
-.eight-up td {
-  width:52px;
-}
-
-/* Alignment & Visibility Classes */
-
-table.center, td.center {
-  text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
-  text-align: center;
-}
-
-span.center {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-
-img.center {
-  margin: 0 auto;
-  float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
-  display: none;
-}
-
-/* Typography */
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
-  color: #222222;
-  font-family: "Helvetica", "Arial", sans-serif; 
-  font-weight: normal; 
-  padding:0; 
-  margin: 0;
-  text-align: left; 
-  line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  word-break: normal;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {font-size: 32px;}
-h4 {font-size: 28px;}
-h5 {font-size: 24px;}
-h6 {font-size: 20px;}
-body, table.body, p, td {font-size: 14px;line-height:19px;}
-
-p.lead, p.lede, p.leed {
-  font-size: 18px;
-  line-height:21px;
-}
-
-p { 
-  margin-bottom: 10px;
-}
-
-small {
-  font-size: 10px;
-}
-
-a {
-  color: #2ba6cb; 
-  text-decoration: none;
-}
-
-a:hover { 
-  color: #2795b6 !important;
-}
-
-a:active { 
-  color: #2795b6 !important;
-}
-
-a:visited { 
-  color: #2ba6cb !important;
-}
-
-h1 a, 
-h2 a, 
-h3 a, 
-h4 a, 
-h5 a, 
-h6 a {
-  color: #2ba6cb;
-}
-
-h1 a:active, 
-h2 a:active,  
-h3 a:active, 
-h4 a:active, 
-h5 a:active, 
-h6 a:active { 
-  color: #2ba6cb !important; 
-} 
-
-h1 a:visited, 
-h2 a:visited,  
-h3 a:visited, 
-h4 a:visited, 
-h5 a:visited, 
-h6 a:visited { 
-  color: #2ba6cb !important; 
-} 
-
-/* Outlook First */
-
-body.outlook p {
-  display: inline !important;
-}
-
-/*  Media Queries */
-
-@media only screen and (max-width: 600px) {
-
-  table[class="body"] img {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-
-  table[class="body"] .row {
-    width: 100% !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper {
-    display: block !important;
-    padding-right: 0 !important;
-  }
-
-  table[class="body"] .columns,
-  table[class="body"] .column {
-    table-layout: fixed !important;
-    float: none !important;
-    width: 100% !important;
-    padding-right: 0px !important;
-    padding-left: 0px !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper.first .columns,
-  table[class="body"] .wrapper.first .column {
-    display: table !important;
-  }
-
-  table[class="body"] table.columns td,
-  table[class="body"] table.column td {
-    width: 100% !important;
-  }
-
-  table[class="body"] .columns td.one,
-  table[class="body"] .column td.one { width: 8.333333% !important; }
-  table[class="body"] .columns td.two,
-  table[class="body"] .column td.two { width: 16.666666% !important; }
-  table[class="body"] .columns td.three,
-  table[class="body"] .column td.three { width: 25% !important; }
-  table[class="body"] .columns td.four,
-  table[class="body"] .column td.four { width: 33.333333% !important; }
-  table[class="body"] .columns td.five,
-  table[class="body"] .column td.five { width: 41.666666% !important; }
-  table[class="body"] .columns td.six,
-  table[class="body"] .column td.six { width: 50% !important; }
-  table[class="body"] .columns td.seven,
-  table[class="body"] .column td.seven { width: 58.333333% !important; }
-  table[class="body"] .columns td.eight,
-  table[class="body"] .column td.eight { width: 66.666666% !important; }
-  table[class="body"] .columns td.nine,
-  table[class="body"] .column td.nine { width: 75% !important; }
-  table[class="body"] .columns td.ten,
-  table[class="body"] .column td.ten { width: 83.333333% !important; }
-  table[class="body"] .columns td.eleven,
-  table[class="body"] .column td.eleven { width: 91.666666% !important; }
-  table[class="body"] .columns td.twelve,
-  table[class="body"] .column td.twelve { width: 100% !important; }
-
-  table[class="body"] td.offset-by-one,
-  table[class="body"] td.offset-by-two,
-  table[class="body"] td.offset-by-three,
-  table[class="body"] td.offset-by-four,
-  table[class="body"] td.offset-by-five,
-  table[class="body"] td.offset-by-six,
-  table[class="body"] td.offset-by-seven,
-  table[class="body"] td.offset-by-eight,
-  table[class="body"] td.offset-by-nine,
-  table[class="body"] td.offset-by-ten,
-  table[class="body"] td.offset-by-eleven {
-    padding-left: 0 !important;
-  }
-
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-
-  table[class="body"] .right-text-pad,
-  table[class="body"] .text-pad-right {
-    padding-left: 10px !important;
-  }
-
-  table[class="body"] .left-text-pad,
-  table[class="body"] .text-pad-left {
-    padding-right: 10px !important;
-  }
-
-  table[class="body"] .hide-for-small,
-  table[class="body"] .show-for-desktop {
-    display: none !important;
-  }
-
-  table[class="body"] .show-for-small,
-  table[class="body"] .hide-for-desktop {
-    display: inherit !important;
-  }
-}
\ No newline at end of file
diff --git a/themes/newsletter/static/css/main.css b/themes/newsletter/static/css/main.css
deleted file mode 100644
index c30691d..0000000
--- a/themes/newsletter/static/css/main.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.ExternalClass {
-    font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
-    font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
-}
-
-table.container {
-    border: 1px solid #DCDCDC;
-    border-top: 5px solid #000000;
-    padding-left: 12px;
-    padding-right: 12px;
-}
-
-td.wrapper {
-    padding-left: 24px !important;
-    padding-right: 24px !important;
-}
-
-p {
-    margin: 0px !important;
-    font-size: 14px !important;
-    color: #333;
-}
-
-li {
-    font-size: 14px !important;
-}
-
-a, a:visited {
-    color: #428bca!important;
-    text-decoration: none;
-}
-
-code {
-    color: #c7254e !important;
-    border: 1px solid #e8e8e8;
-    border-radius: 3px;
-    background-color: #eef;
-    font-weight::600 !important;
-    font-family: 'Fira Mono', monospace;
-}
-
-h1 {
-    font-size: 19px;
-    color: #333;
-    margin: 10px 0px 0px;
-    font-weight: bold;
-}
-
-h1.title {
-    font-size: 22px;
-    margin: 0px;
-    display: inline;
-}
-
-ul {
-    margin-top: 0px;
-}
-
-.header, .footer {
-    background-color: #fdfdfd;
-}
-
-.header {
-    border-top: 1px solid #e6e6e6;
-    border-bottom: 1px solid #e6e6e6;
-}
-
-.footer {
-    border-top: 1px solid #e6e6e6;
-}
\ No newline at end of file
diff --git a/themes/newsletter/templates/base.html b/themes/newsletter/templates/base.html
index 70eff09..3d01205 100644
--- a/themes/newsletter/templates/base.html
+++ b/themes/newsletter/templates/base.html
@@ -1,107 +1,255 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!doctype html>
+<html>
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width"/>
-
-    <style type="text/css">
-     {{CSS_INK}}
-    </style>
+    <meta charset="utf-8">
     <style type="text/css">
-     {{CSS_MAIN}}
+     body {
+       width: 100% !important;
+       min-width: 100%;
+       -webkit-text-size-adjust: 100%;
+       -ms-text-size-adjust: 100%;
+       margin: 0;
+       padding: 0;
+       color: #444444;
+     }
+
+     .container{
+       border: 1px solid #DCDCDC;
+       border-top: 5px solid #000000;
+     }
+
+     table .row {
+       border-collapse: collapse;
+       width: 660px;
+       border: none;
+     }
+     td .row-header-01 {
+       padding-top: 6px;
+       padding-bottom: 6px;
+       font-size: 12px;
+       text-align: center;
+       color: #444444;
+     }
+     td .row-header-01 a {
+       color: #ee5533;
+     }
+     td .row-header-02 {
+       border-top: 1px solid #e6e6e6;
+       border-bottom: 1px solid #e6e6e6;
+       background-color: #fdfdfd;
+     }
+
+     td .wrapper {
+       padding:6px 12px 1px;
+     }
+     
+     table .row-container{
+       width:100%;       
+     }
+
+     table .wrapper-container-01 {
+       width:50%
+     }
+     
+     table .wrapper-container-02{
+       text-align:right;
+       width:50%;
+     }
+     
+     .wrapper-header-01{
+       line-height:27px;
+       font-size:23px;
+       font-weight:bold;
+       color:#444444
+     }
+     
+     .wrapper-header-02{
+       font-size:16px;
+       line-height:36px;
+       font-weight:normal;
+       color:#444444;
+     }	
+
+     tr .footer {
+       border-top: 1px solid #e6e6e6;
+       background-color: #fdfdfd;
+     }
+
+     table.center, td.center {
+       text-align: center;
+     }
+
+     .ExternalClass {
+       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+       color: #444444;
+     }
+
+     body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
+       font-family: 'Helvetica Neue', Helvetica, sans-serif;
+     }
+
+     table.container {
+       border: 1px solid #dcdcdc;
+       border-top: 5px solid #000000;
+       padding-left: 12px;
+       padding-right: 12px;
+     }
+
+     td.wrapper {
+       padding-left: 24px !important;
+       padding-right: 24px !important;
+     }
+
+     p {
+       margin: 0px !important;
+       font-size: 16px !important;
+       color: #444444;
+       line-height: 24px;
+     }
+
+     li {
+       font-size: 16px !important;
+     }
+
+     a, a:visited {
+       color: #2a7ae2 !important;
+       text-decoration: none;
+     }
+
+     code {
+       color: #c7254e !important;
+       border: 1px solid #e8e8e8;
+       border-radius: 3px;
+       background-color: #eeeeff;
+       font-weight::600 !important;
+       font-family: monospace;
+     }
+
+     h1, h2 {
+       font-size: 19px;
+       color: #444444;
+       margin: 10px 0px;
+       font-weight: bold;
+     }
+
+     h1 {
+       font-size: 24px;
+       margin: 16px 0px;
+     }
+
+     ul {
+       margin-top: 0px;
+     }
+     
+     .rust-container{
+       padding:16px 12px 12px 12px;
+     }
+     
+     .rust-row{
+       border-collapse:collapse;
+       width:100%
+     }	
+     
+     .wrapper-image{
+       width:30px;
+       vertical-align:bottom;
+     }		
+     
     </style>
   </head>
+
   <body>
-    <table class="body">
-      <tr>
-        <td class="center" align="center" valign="top">
-          <center>
-            <table class="container">
-              <tr>
-                <td>
-
-                  <table class="row">
-                    <tr>
-                      <td class="wrapper last">
-                        <table class="twelve columns">
+    <div style="margin:0">
+      <table class="body" align="center" border="0" cellpadding="0" cellspacing="0"  >
+        <tbody>
+          <tr>
+            <td class="container" align="center" valign="top">
+              <table class="row" cellpadding="0" cellspacing="0">
+                <tbody>
+                  <tr>
+                    <td class="row-header-01">
+                      <span>Email isn't displaying correctly?<br></span>
+                      <a href="{% block selfurl %}{% endblock selfurl %}">Read this e-mail on the Web</a>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <table class="row" cellpadding="0" cellspacing="0">
+                <tbody>
+                  <tr>
+                    <td class="row-header-02">
+                      <table class="row-container" cellspacing="0" cellpadding="0" align="left">
+                        <tbody>
                           <tr>
-                            <td class="center">
-                              <small>
-                                Email isn't displaying correctly?
-                                <a href="{% block selfurl %}{% endblock selfurl %}">
-                                  Read this on the Web.
-                                </a>
-                              </small>
+                            <td class="wrapper" align="left">
+                              <table class="wrapper-container-01" align="left">
+                                <tbody>
+                                  <tr>
+                                    <td>
+                                      <img class="wrapper-image " src="http://this-week-in-rust.org/images/logo32.png" alt="This Week in Rust">
+                                      <span class="wrapper-header-01" style="">This Week in Rust</span>
+                                    </td>
+                                  </tr>
+                                </tbody>
+                              </table>
+                              <table class="wrapper-container-02" align="left">
+                                <tbody>
+                                  <tr>
+                                    <td>
+                                      <span class="wrapper-header-02"> {% block number_and_date %}{% endblock number_and_date %} </span>
+                                    </td>
+                                  </tr>
+                                </tbody>
+                              </table>
                             </td>
                           </tr>
-                        </table>
-                      </td>
-                    </tr>
-                  </table>
-
-                  <table class="row header">
-                    <tr>
-                      <td class="wrapper">
-                        <table class="twelve columns">
-                          <tr>
-                            <td>
-                              <h1 class="title">This Week in Rust</h1>
-                              &nbsp;
-                              {% block number_and_date %}{% endblock number_and_date %}
-                            </td>
-                          </tr>
-                        </table>
-                      </td>
-                    </tr>
-                  </table>
-
-                  <table class="row">
-                    <tr>
-                      <td class="wrapper last">
-                        <table class="twelve columns">
+                        </tbody>
+                      </table>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="rust-container" align="left">
+                      <table class="rust-row" align="left" cellpadding="0" cellspacing="0" style="">
+                        <tbody>
                           <tr>
                             <td>
                               {% block content %}
                               {% endblock content %}
                             </td>
                           </tr>
-                        </table>
-                      </td>
-                    </tr>
-                  </table>
-
-                  <table class="row footer">
-                    <tr>
-                      <td class="wrapper last">
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="center">
-                              <small>
-                                Sponsored by <a href="http://webstream.io">webstream.io</a>.
-                                <br />
-                                twiiter: <a href="https://twitter.com/ThisWeekInRust">@ThisWeekInRust</a>
-                                <br />
-                                <a href="{{ SITEURL }}/pages/privacy-policy.html">Privacy policy</a>
-                                |
-                                <a href="*|UNSUB|*">Unsubscribe</a>
-                                |
-                                <a href="*|UPDATE_PROFILE|*">Change email address</a>
-                                |
-                                <a href="{{ self.selfurl() }}">Read this issue on the Web</a>
-                              </small>
-                            </td>
-                          </tr>
-                        </table>
-                      </td>
-                    </tr>
-                  </table>
-
-                </td>
-              </tr>
-            </table>
-          </center>
-        </td>
-      </tr>
-    </table>
+                        </tbody>
+                      </table>
+                    </td>
+                  </tr>
+                  <tr class="footer">
+                    <td class="wrapper last">
+                      <table style="width:100%;">
+                        <tr>
+                          <td class="center">
+                            <small>
+                              Sponsored by <a href="http://webstream.io">webstream.io</a>.
+                              <br />
+                              twiiter: <a href="https://twitter.com/ThisWeekInRust">@ThisWeekInRust</a>
+                              <br />
+                              <a href="http://this-week-in-rust.org/pages/privacy-policy.html">Privacy policy</a>
+                              |
+                              <a href="*|UNSUB|*">Unsubscribe</a>
+                              |
+                              <a href="*|UPDATE_PROFILE|*">Change email address</a>
+                              |
+                              <a href="{{ self.selfurl() }}">Read this issue on the Web</a>
+                            </small>
+                          </td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </body>
 </html>
diff --git a/themes/rusted/static/css/_layout.scss b/themes/rusted/static/css/_layout.scss
index 8148717..99e3aa4 100644
--- a/themes/rusted/static/css/_layout.scss
+++ b/themes/rusted/static/css/_layout.scss
@@ -109,27 +109,23 @@ body > footer {
 .post-content {
     margin-bottom: $spacing-unit;
 
-    h2 {
-        font-size: 32px;
+    h1, h2, h3, h4 {
+        font-weight: bold;
+    }
 
-        @include media-query($on-laptop) {
-            font-size: 28px;
-        }
+    h1 { 
+        font-size: 24px;
     }
 
-    h3 {
-        font-size: 26px;
+    h2 {
+        font-size: 19px;
+    }
 
-        @include media-query($on-laptop) {
-            font-size: 22px;
-        }
+    h3 {
+        font-size: 16px;
     }
 
     h4 {
-        font-size: 20px;
-
-        @include media-query($on-laptop) {
-            font-size: 18px;
-        }
+        font-size: 16px;
     }
 }