heti/_site/scss/components/_card.scss

// Author: Sivan [sun.sivan@gmail.com]
// Description: card.

.card {
  position: relative;
  left: -12px;
  width: 100%;
  margin-block-start: 24px;
  margin-block-end: 48px;
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-start: 12px;
  padding-inline-end: 12px;
  border-radius: 2px;
  box-shadow: 0 4px 16px hsla(0, 0%, 0%, 0.16);
  background-color: hsl(0, 0%, 100%);

  // 内容居左，覆盖 .heti figure
  .article & {
    text-align: left;
  }

  > figcaption {
    display: inline-block;
    margin-block-start: 16px;
    padding-block-start: 4px;
    padding-block-end: 3px;
    padding-inline-start: 0;
    padding-inline-end: 72px;
    line-height: 24px;
    border-block-start: 1px solid hsl(0, 0%, 93%);
  }
}

.card__vertical-container {
  box-sizing: border-box;
  width: 100%;
  height: 30em;
  border: 1px solid hsl(0, 0%, 93%);
  overflow: auto;
  writing-mode: vertical-rl;
}

@media screen and (min-width: 640px) {
  .card {
    box-sizing: border-box;
    left: -20%;
    width: 140%;
    padding-block-start: 24px;
    padding-block-end: 24px;
    padding-inline-start: 32px;
    padding-inline-end: 32px;
  }
}

@mixin darkmode {
  background-color: hsl(0, 0%, 16%);
  > figcaption {
    border-block-start: 1px solid hsl(0, 0%, 20%);
  }
  .card__vertical-container {
    border-color: hsl(0, 0%, 20%);
  }
}

.card {
  [data-darkmode="dark"] & {
    @include darkmode();
  }
  @media (prefers-color-scheme: dark) {
    [data-darkmode="auto"] & {
      @include darkmode();
    }
  }
}