✨ glass effect added

yuancong-liu · Apr 29, 2024 · d8acb7c · d8acb7c
1 parent 69b3e24
commit d8acb7c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/app/and/index.module.scss b/src/app/and/index.module.scss
@@ -23,10 +23,11 @@
   }
 
   > .rank-title {
+    @extend %glass-effect;
+
     grid-column: 3 / 11;
     padding: 20px 0;
     overflow: hidden;
-    border: 1px solid #fff2;
     border-radius: 20px;
 
     @include sp {

diff --git a/src/app/portfolio/index.module.scss b/src/app/portfolio/index.module.scss
@@ -5,13 +5,6 @@
   border-radius: $padding;
 }
 
-%glass-effect {
-  background: utils.$color-pink-bd;
-  backdrop-filter: blur(10px);
-  border: 1px solid #fff2;
-  box-shadow: 0 0 20px 0 utils.$color-pink-bd;
-}
-
 .content-wrapper {
   display: grid;
   grid-template-columns: repeat(12, 1fr);

diff --git a/src/styles/placeholders.scss b/src/styles/placeholders.scss
@@ -1,4 +1,13 @@
+@use './utils.scss';
+
 %center-items-grid {
   display: grid;
   place-items: center;
-}
+}
+
+%glass-effect {
+  background: utils.$color-pink-bd;
+  backdrop-filter: blur(10px);
+  border: 1px solid #fff2;
+  box-shadow: 0 0 20px 0 utils.$color-pink-bd;
+}