🕉 @feelinglovelynow/global-style

💎 Install

pnpm add @feelinglovelynow/global-style

💚 Use

import '@feelinglovelynow/global-style'

💛 Reasoning

• Common styling to ease web development
• Includes html styles to ease rem development - additional information
• Includes fade in and fade in from above animations
• Includes a class to show a loading circle
• Includes a couple of base classes like fln__pr-text which is helpful for adjacent inline elements when there is a desire for space between them like:

<span class="fln__pr-text">Hello</span><a>World</a>

🧡 Loading circle implementation

<div class="fln__circle-load"></div>
<div class="fln__circle-load blue"></div>

<style>
  .fln__circle-load { // gold load with transparent background
    border-color: #eac603 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }

  .fln__circle-load.blue { // thicker + wider blue load with grey background
    border-width: 0.36rem;
    width: 4rem;
    border-color: #2e96ff #ccc #ccc;
  }
</style>

❤️ 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;
}

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

.fln__circle-load {
  width: 30px;
  aspect-ratio: 1/1;
  border-width: 0.27rem;
  border-style: solid;
  border-radius: 100%;
  animation: fln__circle-load__spin 0.8s infinite linear;
}

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

.fln__clear {
  clear: both;
}

.fln__relative {
  position: relative;
}

.fln__strong {
  font-weight: 600;
}

@keyframes fln__circle-load__spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

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

  100% {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

🎁 All Our Packages

1. @feelinglovelynow/dgraph: NPM ⋅ Github
2. @feelinglovelynow/env-write: NPM ⋅ Github
3. @feelinglovelynow/get-form-entries: NPM ⋅ Github
4. @feelinglovelynow/get-relative-time: NPM ⋅ Github
5. @feelinglovelynow/global-style: NPM ⋅ Github
6. @feelinglovelynow/jwt: NPM ⋅ Github
7. @feelinglovelynow/loop-backwards: NPM ⋅ Github
8. @feelinglovelynow/slug: NPM ⋅ Github
9. @feelinglovelynow/svelte-catch: NPM ⋅ Github
10. @feelinglovelynow/svelte-kv: NPM ⋅ Github
11. @feelinglovelynow/svelte-loading-anchor: NPM ⋅ Github
12. @feelinglovelynow/svelte-modal: NPM ⋅ Github
13. @feelinglovelynow/svelte-turnstile: NPM ⋅ Github
14. @feelinglovelynow/toast: NPM ⋅ Github