Skip to content

Commit

Permalink
feat: separate post title and time
Browse files Browse the repository at this point in the history
  • Loading branch information
viko16 committed Feb 7, 2019
1 parent 09d44f6 commit fd9db13
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 10 deletions.
8 changes: 5 additions & 3 deletions components/Post.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
22 changes: 15 additions & 7 deletions styles/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ a
// -----------------------------------------

.post-view
position relative
margin 0 20px 50px
// overflow-x hidden
a.header-anchor
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit fd9db13

Please sign in to comment.