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,
div.block-mermaid {
  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 {
  .code-header {
    font-family: $family-code;
    background-color: $grey-lighter;
    font-size: 80%;
    padding: 0.25rem 1rem;
    display: flex;
    justify-content: space-between;

    @include dark-mode {
      background-color: $grey-darker;
    }
  }

  &:not(:hover) .code-header:not(.always-show) {
    visibility: hidden;
  }

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

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

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