Generic Rich Text Content Styles

rich-text-content.css

.content {
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    margin-top: 0.75em;

    &:first-child {
      margin-top: 0;
    }
  }

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    margin-bottom: 0.5em;
  }

  /* "Override" excess margin-bottom of a heading when a subheading appears directly after it */
  h1 + h2,
  .h1 + .h2,
  h2 + h3,
  .h2 + .h3,
  h3 + h4,
  .h3 + .h4,
  h4 + h5,
  .h4 + .h5,
  h5 + h6,
  .h5 + .h6 {
    margin-top: -0.5em !important;
  }

  .pretitle + h2 {
    @apply mt-0;
  }

  ol,
  ul {
    margin: 1.618em 0;

    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
    /* Without this, list item bullets and numbers may get hidden behind floated content such as images. */
    overflow: hidden;
  }

  .wp-caption,
  img {
    width: 100% !important;
    margin-bottom: 1rem;
    margin-top: 1rem;
    @screen md {
      &.alignleft,
      &.alignright {
        width: 50% !important;
      }
    }
  }

  .wp-caption img {
    margin-bottom: 0;
  }

  .wp-caption.alignleft,
  img.alignleft {
    @screen md {
      float: left;
      margin-right: 1.5rem;
    }
  }

  .wp-caption.alignright,
  img.alignright {
    @screen md {
      float: right;
      margin-left: 1.5rem;
    }
  }

  a.icon-readmore--yellow,
  a.icon-readmore--orange {
    word-break: normal;

    &::after {
      width: 1.1em;
      display: inline-block;
      margin-left: 0.5em;
      margin-bottom: 0.2em;
      line-height: 0;
      vertical-align: middle;
    }

    &.icon-readmore--small::after {
      width: 0.8em;
      margin-bottom: 0.1em;
      right: -1.2em;
    }
  }

  a.icon-readmore--yellow {
    @apply text-yellow;
    &::after {
      content: url(/icons/icon-more_yellow.svg);
    }
  }

  a.icon-readmore--orange {
    @apply text-orange;
    &::after {
      content: url(/icons/icon-more_orange.svg);
    }
  }

  a.button {
    @apply border-none uppercase transition-colors inline-flex leading-12 rounded font-bold text-white text-18 py-3 px-6 bg-pink m-0 p-0;
    @apply lg:text-21 lg:py-5 lg:px-6;
    @apply hover:bg-pink/[0.75] hover:no-underline;

    &.button--yellow {
      @apply bg-yellow hover:bg-yellow/[0.75];
    }

    &.button--orange {
      @apply bg-orange hover:bg-orange/[0.75];
    }

    &.button--brown {
      @apply bg-brown hover:bg-brown/[0.75];
    }
  }


  &.generic-content {
    h2,
    .h2 {
      @apply font-label text-[27px] leading-[1.167] tracking-[.06em] uppercase text-center mb-4
      md:text-[46px] md:text-left;
    }
  
    h2.has-pretitle span:first-child {
      @apply font-bold text-[22px] leading-[1.167] tracking-[.025em];
    }

    h3, .h3 {
      @apply mt-8 mb-[10px] font-label text-[24px] leading-[1.167] tracking-[0.06em] uppercase
        md:text-[36px] md:mt-12 md:mb-4;
    }

    p, .p {
      @apply text-[18px] leading-[1.385] tracking-normal
        md:text-[26px];
    }
  }
}