From fd9db137a817c91c6ffc7a0eca5a670a2a033418 Mon Sep 17 00:00:00 2001
From: viko16 <16viko@gmail.com>
Date: Thu, 7 Feb 2019 14:59:53 +0800
Subject: [PATCH] feat: separate post title and time

---
 components/Post.vue |  8 +++++---
 styles/index.styl   | 22 +++++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/Post.vue b/components/Post.vue
index c41d240..0d05d46 100644
--- a/components/Post.vue
+++ b/components/Post.vue
@@ -1,12 +1,14 @@
 <template>
   <section class="post-view">
-    <h1 class="post-title">
-      {{ $page.title }}
+    <div class="post-head">
+      <h1 class="post-title">
+        {{ $page.title }}
+      </h1>
       <time-ago
         :last-updated="$page.frontmatter.date || $page.lastUpdated"
         class="post-date"
       />
-    </h1>
+    </div>
     <Content />
   </section>
 </template>
diff --git a/styles/index.styl b/styles/index.styl
index eed1f5e..a3e744b 100644
--- a/styles/index.styl
+++ b/styles/index.styl
@@ -133,6 +133,7 @@ a
 // -----------------------------------------
 
 .post-view
+  position relative
   margin 0 20px 50px
   // overflow-x hidden
   a.header-anchor
@@ -178,23 +179,30 @@ a
       visibility visible
       transform translate(-50%, calc(-100% - 5px))
 
+.post-head
+  position relative
+
 .post-title
   font-size fontSize * 2
   margin-bottom 50px
   line-height 1
 
-// when smaller than tablet
-@media (max-width: 767px)
-  .post-title
-    font-size 1.5em
-
 .post-date
-  float right
+  position absolute
+  right 0
+  top 0
   font-size fontSize - 2
   font-weight 400
-  line-height 2
+  line-height fontSize * 2
   color metaColor
 
+// when smaller than tablet
+@media (max-width: 767px)
+  .post-title
+    font-size fontSize * 1.5
+  .post-date
+    line-height fontSize * 1.5
+
 code
   background codeBgColor
   font-family monospaceFontFamily !important