@import “bootstrap”;

$sticky_footer_height: 60px;

body {

padding-top: $navbar-height + 20;

}

// If you want to use a sticky footer, put the .sticky class on your .html html.sticky {

position: relative;
min-height: 100%;

}

@media (min-width: $screen-sm-min) {

.sticky body {
  margin-bottom: $sticky_footer_height;
}

.sticky footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: $sticky_footer_height;
}

}

.footer {

background-color: #f5f5f5;

.text-muted {
  float: left;
  margin: 20px 0;
}

.social {
  display: none;
  @media (min-width: $screen-sm-min) {
    float: right;
    font-size: 1.5em;
    display: block;
  }
  a {
    color: white;
  }

  .socicon {
    margin: 10px;
    width: 1.5em;
    border-radius: 3px;
  }
  span {
    padding: 5px;
    display: inline-block;
  }
}

}

.main-header {

@extend .container-fluid;

text-align: center;
padding-top: 5em;
padding-bottom: 2em;
min-height: 20em;

h2 {
  font-style: italic;
}

a { color: #333; }

.avatar {
  margin: auto;
  max-width: 100px;
  img {
    border-radius: 100%;
    border: 4px solid white;
  }
}
.header_links {
  padding-top: 1em;
}

}

.article-header {

text-align: center;
padding-top: 5em;
padding-bottom: 5em;

a { color: black; }

h2 {
  font-style: italic;
}

.avatar {
  margin: auto;
  max-width: 75px;
  img {
    border-radius: 100%;
    border: 4px solid white;
  }
}

}

.content {

@extend .container-fluid;

.article {
  @extend .col-md-8;
  @extend .col-md-offset-2;
  @extend .col-sm-10;
  @extend .col-sm-offset-1;

  padding-top: 3em;

  p {
    font-size: 20px;
    line-height: 36px;
    padding-bottom: 1em;
    text-align: justify;
  }

  ul, ol {
    li {
      font-size: 20px;
      line-height: 34px;    
      p {
        padding-bottom: 0;
      }
    }
    padding-bottom: 1em;
  }
}

}

pre {

font-size: 18px;
overflow: scroll;
@media (max-width: $screen-sm-min) {
  font-size: 14px;
  overflow: hidden;
}

}

code {

overflow: scroll;

@media (max-width: $screen-sm-min) {
  font-size: 12px;
  overflow: hidden;
}

}

.timeline {

@extend .container;

margin-top: 2em;

.post {
  @extend .row;

  color: #555;
  a { color: black; }

  margin-bottom: 3em;

  .post-date {
    @extend .col-sm-3;

    text-align: right;

    p {
      margin: 0;
      padding: 0;
    }

    .draft {
      font-style: italic;
      font-size: 1.3em;
    }
    .disqus-comment-count {
      font-size: 1em;
    }
  }

  .post-title {
    @extend .col-sm-9;
    p {
      margin: 0;
      padding: 0;
    }
    p.title {
      font-family: $headings-font-family;
      line-height: 1.7em;

      a {
        font-family: $headings-font-family;
      }
    }

    p.subtitle {
      font-style: italic;
      font-size: 1.3em;
    }
    .tag {
      display: inline-block;
      font-size: .9em;
    }
  }
}

}

.article_footer {

font-family: $headings-font-family;
font-size: 1.4em;
color: #ccc;
padding-bottom: 2em;

a#comment_shower {
  color: black;
  span {
    margin-left: 1em;
  }
}

.comments {
  @extend .col-sm-8;
  @extend .col-sm-offset-1;
  font-style: italic;
}
.sharing {
  @extend .col-sm-2;
  text-align: right;
  a {
    margin-left: 1em;
  }
}

} .comment_universe {

display: none;

}