hexo-theme-keep/source/css/layout/page.styl

$temp-width = hexo-config('style.left_side_width');
$page-aside-width = $temp-width ? convert($temp-width):260px;

.page-container {
  position: relative;
  transition-t("padding-left", "0", "0.3", "ease-out");


  +keep-tablet() {
    padding-left: 0 !important;
  }


  .page-main-content {
    padding-top: $header-height;
    position: relative;

    .header-shrink & {
      padding-top: $header-shrink-height;


      +keep-tablet() {
        padding-top: $header-shrink-height * 0.9;
      }

      +keep-mobile() {
        padding-top: $header-shrink-height * 0.8;
      }
    }


    +keep-tablet() {
      padding-top: $header-height * 0.9;
    }


    +keep-mobile() {
      padding-top: $header-height * 0.8;
    }


    .page-main-content-top {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: $header-height;
      z-index: $z-index-5;
      box-sizing: border-box;
      transition-t("padding-left, height", "0, 0", "0.3, 0.2", "ease-out, linear");

      &.hide {
        transform: translateY(-102%);
      }

      .header-shrink & {
        height: $header-shrink-height;

        +keep-tablet() {
          height: $header-shrink-height * 0.9;
        }

        +keep-mobile() {
          height: $header-shrink-height * 0.8;
        }
      }


      +keep-tablet() {
        height: $header-height * 0.9;
        padding-left: 0 !important;
      }


      +keep-mobile() {
        height: $header-height  * 0.8;
      }

    }


    .page-main-content-middle {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: center;
      padding: $component-spacing-value 0;
      background: var(--background-color);

      +keep-tablet() {
        padding: $component-spacing-value * 0.8 0;
      }

      +keep-mobile() {
        padding: $component-spacing-value * 0.6 0;
      }

      .main-content {
        position: relative;
        box-sizing: border-box;
        width: $main-content-width;
        max-width: $content-max-width;
        height: 100%;

        +keep-tablet() {
          width: $main-content-width-tablet;
        }

        +keep-mobile() {
          width: $main-content-width-mobile;
        }
      }
    }


    .page-main-content-bottom {
      width: 100%;
    }
  }


  .page-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: - $page-aside-width;
    width: $page-aside-width;
    height: 100%;
    z-index: $z-index-6;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    background: var(--background-color);

    hover-style(1.02, 1.02);

    transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear");

    +keep-tablet() {
      left: 0 !important;
      display: none !important;
    }

  }


  .post-tools {
    position: fixed;
    top: $header-height + $component-spacing-value;
    right: $component-spacing-value;
    transition-t("top", "0", "0.2", "ease");

    .header-shrink & {
      top: $header-shrink-height + $component-spacing-value;

      +keep-tablet() {
        top: $header-shrink-height * 0.9 + $component-spacing-value;
      }

      +keep-mobile() {
        top: $header-shrink-height * 0.8 + $component-spacing-value;
      }
    }


    +keep-tablet() {
      top: $header-height * 0.9 + $component-spacing-value;
      right: 10px;
      transform: scale(0.82);
      transform-origin: right top;
    }


    +keep-mobile() {
      top: $header-height * 0.8 + $component-spacing-value;
      right: 5px;
      transform: scale(0.72);
    }
  }


  .right-bottom-side-tools {
    position: fixed;
    bottom: 5%;
    right: 0;
  }
}