Issue #3221201 by agami4: Improve styles and layout for the email message

templates/email/swiftmailer.html.twig

@@ -107,7 +107,7 @@
         }
 
         .postheader {
-            padding: 0 44px 30px;
+            padding: 0 44px 25px;
             font-size: 16px;
         }
 
@@ -120,23 +120,37 @@
 
         .footer {
             clear: both;
-            padding-top: 10px;
+            padding-top: 30px;
             text-align: center;
             width: 100%; }
         .footer td,
         .footer p,
         .footer span,
         .footer a {
-            color: #999999;
+            color: #adadad;
             font-size: 12px;
+            line-height: 21px;
             text-align: center; }
 
+        .footer .brand {
+            margin-bottom: 0;
+        }
+
+        .footer .brand,
+        .footer .brand a {
+            font-size: 14px;
+        }
+
         .content-block {
             padding-top: 10px;
         }
         .content-block img {
             margin: 10px 0;
         }
+
+        .footer .powered-by {
+            padding-top: 20px;
+        }
         /* -------------------------------------
             TYPOGRAPHY
         ------------------------------------- */
@@ -165,6 +179,10 @@
             font-weight: normal;
             margin: 0;
             margin-bottom: 15px; }
+
+        p:last-child {
+            margin-bottom: 0; }
+
         p li,
         ul li,
         ol li {
@@ -175,6 +193,9 @@
             padding-left: 1em;
         }
 
+        small  {
+            font-size: 12px; }
+
         a {
             color: {{ primary }};
             font-weight: 700;
@@ -232,7 +253,7 @@
             color: #ffffff; }
 
         .btn-wrapp {
-            margin-bottom: 40px; }
+            margin-bottom: 25px; }
 
         .btn-wrapp td:nth-child(odd) {
             padding-left: 0; }
@@ -248,11 +269,11 @@
             border: 1px solid {{ primary }};
             color: {{ primary }};
             padding: 9px 25px 7px;
-            text-align: center; }
+            text-align: center;
+            text-decoration: none; }
 
-        .btn-link-one {
-            display: inline-block;
-            min-width: 230px; }
+        .btn-link:hover {
+            text-decoration: none; }
 
         .btn-link img {
             position: absolute;
@@ -269,7 +290,8 @@
         .comments {
             border-radius: 5px;
             border: 1px solid #e0e0e0;
-            margin-bottom: 20px; }
+            margin-bottom: 20px;
+            margin-top: 20px; }
 
         .comment {
             padding: 15px 20px 0;
@@ -281,7 +303,8 @@
             background: #f3f3f3; }
 
         .post {
-            padding: 15px 20px 20px; }
+            padding: 15px 20px 20px;
+            font-size: 16px; }
 
         .message {
             padding: 5px 20px; }
@@ -294,6 +317,7 @@
             margin: 10px 0; }
 
         .post-type {
+            font-weight: 700;
             margin-bottom: 5px;
             color: {{ primary }};
         }
@@ -306,6 +330,12 @@
             font-size: 14px;
         }
 
+        .post-info span,
+        .post-info strong {
+            display: inline-block;
+            vertical-align: sub;
+        }
+
         .post-answer {
             background-color: #f3f3f3; }
 
@@ -488,15 +518,16 @@
                     <table border="0" cellpadding="0" cellspacing="0">
                         <tr>
                             <td class="content-block">
-                                <strong class="brand">
-                                    {% if site_link %}
-                                        <a href="{{ base_url }}">{{ site_name }}</a>
-                                    {% else %}
-                                        {{ site_name }}
-                                    {% endif %}
-                                </strong>
+                                <p class="brand">
+                                    <strong>
+                                        {% if site_link %}
+                                            <a href="{{ base_url }}">{{ site_name }}</a>
+                                        {% else %}
+                                            {{ site_name }}
+                                        {% endif %}
+                                    </strong>
+                                </p>
                                 {% if site_slogan %}
-                                    <br />
                                     <span class="tagline">{{ site_slogan }}</span>
                                 {% endif %}
                                 {% if site_sub_slogan %}