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";