$block-caption
  text-decoration: none
  text-transform: uppercase
  letter-spacing: 2px
  color: color-grey
  margin-bottom: 1em
  margin-left: 5px
  line-height: 1em
  font-weight: bold

// Colors
color-default = #606060
color-grey = #999
color-black = #33363b
color-border = #eef1f8
color-link = #0e83cd
color-link-bg = #f9fbfd
color-link-hover = color-theme
color-background = #fff
color-code-background = #f8f8f8
color-sidebar-text = #777
color-widget-background = #ddd
color-widget-border = rgba(58,61,98,0.1)
color-footer-background = #f0f0f0
color-mobile-nav-background = #191919
color-theme-blue-twitter = #00aced
color-theme-red = #ff7e79
color-theme-orange = #fb6d19
color-theme-green = #39aa56
color-theme-green-light = #42b983
color-theme-black = #414141

// Theme
color-theme = color-theme-orange

//Layout
block-margin = 50px

//Font
font-futura-pt = "futura-pt", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei, WenQuanYi Micro Hei, "Microsoft YaHei", sans-serif
line-height = 1.6em

.archives-wrap
  margin: block-margin 0

.archives
  clearfix()
  margin-left: 2em

.archive-year-wrap
  margin-bottom: 1em
  h1
    font-size: 1.3em

.archive-year
  @extend $block-caption
  color: color-theme

.archive-year:hover
  color: color-theme

.archive-year:before
  font-family: "FontAwesome"
  content: "\f273"
  margin-right: .2em

.archives-tags-wrap
  margin: block-margin 0
  blockquote
    padding: 1em
    margin: 4em 0 0 0
    font-size: 1.2em
    font-weight: bold
    color: color-black
    text-align: center;
    border-left: 0px solid color-theme
    background: rgba(208,211,248,0.15)
    a
      color: color-black
      margin: .2em
      &:hover
        color: color-theme

.archive-tag
  @extend $block-caption
  text-transform: none;
  color: color-theme

.archive-tag:hover
  color: color-theme

.archive-tag:before
  font-family: "FontAwesome"
  content: "\f02c"
  margin-right: .2em

.archives-category-wrap
  margin: block-margin 0
  blockquote
    padding: 1em
    font-size: 1.1em
    font-weight: bold
    line-height: 1.7em;
    color: color-theme
    text-align: left;
    border-left: 0px solid color-theme
    background: rgba(208,211,248,0.15)
    a
      color: color-black
      margin: .2em
      &:hover
        color: color-theme
      &:before
        font-family: "FontAwesome"
        content: "\f0da"
        margin-right: .5em

.archive-category
  @extend $block-caption
  text-transform: none;
  color: color-theme

.archive-category:before
  font-family: "FontAwesome"
  content: "\f07c"
  margin-right: .3em

.archives
  column-gap: 10px
  @media mq-tablet
    column-count: 1
  @media mq-normal
    column-count: 1

.archive-article
  avoid-column-break()

.archive-article-inner
  padding: 0px
  margin-bottom: 0px

.archive-article-title
  text-decoration: none
  color: color-default
  transition: color 0.2s
  line-height: line-height
  border-left: 1px solid color-theme;
  padding-left: 15px;
  &:hover
    color: color-link-hover

.archive-article-footer
  margin-top: 1em

.archive-article-date
  min-width: 85px
  float: left
  color: #c7c7c7
  text-decoration: none
  line-height: 1.6em
  margin-right: 15px
  display: block
  font-size: 1.1em
  font-family: font-futura-pt

.archive-article-date:hover
  color: color-theme