refactor: css base utils

src/v1/components/home/header/index.jsx

@@ -18,7 +18,7 @@ const Header = () => {
  <img src={ChevronRight} aria-hidden={true} alt=""></img>
  </a>
  <h1>
- The <span className={styles["highlight"]}>Free</span> Community for
+ The <span className={`animated-gradient`}>Free</span> Community for
  Modern Learning.
  </h1>
  <p className={styles["tag-line"]}>

src/v1/components/home/header/index.module.css

@@ -21,27 +21,6 @@
  margin: 1.5rem 0;
 }
 
-@keyframes background-pan {
- from {
- background-position: 0% center;
- }
-
- to {
- background-position: -200% center;
- }
-}
-
-.header-container h1 .highlight {
- animation: background-pan 3s linear infinite;
- background: linear-gradient(to right, var(--clr-primary), var(--clr-pink), var(--clr-yellow), var(--clr-primary));
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- white-space: nowrap;
- background-size: 200%;
- height: 1.5em;
-}
-
 .header-container .tag-line {
  font-style: normal;
  font-weight: 450;

src/v1/css/base/resets.css

@@ -0,0 +1,62 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h5,
+p {
+ margin: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+ font-size: 100%;
+}
+
+body {
+ min-height: 100vh;
+ font-family: var(--ff-primary);
+}
+
+img,
+video,
+iframe {
+ max-inline-size: 100%;
+ block-size: auto;
+}
+
+input,
+button,
+textarea,
+select,
+a {
+ font: inherit;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Remove all animations, for users who have turned them off */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}

src/v1/css/base/root.css

@@ -0,0 +1,10 @@
+:root {
+ --clr-dark: #181E25;
+ --clr-primary: #a918a0;
+ --clr-secondary: #5F7086;
+ --clr-gray-light: #DEE4ED;
+ --clr-pink: rgba(207, 93, 113, 1);
+ --clr-yellow: rgba(255, 208, 129, 1);
+
+ --ff-primary: 'General Sans';
+}

src/v1/css/utlities/gradient.css

@@ -0,0 +1,20 @@
+@keyframes background-pan {
+ from {
+ background-position: 0% center;
+ }
+
+ to {
+ background-position: -200% center;
+ }
+}
+
+.animated-gradient {
+ animation: background-pan 3s linear infinite;
+ background: linear-gradient(to right, var(--clr-primary), var(--clr-pink), var(--clr-yellow), var(--clr-primary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ white-space: nowrap;
+ background-size: 200%;
+ height: 1.5em;
+}

src/v1/index.css

@@ -0,0 +1,4 @@
+@import url("./css/base/root.css");
+@import url("./css/base/resets.css");
+
+@import url("./css/utlities/gradient.css");