@import "iconmoon.css"
@import "hint.min.css"
@import base
@import text


// *
*
  padding: 0
  margin: 0

html, body
  min-height: 100%

$bclr: #ddd

a, a:active, a:visited
  color: $black

=link-no-decoration()
  a, a:active, a:visited
    text-decoration: none

=link-decoration-underline()
  a, a:active, a:visited
    text-decoration: underline

  

a:hover, a:visited:hover
  color: #cc0000
  text-decoration: underline

// font
body
  font: 1.2125em/1.57 "iABC Regular", Georgia, serif
  font-weight: normal
  font-variant: normal
  font-style: normal
  color: $black
  background-color: #fefefe
  text-rendering: optimizeLegibility
  border-top: .15em solid $black

// body layout
$side-width: 13.5em
$side-padding: 2.5em

$body-padding-top: $side-padding
$body-padding-right: 4em
$body-padding-left: $side-width + 2 * $side-padding + $body-padding-right

$footer-height: 2em

body
  padding: $body-padding-top $body-padding-right 1em $body-padding-left
  margin-bottom: $footer-height

//footer style
.footer
  font-size: .9em
  text-align: center
  padding: 1.5em 0 .5em 0

.side
  position: fixed
  top: 0
  left: 0
  width: $side-width
  padding: $side-padding
  height: 100%
  border-right: .1em solid $bclr

// side style
.side
  +link-no-decoration()
  word-break: break-all

// side divs
.side .author
  +ofl-font()
  .author-name
    font-size: 1.7em
    margin-top: 1em
  p.author-description
    text-align: left

.main .meta
  +link-no-decoration()
  +ofl-font()
  text-align: center
  padding-bottom: 2em
  h2
    font-style: italic
    font-size: 20px
    margin-top: .7em
  h1, h2
    font-weight: 200

// author avatar
.side .author
  a.avatar img
    width: 70%
    height: 70%
    +border-radius(100em)


// social icons
.side .social
  padding: .7em 0
  a
    font-size: 1.1em
    display: inline
    margin: 0 .1em

.main
  max-width: 85%
  display: block


//page
.main
  .posts
    +link-no-decoration()
    .item
      +ofl-font()
      font-size: 1.2em
      border-bottom: 1px solid $bclr
      padding: 1em 0 .3em 0
      span.date
        font-style: italic
        font-size: .8em
        float: right
  .paging
    +link-no-decoration()
    width: 100%
    margin: 1em 0
    line-height: 1.0
    font-size: 1.5em
    display: inline-block
    a
      display: block
      width: 50%
    a.prev
      float: left
      text-align: left
    a.next
      float: right
      text-align: right


//post
.main
  .post
    h1.title
      +ofl-font()
      padding-top: .5em
      text-align: center
    p.date
      +ofl-font()
      text-align: center
      font-style: italic
      text-indent: .1em
    .post-body
      padding: 2em 0 1.5em 0
    // img in content
    img.title-pic
      width: 100%
    p img, a img.title-pic
      margin: 1em auto
      display: block
    a img.title-pic
      margin: 0 0 1em 0

  div.posts-nav
    +link-no-decoration()
    width: 100%
    display: inline-block
    border-top: 1px solid $bclr
    border-bottom: 1px solid $bclr
    margin: 1em 0
    a.next, a.prev
      color: black
      padding: 2em 0
      font-size: 20px
      display: block
      width: 50%
      [class^="icon-"]:before, [class*=" icon-"]:before
        margin-right: .5em
        margin-left: .5em

    a.prev
      float: left
      text-align: left
    a.next
      float: right
      text-align: right
    a:hover
      text-decoration: none
    a.next:hover, a.prev:hover
      background-color: rgba(0,0,0,.07)


.main .symbol
  font-family: "iABC SC Regular", Georgia, serif
  font-size: 3.33333em
  line-height: 1
  -webkit-font-smoothing: antialiased  // smooth
  text-align: center
  display: block


#disqus_thread
  padding-top: 2em
