Reuse Fullpage hero on theme2 as much as possible (ampproject#196)

israelcefrin · Mar 3, 2017 · 697c271 · 697c271
1 parent 3a1c6e8
commit 697c271
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 23 deletions.
diff --git a/components/images/fullpage-hero.css b/components/images/fullpage-hero.css
@@ -37,6 +37,10 @@
   line-height: var(--space-6);
 }
 
+.ampstart-fullpage-hero-cta {
+  background: transparent;
+}
+
 .ampstart-readmore {
   background: linear-gradient(to top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
   color: var(--color-font-primary);

diff --git a/components/images/fullpage-hero.snip.html b/components/images/fullpage-hero.snip.html
@@ -25,7 +25,7 @@
       <header class="p3">
         <h1 class="ampstart-fullpage-hero-heading mb3">
           <span class="ampstart-fullpage-hero-heading-text">
-            {{{heading}}}
+            {{{heading-html}}}
           </span>
         </h1>
 
@@ -35,11 +35,16 @@ <h1 class="ampstart-fullpage-hero-heading mb3">
           </span>
         {{/credit}}
     </header>
-      <footer class="absolute left-0 right-0 bottom-0">
-        {{#readmore}}
-          <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#{{content-id}}">{{text}}</a>
-        {{/readmore}}
-      </footer>
+    <footer class="absolute left-0 right-0 bottom-0">
+      {{#readmore}}
+      <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#{{content-id}}">{{text}}</a>
+      {{/readmore}}
+      {{#cta}}
+      <button class="ampstart-btn ampstart-fullpage-hero-cta h5 m3">
+        <a class="block text-decoration-none px1 py2" href="{{{url}}}">{{text}}</a>
+      </button>
+      {{/cta}}
+    </footer>
     </figcaption>
   </figure>
   <!-- End Fullpage Hero -->

diff --git a/css/templates/themes/2/page.css b/css/templates/themes/2/page.css
@@ -56,6 +56,18 @@ h6 {
   letter-spacing: 0;
 }
 
+.ampstart-fullpage-hero-heading-text {
+  display: block;
+  padding: var(--space-1);
+  line-height: 1rem;
+}
+
+.ampstart-fullpage-hero-heading-text,
+.ampstart-image-fullpage-hero .ampstart-image-credit {
+  box-decoration-break: none;
+  background: none;
+}
+
 .theme2-divider::after {
   border-bottom: 1px solid var(--color-border);
   content: '';

diff --git a/templates/article.amp.json b/templates/article.amp.json
@@ -66,7 +66,7 @@
       }
     },
     "fullpage-hero": {
-      "heading": "The Year's Best Animal Photos",
+      "heading-html": "The Year's Best Animal Photos",
       "narrow-img": "../img/article/elephants_narrow.png",
       "wide-img": "../img/article/elephants_wide.jpg",
       "credit": {

diff --git a/templates/themes/2/home.amp.html b/templates/themes/2/home.amp.html
@@ -22,20 +22,9 @@
 <body>
   {{> ../components/navbar/navbar.snip.html}}
 
-  {{#fullpage-hero}}
-    <figure class="ampstart-image-fullpage-hero m0 relative mb4">
-      <amp-img width="404" height="720" layout="responsive" src="{{{narrow-img}}}" media="(max-width: 415px)"></amp-img>
-      <amp-img height="720" layout="fixed-height" src="{{{wide-img}}}" media="(min-width: 416px)"></amp-img>
-      <header class="absolute top-0 right-0 left-0 center">
-        {{{heading-html}}}
-      </header>
-      {{#cta}}
-        <div class="absolute right-0 bottom-0 left-0 center">
-          <a class="h5 px4 py3 m3 inline-block text-decoration-none border" href="{{{url}}}">{{text}}</a>
-        </div>
-      {{/cta}}
-    </figure>
-  {{/fullpage-hero}}
+  <div class="center">
+  {{> ../components/images/fullpage-hero.snip.html}}
+  </div>
 
   <main id="content" role="main">
     {{#main}}

diff --git a/templates/themes/2/home.amp.json b/templates/themes/2/home.amp.json
@@ -38,7 +38,7 @@
       }
     },
     "fullpage-hero": {
-      "heading-html": "<h1 class=\"h6 caps m4\">Welcome to <span class=\"h1 block bold caps my1\">Beck & Galo</span> Modern American Cuisine</h1>",
+      "heading-html": "<span class=\"h6 block caps\">Welcome to</span><span class=\"h1 block bold caps my1\">Beck & Galo</span><span class=\"h6 block caps\">Modern American Cuisine</span>",
       "narrow-img": "../../../img/themes/2/hero.jpg",
       "wide-img": "../../../img/themes/2/hero.jpg",
       "cta": {

diff --git a/templates/thescenic.amp.json b/templates/thescenic.amp.json
@@ -55,7 +55,7 @@
       ]
     },
     "fullpage-hero": {
-      "heading": "Most Beautiful Hikes in Alaska",
+      "heading-html": "Most Beautiful Hikes in Alaska",
       "narrow-img": "../img/thescenic/cropped_hero.jpg",
       "wide-img": "../img/thescenic/hero.jpg",
       "readmore": {