Reorder hero on image variant

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/css/common/article.css

@@ -1,7 +1,3 @@
-.gh-article:not(.no-image) .gh-article-header>* {
-  grid-column: wide-start / wide-end;
-}
-
 .gh-article-meta {
   margin-top: 2rem;
   font-size: 1.2rem;
@@ -16,7 +12,6 @@
 }
 
 .gh-article-title {
-  font-size: 7.4rem;
   font-weight: 600;
   line-height: 1;
 }
@@ -24,7 +19,6 @@
 .gh-article-excerpt {
   max-width: 920px;
   margin-top: 1.6rem;
-  font-size: 2.8rem;
   line-height: 1.35;
   color: var(--color-darker-gray);
 }
@@ -39,13 +33,3 @@
   margin-top: 24px;
   border-top: 0;
 }
-
-@media (max-width: 767px) {
-  .gh-article-title {
-    font-size: 4.2rem;
-  }
-
-  .gh-article-excerpt {
-    font-size: 2.2rem;
-  }
-}

assets/css/image/article.css

@@ -0,0 +1,12 @@
+.gh-article-image {
+  margin-top: 0;
+}
+
+.gh-article-title {
+  font-size: 3.2rem;
+  margin-top: 64px;
+}
+
+.gh-article-excerpt {
+  font-size: 1.8rem;
+}

assets/css/image/main.css

@@ -13,6 +13,7 @@
 @import "../lib/commento.css";
 @import "../lib/tocbot.css";
 
+@import "article.css";
 @import "feed.css";
 @import "masonry.css";
 @import "pswp.css";

assets/css/text/article.css

@@ -0,0 +1,21 @@
+.gh-article:not(.no-image) .gh-article-header>* {
+  grid-column: wide-start / wide-end;
+}
+
+.gh-article-title {
+  font-size: 7.4rem;
+}
+
+.gh-article-excerpt {
+  font-size: 2.8rem;
+}
+
+@media (max-width: 767px) {
+  .gh-article-title {
+    font-size: 4.2rem;
+  }
+
+  .gh-article-excerpt {
+    font-size: 2.2rem;
+  }
+}

assets/css/text/main.css

@@ -13,5 +13,6 @@
 @import "../lib/commento.css";
 @import "../lib/tocbot.css";
 
+@import "article.css";
 @import "card.css";
 @import "navigation.css";

page.hbs

@@ -6,13 +6,19 @@
 
         {{#match @page.show_title_and_feature_image}}
         <header class="gh-article-header gh-canvas">
+            {{#match @custom.mode "Image-based"}}
+            {{> common/feature-image}}
+            {{/match}}
+
             <h1 class="gh-article-title">{{title}}</h1>
 
             {{#if custom_excerpt}}
             <p class="gh-article-excerpt">{{custom_excerpt}}</p>
             {{/if}}
 
+            {{#match @custom.mode "Text-based"}}
             {{> common/feature-image}}
+            {{/match}}
         </header>
         {{/match}}
 

post.hbs

@@ -5,6 +5,10 @@
     <article class="gh-article {{post_class}}">
 
         <header class="gh-article-header gh-canvas">
+            {{#match @custom.mode "Image-based"}}
+            {{> common/feature-image}}
+            {{/match}}
+
             <h1 class="gh-article-title">{{title}}</h1>
 
             {{#if custom_excerpt}}
@@ -16,10 +20,14 @@
                 <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
                 —
                 {{/if}}
+                <span>{{reading_time}}</span>
+                —
                 <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
             </span>
 
+            {{#match @custom.mode "Text-based"}}
             {{> common/feature-image}}
+            {{/match}}
         </header>
 
         <div class="gh-content gh-canvas">