@appearhere/bloom/components/Markdown/Markdown.css

Appear Here's pattern library and styleguide

/**
 * Allow figures to break the grid, so their contents (images) can be bigger
 * and therefore have a greater impact
 */

.root {
  color: var(--color-greyDarker);
}

.root h1,
.root h2,
.root h3,
.root h4,
.root p,
.root a,
.root ol,
.root ul,
.root blockquote {
  color: currentColor;
  font-family: var(--font-avenir);
  font-size: var(--fontsize-regular);
  line-height: var(--lineheight-regular);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--fontweight-regular);
}

.root * + * {
  margin-top: var(--size-large);
  margin-bottom: 0;
}

.root h1 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iv);
  line-height: var(--lineheight-large-iv);
  letter-spacing: var(--letter-spacing-large-iv);
  font-weight: var(--fontweight-bold);
}

.root h2 {
  font: var(--font-regular);
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iii);
  line-height: var(--lineheight-large-iii);
  letter-spacing: var(--letter-spacing-large-iii);
  font-weight: var(--fontweight-bold);
}

.root * + h1,
.root * + h2 {
  margin-top: var(--size-large) * 2;
}

.root h3 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-ii);
  line-height: var(--lineheight-large-ii);
  letter-spacing: var(--letter-spacing-large-ii);
  font-weight: var(--fontweight-demi);
}

.root h4 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  line-height: var(--lineheight-large-i);
  letter-spacing: var(--letter-spacing-large-i);
  font-weight: var(--fontweight-demi);
}

.root p {
  font-size: var(--font-large-i);
}

.root iframe {
  display: block;
}

.root img {
  width: auto;
  height: auto;
  max-height: 80vh;
  max-width: 100%;
}

.root figure {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.root figcaption {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  line-height: var(--lineheight-small-i);
  letter-spacing: var(--letter-spacing-small-i);
  font-weight: var(--fontweight-regular);
  margin-top: var(--size-small);
  text-align: left;
}

.root figcaption * {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  line-height: var(--lineheight-small-i);
  letter-spacing: var(--letter-spacing-small-i);
  font-weight: var(--fontweight-regular);
}

.root strong {
  font-weight: var(--fontweight-bold);
}

.root em {
  font-style: italic;
}

.root a {
  color: var(--color-gold);
  text-decoration: underline;
}

.root ol, ul {
  padding: 0;
  margin-left: 0;
  list-style-position: inside;
}

.root li {
  margin-top: var(--size-micro);
}

.root ol ol,
.root ul ul,
.root ol ul,
.root ul ol {
  margin-left: var(--size-large);
  margin-bottom: var(--size-micro);
}

.root blockquote {
  padding: 2rem 0;
  border-top: 2px solid var(--color-grey);
  border-bottom: 2px solid var(--color-grey);
}

.root blockquote p {
  font: var(--font-regular);
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iii);
  line-height: var(--lineheight-large-iii);
  letter-spacing: var(--letter-spacing-large-iii);
  font-weight: var(--fontweight-bold);
  margin-bottom: 0;
}

.root blockquote p:before,
.root blockquote p:after {
  font-family: 'georgia';
}

.root blockquote p:before {
  content: "\201C";
}

.root blockquote p:after {
  content: "\201D";
}

@media (min-width: 46.75rem) {
  .root blockquote p {
    position: relative;
    margin-left: -3rem;
  }

  .root blockquote p:before {
    position: absolute;
    left: -1.3rem;
  }
}