From 5cbdee16a7b89031a5d0012624040c86580dc25d Mon Sep 17 00:00:00 2001
From: "DESKTOP-FJAKAS7\\Siddhi"
 <117962421+siddhigate12@users.noreply.github.com>
Date: Sun, 27 Nov 2022 19:14:01 +0530
Subject: [PATCH] refactor: css base utils

---
 src/v1/components/home/header/index.jsx       |  2 +-
 .../components/home/header/index.module.css   | 21 -------
 src/v1/css/base/resets.css                    | 62 +++++++++++++++++++
 src/v1/css/base/root.css                      | 10 +++
 src/v1/css/utlities/gradient.css              | 20 ++++++
 src/v1/index.css                              |  4 ++
 6 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 src/v1/css/base/resets.css
 create mode 100644 src/v1/css/base/root.css
 create mode 100644 src/v1/css/utlities/gradient.css
 create mode 100644 src/v1/index.css

diff --git a/src/v1/components/home/header/index.jsx b/src/v1/components/home/header/index.jsx
index f480a995..afcb25ae 100644
--- a/src/v1/components/home/header/index.jsx
+++ b/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"]}>
diff --git a/src/v1/components/home/header/index.module.css b/src/v1/components/home/header/index.module.css
index 6b9357af..4cea412f 100644
--- a/src/v1/components/home/header/index.module.css
+++ b/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;
diff --git a/src/v1/css/base/resets.css b/src/v1/css/base/resets.css
new file mode 100644
index 00000000..abce0dab
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/v1/css/base/root.css b/src/v1/css/base/root.css
new file mode 100644
index 00000000..f43ce618
--- /dev/null
+++ b/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';
+}
\ No newline at end of file
diff --git a/src/v1/css/utlities/gradient.css b/src/v1/css/utlities/gradient.css
new file mode 100644
index 00000000..23cfd3ca
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/v1/index.css b/src/v1/index.css
new file mode 100644
index 00000000..93b96910
--- /dev/null
+++ b/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");