hugo-theme-zzo/assets/sass/pages/_archive.scss

.archive {
  position: relative;
  width: 100%;
  padding: 2rem 2rem 0;

  @include flexbox();
  @include flex-direction(column);
  @include justify-content(flex-start);

  @media only screen and (max-width:768px) {
    padding: 2rem 1rem 0;
  }

  &__container {
    width: 100%;
  }

  &__ul {
    position: relative;

    &[data-dir="rtl"] {
      &::before {
        content: '';
        position: absolute;
        right: 3rem;
        top: 0;
        width: 0.25rem;
        height: 100%;
        @include themify($themes) {
          background-color: themed('toc-vertical-line');
        }
      }

      @media only screen and (max-width: 769px) {
        &::before {
          content: none;
        }
      }
    }

    &[data-dir="ltr"] {
      &::before {
        content: '';
        position: absolute;
        left: 3rem;
        top: 0;
        width: 0.25rem;
        height: 100%;
        @include themify($themes) {
          background-color: themed('toc-vertical-line');
        }
      }
      @media only screen and (max-width: 769px) {
        &::before {
          content: none;
        }
      }
    }

  }

  &__li {
    margin-bottom: 0.5rem;
    z-index: 0;

    &[data-dir="rtl"] {
      margin-right: 4rem;
      @media only screen and (max-width: 769px) {
        margin-right: 0;
        position: relative;
      }
    }

    &[data-dir="ltr"] {
      margin-left: 4rem;
      @media only screen and (max-width: 769px) {
        margin-left: 0;
        position: relative;
      }
    }

    @include transition(margin-left, 0.1s, ease);
    @include flexbox();
    @include align-items(flex-start);

    @media only screen and (max-width: 600px) {
      @include flex-direction(column);
    }
  }

  &__key {
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    height: 32px;
    width: 100px;
    padding: 0.125rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: $title-font;

    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include themify($themes) {
      color: themed('archive-key-color');
      background-color: themed('archive-key-background-color');
    }

    &[data-ani="true"] {
      @include animation('slide-in-down .4s .2s 1 ease both');
    }

    &:not(:first-child) {
      margin: 4rem 0 1rem 0;
    }
    &:first-child {
      margin: 1rem 0;
    }
  }

  &__meta {
    border-radius: 0.25rem;
    min-width: 100px;
    max-width: 100px;    

    @include flexbox();
    @include align-items(center);

    &[data-ani="true"] {
      @include animation('slide-in-left .2s .5s 1 ease both');
    }
  }

  &__type {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: $title-font;
    width: 50%;
    height: 24px;
    line-height: 24px;
    text-align: center;

    @include truncate(50px);
    @include themify($themes) {
      color: themed('archive-type-color');
      background-color: themed('archive-type-background-color');

      @media only screen and (max-width: 769px) {
        border-right: 2px solid themed('toc-vertical-line');
      }
    }
  }

  &__date {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: $title-font;
    width: 50%;
    height: 24px;
    line-height: 24px;
    text-align: center;        

    @include truncate(50px);
    @include themify($themes) {
      color: themed('archive-meta-color');
      background-color: themed('archive-type-background-color');

      @media only screen and (max-width: 769px) {
        border-left: 2px solid themed('toc-vertical-line');
      }
    }
  }

  &__title {
    margin-right: 0.5rem;    
    margin-left: 1rem;
    font-family: $title-font;

    &[data-title-wrap^="no"] {
      @include truncate($grid-max-width);
    }

    @media only screen and (max-width: 600px) {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
    }
    
    @include on-event {
      &[data-dir="ltr"] {
        &::before {
          content: '';
          position: absolute;
          left: 3rem;                
          width: 0.25rem;
          height: 30px;
          
          @include themify($themes) {
            background-color: themed('archive-hover-line-color');
            
            @media only screen and (max-width:768px) {
              top: 13px;
              height: 24px;
            }
          }

          @media only screen and (max-width: 769px) {
            height: 24px;
            top: 50%;
            @include translateY(-50%);
          }
        }
      }

      &[data-dir="rtl"] {
        &::before {
          content: '';
          position: absolute;
          right: 3rem;                
          width: 0.25rem;
          height: 30px;
          
          @include themify($themes) {
            background-color: themed('archive-hover-line-color');
            
            @media only screen and (max-width:768px) {
              top: 13px;
              height: 24px;
            }
          }

          @media only screen and (max-width: 769px) {
            height: 24px;
            top: 50%;
            @include translateY(-50%);
          }
        }
      }
    }
  }

  &__subtitle {
    text-align: center;
    font-weight: bold;
    font-family: $title-font;

    @include themify($themes) {
      color: themed('terms-title-color');
    }
    @media only screen and (max-width:600px) {
      margin-bottom: 1rem;
    }
  }
}