creating generic unit for responsiveness using CSS variables

by Konstantin Rouda

HTML

<section class="elem"></section>

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(16px + (20 - 16) * (100vw - 300px) / (1100 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
/*   zoom: 5; */
}

BODY {
  height: 100vh;
  margin: 0;
  color: rgb(58, 61, 64);
  background-color: rgb(254, 254, 254);
/*   background-color: rgb(41, 45, 48); */
/*   zoom: 5; */
}

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

:root {
  --size: 50;
  --unit: calc((var(--size) / 769) * 1vmin);
}


/*Actual Style*/
.elem {
  width: calc(742 * var(--unit));
  height: calc(769 * var(--unit));
  margin: calc(50 * var(--unit)) auto;
  border-radius: calc(20 * var(--unit));
  box-shadow: 0px calc(10 * var(--unit)) calc(20 * var(--unit)) 0 rgba(0, 0, 0, .7);
  background: cornflowerblue;
}

JavaScript

/*

Article: Advice for Complex CSS Illustrations (responsivness usint custom unit [ --unit: calc( (var(--size) / 769) * 1vmin) ] ) | CSS-Tricks


https://css-tricks.com/advice-for-complex-css-illustrations/ 


img {
  height: 50vmin;
  left: 50%;
  opacity: 0.25;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%); 
}


/!**
  * image dimensions are 742 x 769
  * width is 742
  * height is 769
  * my desired size is 50vmin
*!/
:root {
  --size: 50;
  --unit: calc((var(--size) / 769) * 1vmin); 
}

--unit: 0.06501950585vmin; 


.egg {
  height: calc(769 * var(--unit));
  position: relative;
  width: calc(742 * var(--unit));
  z-index: 2; 
}


*/