@import “morph/variables”; @import “morph/colors”; @import “morph/functions”; @import “morph/components/highlight”; @import “morph/components/catalogue”;

.page-post {

.content {
  .position-sticky-top {
    position: sticky;
    top: 0;
  }

  .status-bar {
    @include media-sm() {
      top: 0;
    }
    height: 3rem;

    .structure-menu {
      height: 100%;

      button {
        display: none;
        padding: .4rem .6rem;
        border-radius: 100%;
        border: 1px solid $color-primary;
        @include media-sm() {
          display: inline;
        }
      }
    }
  }

  // left area
  .left {
    padding: 2rem 0;
    color: $color-secondary;
    width: 70%;
    @include media-sm() {
      width: 100%;
    }

    header {
      padding: 0 0 2.5rem 0;
      .title {
        font-size: 2.5rem;
        padding: .5rem 0;
        @include media-sm() {
          font-size: 2rem;
        }
      }
    }
  }

  // right area
  .right {
    margin-left: 2rem;
    padding: 2rem 0;
    width: 30%;

    #scroll-top-lg {
      display: none;
      position: fixed;
      bottom: 7rem;
      width: 3rem;
      height: 2.5rem;
      border-radius: 8px;
      line-height: 2.5rem;
      border: 1px solid $color-primary-dark;
      font-size: 2rem;
      margin-left: 3em;
      &:hover {
        background-color: $color-secondary-dark;
        color: $color-primary-dark;
      }
    }

    h2 {
      padding: 0 0 1rem 1rem;
      border-left: 2px solid $color-primary-dark;
      border-bottom: 2px solid $color-primary-dark;
    }
  }

  // article area
  article.text {
    color: map-get($colors, 'secondary-light');
    font-size: 16px;
    line-height: 1.5;

    h1, h2, h3, h4, h5, h6,
    p, blockquote, pre,
    ul, ol, dl, figure,
    %vertical-rhythm {
      margin-bottom: .8rem;
    }

    ul, ol {
      margin-left: 1.5rem;
    }

    li {
      &::marker {
        color: $color-secondary-dark;
      }
      > ul,
      > ol {
        margin-bottom: 0;
      }
    }

    hr {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    figure > img {
      display: block;
    }

    a {
      &:hover {
        text-decoration: underline;
      }
    }

    blockquote {
      p {
        color: $color-secondary;
      }
      border-left: 4px solid $color-rang1;
      padding-left: .5em;
      font-style: italic;

      i, em {
        font-style: normal;
      }
    }

    // header style and anchor animations
    h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
      color: $color-secondary-dark;
      margin-top: 2.5rem;
      //padding: 1rem 0 .5rem 0;
      .header-anchor {
        display: none;
        margin-left: 5px;
        font-size: .7em;
      }

      &:hover .header-anchor {
        display: inline-block;
        animation: fade-in .5s;
        -webkit-animation: fade-in .5s;
      }
    }

    // table
    table:not(.rouge-table) {
      margin-bottom: 1rem;
      width: 100%;
      text-align: left;
      color: $color-secondary;
      border-collapse: collapse;
      border: 1px solid $color-primary-dark;
      tr {
        &:nth-child(even) {
          background-color: $color-primary;
        }
      }
      th, td {
        padding: (2rem / 3) (2rem / 2);
      }
      th {
        background-color: $color-primary-dark;
        border: 1px solid $color-primary-dark;
      }
      td {
        border: 1px solid $color-primary-dark;
      }

      @include media-sm() {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
      }
    }

  }
}

}