Merge pull request #9 from axperien/task-21-background

Добавлен анимированный звездный фон
DVAA-team · Jul 12, 2022 · aa9562f · aa9562f
2 parents 8cd32f4 + f986b71
commit aa9562f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/src/assets/images/stars_pattern.png b/src/assets/images/stars_pattern.png
diff --git a/src/assets/styles/abstracts/_variables.css b/src/assets/styles/abstracts/_variables.css
@@ -1,4 +1,5 @@
 $glob-color-blue: #0d6efd;
+$glob-color-white: #fff;
 
 $glob-text-font-stack: "Ubuntu", "Open Sans", "Helvetica Neue Light",
   "Helvetica Neue", "Helvetica", "Arial", sans-serif;

diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
@@ -19,8 +19,21 @@ body {
 
 body {
   font-family: $glob-text-font-stack;
+  color: $glob-color-white;
+  background: #000 url("../images/stars_pattern.png") 50% 0 / 500px auto repeat;
+  animation: scroll-background 20s linear infinite;
 }
 
 a {
   text-decoration: none;
 }
+
+@keyframes scroll-background {
+  0% {
+    background-position: 50% 0;
+  }
+
+  100% {
+    background-position: 50% 750px;
+  }
+}
diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
@@ -1,5 +1,5 @@
 const NotFound = () => (
-  <main className="h-screen w-full flex flex-col justify-center items-center bg-[#1A2238]">
+  <main className="h-screen w-full flex flex-col justify-center items-center">
     <h1 className="text-9xl font-extrabold text-white tracking-widest">404</h1>
     <div className="bg-[#FF6A3D] px-2 text-sm rounded rotate-12 absolute">
       Page Not Found