@sensethenlove/global-style NPM

🕉 @sensethenlove/global-style

🙏 Description

Global styling for body, html, common keyframes, common styles & rem assistance

☯️ Install

pnpm add @sensethenlove/global-style

💛 Add styling to site

import '@sensethenlove/global-style/lib/index.css'

💙 Here are the styles

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%; /* https://stackoverflow.com/questions/59920538 */
}

body {
  font-size: 1.8rem;
  line-height: 1.369;

  * {
    box-sizing: border-box;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-from-above {
  0% {
    opacity: 0;
    transform: translateY(-9rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out-and-slide-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-9rem);
  }
}

@keyframes subtle-fade-in-from-above {
  0% {
    opacity: 0;
    transform: translateY(-0.9rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtle-fade-out-and-slide-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.9rem);
  }
}

.pr-text {
  padding-right: 0.45rem;
}