ui-md-styles.scss

.ui-md {
  @extend .leading-normal;
  @extend .ff-copy;
  @extend .text-4;

  h1, h2, h3, h4, h5, h6 {
    @extend .leading-tight;
    @extend .ff-title;
    @extend .font-medium;
  }

  h1 {
    @extend .text-1;
  }

  h2, h3, h4, h5, h6 {
    @extend .mb-2;
  }

  h2 {
    @extend .mt-5;
    @extend .mb-3;
    @extend .text-2;
    @extend .font-semibold;
  }

  h3 {
    @extend .text-4;
  }

  h4, h5, h6 {
    @extend .text-6;
  }

  p, ul, ol {
    @extend .max-w-680;
    @extend .ff-copy;
    @extend .text-5;
    @extend .md\:text-4;
    @extend .mb-24px;
    @extend .leading-copy;
  }

  ul, ol {
    @extend .ml-3;
  }

  ul {
    list-style-type: disc;

    li {
      list-style: inherit;
    }
  }

  li {
    margin-bottom: 0.7em;

    &:last-child {
      margin-bottom: 0;
    }
  }


  img {
    @extend .py-3;
  }

  blockquote {
    @extend .italic;
    @extend .pl-4;
    @extend .border-l-3;
    @extend .border-black;
  }

  a {
    @extend .no-underline;
    @extend .text-black-80;

    // gray-underline
    text-decoration: none;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 50%);
    background-repeat: repeat-x;
    background-size: 2px .1em;
    background-position: 0 1.1em;
  }

  hr {
    border: 1px solid #ddd;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 150px;
  }

  strong {
    font-weight: 600;
  }

  em {
    font-style: italic;
  }

  pre {
    @extend .font-mono;
    @extend .text-7;
    @extend .mb-24px;
  }

  code {
    @extend .font-mono;
    @extend .text-6;
  }

  pre code {
    @extend .py-3;
    @extend .-mx-3;
    @extend .px-3;
    @extend .xs\:rounded-2;
    @extend .lg\:px-4;
    @extend .lg\:-mx-4;
  }

  p code {
    @extend .p-1;
    @extend .bg-grey-lighter;
  }
}