cullmann.io/themes/CodeIT/assets/lib/valine/valine.scss

// ========== Global ========== //
// Color of the border
$border-color: #f0f0f0;
$border-color-dark: #363636;

// ========== Code ========== //
// Color of the code
$code-color: #e74c3c !default;
$code-color-dark: #e5bf78 !default;

// Color of the code background
$code-background-color: #f5f5f5 !default;
$code-background-color-dark: #272c34 !default;

@mixin overflow-wrap($value) {
  word-wrap: $value;
  overflow-wrap: $value;
}

@mixin line-break($value) {
  -webkit-line-break: $value;
  -ms-line-break: $value;
  line-break: $value;
}

@mixin tab-size($value) {
  -moz-tab-size: $value;
  -o-tab-size: $value;
  tab-size: $value;
}

.v[data-class="v"] {
  .vcards .vcard .vcontent.expand {
    &::before,
    &::after {
      z-index: 50;
    }
  }

  .vwrap,
  .vwrap .vheader .vinput,
  .vcards .vcard .vh,
  .vcards .vcard .vquote,
  blockquote {
    border-color: $border-color;

    [theme="dark"] & {
      border-color: $border-color-dark;
    }
  }

  code,
  pre,
  pre code {
    font-size: 90%;
    @include overflow-wrap(break-word);
    @include line-break(anywhere);
    @include tab-size(4);
    color: $code-color;
    background: $code-background-color;

    [theme="dark"] & {
      color: $code-color-dark;
      background: $code-background-color-dark;
    }
  }

  .emoji,
  .vemoji {
    max-width: 1.5em;
    vertical-align: text-bottom;
  }
}