jekyll-theme-chirpy/_sass/layout/_panel.scss

@use '../abstracts/breakpoints' as bp;
@use '../abstracts/mixins' as mx;
@use '../abstracts/placeholders';

.access {
  top: 2rem;
  transition: top 0.2s ease-in-out;
  margin-top: 3rem;
  margin-bottom: 4rem;

  &:only-child {
    position: -webkit-sticky;
    position: sticky;
  }

  > section {
    padding-left: 1rem;
    border-left: 1px solid var(--main-border-color);

    &:not(:last-child) {
      margin-bottom: 4rem;
    }
  }

  .content {
    font-size: 0.9rem;
  }
}

#panel-wrapper {
  /* the headings */
  .panel-heading {
    font-family: inherit;
    line-height: inherit;

    @include mx.label(inherit);
  }

  .post-tag {
    line-height: 1.05rem;
    font-size: 0.85rem;
    border-radius: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin: 0 0.35rem 0.5rem 0;

    &:hover {
      transition: all 0.3s ease-in;
    }
  }

  @include bp.lt(bp.get(xl)) {
    display: none;
  }
}

#access-lastmod {
  a {
    color: inherit;

    &:hover {
      @extend %link-hover;
    }

    @extend %no-bottom-border;
  }
}

.footnotes > ol {
  padding-left: 2rem;
  margin-top: 0.5rem;

  > li {
    &:not(:last-child) {
      margin-bottom: 0.3rem;
    }

    @extend %sup-fn-target;

    > p {
      margin-left: 0.25em;

      @include mx.mt-mb(0);
    }
  }
}

.footnote {
  @at-root a#{&} {
    @include mx.ml-mr(1px);
    @include mx.pl-pr(2px);

    border-bottom-style: none !important;
  }
}

sup {
  @extend %sup-fn-target;
}

.reversefootnote {
  @at-root a#{&} {
    font-size: 0.6rem;
    line-height: 1;
    position: relative;
    bottom: 0.25em;
    margin-left: 0.25em;
    border-bottom-style: none !important;
  }
}

/* --- Begin of Markdown table style --- */

/* it will be created by Liquid */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: 1.5rem;

  > table {
    min-width: 100%;
    overflow-x: auto;
    border-spacing: 0;

    thead {
      border-bottom: solid 2px rgba(210, 215, 217, 0.75);

      th {
        @extend %table-cell;
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid var(--tb-border-color);

        &:nth-child(2n) {
          background-color: var(--tb-even-bg);
        }

        &:nth-child(2n + 1) {
          background-color: var(--tb-odd-bg);
        }

        td {
          @extend %table-cell;
        }
      }
    } /* tbody */
  } /* table */
}

/* --- post --- */

.preview-img {
  aspect-ratio: 40 / 21;
  width: 100%;
  height: 100%;
  overflow: hidden;

  @extend %rounded;

  &:not(.no-bg) {
    background: var(--img-bg);
  }

  img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;

    @extend %rounded;

    @at-root #post-list & {
      width: 100%;
    }
  }
}

.post-preview {
  @extend %rounded;

  border: 0;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);

  &::before {
    @extend %rounded;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--card-hovor-bg);
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
  }

  &:hover {
    &::before {
      opacity: 0.3;
    }
  }
}