ArticleInfo.vue

<template>
  <div v-if="author || time" class="article-info">
    <!-- Author -->
    <span v-if="author" :aria-label="authorText" data-balloon-pos="down">
      <AuthorIcon />
      <span property="author" v-text="author" />
    </span>

    <!-- Writing Date -->
    <span
      v-if="time"
      class="time"
      :aria-label="timeText"
      data-balloon-pos="down"
    >
      <CalendarIcon />
      <span property="datePublished" v-text="time" />
    </span>

    <CategoryInfo
      v-if="article.frontmatter.category"
      :category="article.frontmatter.category"
    />

    <TagInfo v-if="tags.length !== 0" :tags="tags" />

    <!-- Reading time -->
    <span
      v-if="readingTime"
      class="read-time-info"
      :aria-label="readingTimeText"
      data-balloon-pos="down"
    >
      <TimerIcon />
      <span v-text="readingTime" />
      <meta property="timeRequired" :content="readingTimeContent" />
    </span>
  </div>
</template>

<script src="./ArticleInfo" />

<style lang="stylus">
$articleInfoTextSize ?= 14px

.article-info
  color var(--dark-grey)
  font-size $articleInfoTextSize
  font-family Arial, Helvetica, sans-serif

  & > span
    display inline-block
    margin-right 0.5em
    line-height 1.8

    @media (max-width $MQMobileNarrow)
      margin-right 0.3em
      font-size 0.86rem

    &::after
      --balloon-font-size 8px
      padding 0.3em 0.6em !important

    svg
      position relative
      bottom -0.125em

    .tags-wrapper
      display inline-block

  .icon
    width 1em
    height 1em
</style>