vevet/src/core/scripts/presetCssVars.ts

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

export const presetCssVars = `var presetVevetCss = function update() {
  if (window.vevet5) {
    return;
  }

  var doc = document.documentElement;

  var styles = document.getElementById('vevet_css_preset');
  if (!styles) {
    styles = document.createElement('style');
    styles.id = 'vevet_css_preset';
    document.body.appendChild(styles);
  }

  var w = window.innerWidth;
  var h = window.innerHeight;
  var sh = doc.clientHeight;
  var scrollbarWidth = window.innerWidth - doc.clientWidth;

  styles.innerHTML = 'html { --vw: ' + w / 100 + 'px; --vh: ' + h / 100 + 'px; --svh: ' + sh / 100 + 'px; --scrollbar-width: ' + scrollbarWidth + 'px; }';
};

window.addEventListener('resize', presetVevetCss);

var presetVevetCssObserver = new ResizeObserver(presetVevetCss);
presetVevetCssObserver.observe(document.documentElement);
presetVevetCssObserver.observe(document.body);

presetVevetCss();`;