dropcap impelementation

inspired by: https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems

by Konstantin Rouda

HTML

<p class="c-text">
  <span class="c-dropcap">B</span>e who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.
</p>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  
  /*font-size: 115%;*/ /*~18px*/
  font-size: 100%; /*~16px*/
  font-size: calc(23px + (27 - 23) * (100vw - 300px) / (1100 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
/*   zoom: 5; */
}

BODY {
  height: 720px;
  margin: 0;
  color: rgb(58, 61, 64);
/*   color: #f1f1f1; */
/*   background-color: rgb(52, 0, 48);
  background-color: rgb(252, 250, 248); */
  background-color: rgb(204, 201, 244);
/*   background-color: rgb(254, 254, 254); */
/*   zoom: 5; */
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/
.c-text {
  font-size: 2rem;
}

.c-dropcap {
  float: left;
  font-size: 3rem;
  margin: 5px 2px 0 0;
  font-weight: bolder;
  line-height: 1;
  text-indent: 0;
  color: firebrick;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .9);
}

.c-dropcap::before,
.c-dropcap::after {
  content: "";
  display: block;
}

.c-dropcap {
  margin-top: -2px;
}


.c-dropcap {
  margin-bottom: -2px;
}

JavaScript

/*
from:
https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems
*/