💄 Add post image to AMP template and style fixes (#7272)

no issue

Will show the post image on top of the AMP page, if image is uploaded.
Some minor style changes.

core/server/apps/amp/lib/views/amp.hbs

@@ -236,6 +236,7 @@
             max-height: 100%;
             height: 100%;
             color: #3a4145;
+            background: #f4f8fb;
             letter-spacing: 0.01rem;
             font-family: "Merriweather", serif;
             font-size: 1.8rem;
@@ -275,7 +276,7 @@
         h1 {
             text-indent: -2px;
             letter-spacing: -1px;
-            font-size: 2.8rem;
+            font-size: 2.6rem;
         }
 
         h2 {
@@ -313,7 +314,7 @@
         ol,
         dl {
             margin: 0 0 2.5rem 0;
-            font-size: 0.95em;
+            font-size: 1.5rem;
             text-rendering: geometricPrecision;
 
             -webkit-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
@@ -605,7 +606,6 @@
             display: table;
             overflow: hidden;
             box-sizing: border-box;
-            margin-bottom: 15px;
             width: 100%;
             height: 50px;
             background: #5ba4e5 no-repeat center center;
@@ -616,6 +616,10 @@
             -moz-box-sizing: border-box;
         }
 
+        .content {
+            background: #fff;
+            padding-top: 15px;
+        }
         .blog-title,
         .content {
             margin: auto;
@@ -639,7 +643,6 @@
             position: relative;
             margin-top: 0;
             margin-right: 16px;
-            margin-bottom: 2rem;
             margin-left: 16px;
             padding-bottom: 0;
             max-width: 100%;
@@ -650,7 +653,7 @@
         }
 
         .post-header {
-            margin-bottom: 3.4rem;
+            margin-bottom: 1rem;
         }
 
         .post-title {
@@ -681,13 +684,23 @@
 
         .post-meta .author {
             margin: 0;
+            font-size: 1.3rem;
+            line-height: 1.3em;
         }
 
         .post-date {
             display: inline-block;
             text-transform: uppercase;
             white-space: nowrap;
-            font-size: 1.3rem;
+            font-size: 1.2rem;
+            line-height: 1.2em;
+        }
+
+        .post-image {
+            margin: 0;
+            padding-top: 3rem;
+            padding-bottom: 30px;
+            border-top: 1px #E8E8E8 solid;
         }
 
         /* Keep images centered, and allow images wider than the main
@@ -736,17 +749,17 @@
 
         .site-footer {
             position: relative;
-            margin: 3rem auto 0 auto;
+            margin: 0 auto 20px auto;
             padding: 1rem 15px;
             max-width: 600px;
-            color: #bbc7cc;
+            color: rgba(0,0,0,0.5);
             font-family: "Open Sans", sans-serif;
-            font-size: 1rem;
+            font-size: 1.1rem;
             line-height: 1.75em;
         }
 
         .site-footer a {
-            color: #bbc7cc;
+            color: rgba(0,0,0,0.5);
             text-decoration: none;
             font-weight: bold;
         }
@@ -797,7 +810,11 @@
                     <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="YYYY-MM-DD"}}</time>
                 </section>
             </header>
-
+            {{#if image}}
+            <figure class="post-image">
+                <amp-img src="{{image absolute="true"}}" width="600" height="400" layout="responsive"></amp-img>
+            </figure>
+            {{/if}}
             <section class="post-content">
 
                 {{amp_content}}