website/assets/scss/content.scss

@import "variables";

.navigation {
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
  background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
}

.main-section {
  & > div {
    position: relative;
    padding-top: 93px;

    .breadcrumb {
      margin: 30px 0;

      a {
        color: #919aa3;

        &:hover {
          color: #55bc8a;
        }
      }
    }

    .main-div {
      box-sizing: border-box;
      width: 880px;
      padding: 40px 60px;
      background-color: #fff;
      border-radius: 4px;

      @media only screen and (max-width: $mobile-max-width) {
        width: 100%;
        padding: 0;
        background-color: #f5f8f9;
      }

      .author {
        font-size: 16px;
        line-height: 1.5;
        color: #171c34;
      }

      .date {
        font-size: 14px;
        line-height: 1.43;
        color: #919aa3;
      }

      h1 {
        margin-top: 20px;
        margin-bottom: 40px;
        text-shadow: 0 8px 16px rgba(35,45,65,.1);
        font-size: 40px;
        font-weight: 500;
        line-height: 1.4;
        color: #171c34;

        @media only screen and (max-width: $mobile-max-width) {
          font-size: 28px;
        }
      }

      .share-1 {
        margin-bottom: 20px;
      }

      .share-2 {
        margin-top: 20px;
      }

      .content {

        .md-body {
          font-size: 14px;
          line-height: 2.29;
          color: #36435c;
        }
      
        .md-body h2 {
          font-size: 24px;
          font-weight: 500;
          line-height: 64px;
          color: #171c34;
          text-shadow: none;
          text-align: left;
          margin-bottom: 20px;
          border-bottom: 1px solid #ccd3db;
        }
      
        .md-body h3 {
          font-size: 16px;
          font-weight: 600;
          line-height: 1.5;
          color: #171c34;
        }
      
        .md-body img {
          max-width: 100%;
          box-sizing: content-box;
          background-color: #fff;
          border-radius: 5px;
          box-shadow: none;
        }
      
        .md-body blockquote {
          padding: 4px 20px 4px 12px;
          border-radius: 4px;
          background-color: #ecf0f2;
        }
      
        &-metadata {
          margin-bottom: 28px;
      
          &-title {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            color: #171c34;
          }
      
          &-time {
            font-size: 14px;
            line-height: 1.43;
            color: #919aa3;
          }
        }
      
        &-title {
          text-shadow: 0 8px 16px rgba(35, 45, 65, 0.1);
          font-size: 40px;
          font-weight: 500;
          line-height: 1.4;
          color: #171c34;
          margin-bottom: 40px;
      
          @media only screen and (max-width: $mobile-max-width) {
            font-size: 28px;
          }
        }
      }
    }

    .aside {
      width: 230px;
      max-height: 700px;
      overflow: scroll;
      @media only screen and (max-width: $mobile-max-width) {
        display: none;
      }
      .title {
        height: 32px;
        font-size: 24px;
        line-height: 1.33;
        color: #36435c;
        padding-bottom: 10px;
        border-bottom: solid 1px #ccd3db;;
      }

      .tabs {
        #TableOfContents > ul > li > a {
          font-weight: 500;
        }
        li {
          margin: 10px 0;
          font-size: 16px;
          line-height: 2;
          color: #36435c;

          a {
            display: block;
            width: 100%;
            font-weight: 400;
            line-height: 24px;
            color: #36435c;

            &:hover {
              color: #55bc8a;
            }
          }
        }
        li li {
          padding-left: 20px;
        }
      }
    }

    .aside-fixed {
      position: fixed;
      top: 150px;
      left: 50%;
      transform: translateX(350px);
    }

    .aside-absolute {
      position: absolute;
      right: 0;
      bottom: 0;
      top: none;
      left: none;
    }
  }
}