website/static/src/scss/_blocks.scss

@mixin center-block($width: 85%, $mobile-width: 90%) {
  width: $width;
  margin: 0 auto;
  max-width: $width;
  min-width: $width;

  @include touch {
    max-width: $mobile-width;
    min-width: $mobile-width;
    width: $mobile-width;
  }
}

div.block-image {
  figcaption {
    font-size: 85%;
    margin-top: 5px;
  }

  figure {
    @include center-block;
  }
}

.content > div[class^="block-"] {
  &:not(:last-child) {
    margin-bottom: $content-block-margin-bottom;
  }
}

div.block-embed {
  lite-youtube {
    @include center-block(50%);
  }
}

div.block-tangent {
  .inner {
    margin: math.div($content-block-margin-bottom, 4) 0;
    padding-left: 1.5rem;
  }
}

div.block-mermaid {
  text-align: center;

  img {
    width: unset;

    @include dark-mode {
      filter: invert(100%);
    }
  }
}

div.block-code .highlight {
  pre,
  span,
  & {
    @include dark-mode;
  }
}

div.block-table {
  td,
  th {
    vertical-align: middle;

    @include dark-mode {
      color: $dark-mode-text;
    }
  }
}