Day 14: Blockquote 💬 ✣ S.Bistrović

A blockquote is used to highlight a quote on a page.

The example component is visible below.

It’s because I’m green, isn’t it?
—The Grinch

A few notes about this blockquote component:

CSS Variables are used for colors,
the :before pseudo-element is used to add and style big quotation marks,
the line-height: 0 declaration is used to reduce the size of the quotation marks.

The code:

<blockquote class="advent-quote" cite="https://parade.com/958470/alexandra-hurtado/grinch-quotes/">
  <p class="advent-quote__content">It’s because I’m green, isn’t it?</p>
  <p class="advent-quote__author">—The Grinch</p>
</blockquote>

.advent-quote {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-gamma);
  border: 1px dotted var(--color-xmas-beta);

  font-size: 200%;

  padding: 1em 2em;
  position: relative;
  overflow: hidden;
}

.advent-quote:before {
  content: "”";
  color: var(--color-xmas-beta);

  font-family: serif;
  font-size: 400%;
  font-style: italic;
  line-height: 0;

  position: absolute;
  bottom: 0;
  right: 0;

  opacity: 0.5;
}

.advent-quote__content {
  font-weight: 100;
  letter-spacing: .1em;

  margin-top: 1em;
  margin-bottom: 1em;
}

.advent-quote__author {
  font-size: 50%;
  font-style: italic;
  letter-spacing: .05em;
}