yrzam-hugo-theme/assets/css/classic-layout.scss

/*
	Classic view: header, main and footer block. Aside column is possible.
	Details depend on section.
*/
.classic-layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  header,
  footer {
    padding: $margin-base-y $margin-base-x;
    .content {
      max-width: $width-base;
      margin: 0 auto;
    }
  }
  header {
    background: linear-gradient(
      135deg,
      $color-bg-accent-light 0%,
      $color-bg-accent-dark 100%
    );
    box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
    .content {
      & > :last-child {
        margin-bottom: 0 !important;
      }
    }
  }
  main {
    flex: 1 0 auto;
  }
  footer {
    flex-shrink: 0;
    .content {
      text-align: center;
    }
  }
}

/* section specific - list of classic */
.classic-layout-container main .content.list {
  padding: $margin-base-y $margin-base-x;
  .main-container {
    .list-container {
      max-width: $width-base;
      margin: 0 auto;
      ul {
        padding-left: 1rem;
      }
      .list-item-container {
        margin: 0.2rem 0;
        .list-item-a-wrapper {
          text-decoration: none;
          .list-item {
            display: inline-block;
            vertical-align: middle;
            padding: 0.5rem 0 0.5rem 0.5rem;
            line-height: 1.5;
            .summary,
            .pub-date {
              color: $color-fg-dark;
            }
            .title {
              font-weight: bold;
            }
          }
        }
      }
    }
    .paginator {
      margin: $margin-base-y 0 0 0;
    }
  }
}

/* section specific - single of classic */
.classic-layout-container header .content.post {
  .pub-date {
    color: $color-fg-op-m;
    margin: 1em 0;
  }
}
.classic-layout-container main .content.post {
  .nav-block {
    .toc-title {
      text-align: center;
      margin-top: $margin-base-y;
    }
    nav {
      overflow-wrap: break-word;
      overflow-y: auto;
      ul {
        padding: 0 0 0 1rem; // 1rem is the browser defined bullet offset
      }
    }
  }
  .main-container {
    margin: $margin-base-y $margin-base-x;
  }
}
@mixin media--classic-main-content-post_1col {
  .classic-layout-container main .content.post {
    .nav-block {
      nav {
        max-height: 50vh;
        background-color: $color-bg-accent-dark;
        padding: $margin-base-y $margin-base-x;
        border: 2px solid $color-bg-accent-light;
      }
    }
    .main-container {
      margin: $margin-base-y * 2 $margin-base-x $margin-base-y $margin-base-x;
    }
  }
}
@mixin media--classic-main-content-post_2col {
  .classic-layout-container main .content.post {
    display: flex;
    .aside-container {
      display: flex;
      .nav-block {
        margin: $margin-base-y $margin-base-x 0 $margin-base-x;
        max-width: 20.5rem;
        min-width: 0;
        nav {
          padding: 0.5rem 0;
          position: sticky;
          top: 0;
          max-height: 100vh;
          scrollbar-width: thin;
          &,
          a {
            color: $color-fg-dark;
          }
          a:hover {
            color: $color-fg;
          }
        }
        scrollbar-color: transparent transparent;
        &:hover {
          scrollbar-color: rgba($color-fg-dark, 0.6) transparent;
        }
      }
    }
    .main-container {
      margin: $margin-base-y $margin-base-x;
      article {
        max-width: $width-base;
        margin: 0 auto;
      }
    }
  }
}
@mixin media--classic-main-content-post-2col_narrow {
  .classic-layout-container main .content.post {
    .aside-container {
      min-width: 0;
      flex: 0 1.5 auto;
    }
    .main-container {
      min-width: 0;
      flex: 1 1 auto;
    }
  }
}
@mixin media--classic-main-content-post-2col_wide {
  .classic-layout-container main .content.post {
    &::after {
      content: "";
      min-width: 0;
      flex: 1;
    }
    .aside-container {
      min-width: 0;
      flex: 1;
    }
    .main-container {
      min-width: 0;
      flex: 0 1 $width-base;
    }
  }
}