💄 Style: update fireblog ui

Sye0w · Oct 4, 2024 · a28af9a · a28af9a
1 parent 63a2d94
commit a28af9a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/src/app/components/fireblog-page/fireblog-page.component.scss b/src/app/components/fireblog-page/fireblog-page.component.scss
@@ -76,6 +76,7 @@
         }
 
         h2 {
+          @include shine-effect;
           @include title-text;
           text-align: center;
           color: $blueviolet;

diff --git a/src/app/views/auth/auth/auth.component.scss b/src/app/views/auth/auth/auth.component.scss
@@ -1,37 +1,8 @@
 @use '../../../../partials/_variables.scss' as *;
 @use '../../../../partials/mixins' as *;
 
-// Shine effect mixin
-@mixin shine-effect {
-  position: relative;
-  overflow: hidden;
 
-  &::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.3) 50%,
-      rgba(255, 255, 255, 0) 100%
-    );
-    transform: rotate(30deg);
-    animation: shine 3s infinite linear;
-  }
-}
 
-@keyframes shine {
-  0% {
-    transform: translateX(-100%) rotate(30deg);
-  }
-  100% {
-    transform: translateX(100%) rotate(30deg);
-  }
-}
 
 main {
   height: 100%;

diff --git a/src/partials/_mixins.scss b/src/partials/_mixins.scss
@@ -123,3 +123,33 @@
   }
 }
 
+@mixin shine-effect {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    transform: rotate(30deg);
+    animation: shine 3s infinite linear;
+  }
+}
+
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) rotate(30deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(30deg);
+  }
+}