Fix masks for firefox

d0rich · Jul 30, 2024 · 77adcdc · 77adcdc
1 parent 1b97ff6
commit 77adcdc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/apps/d0rich.me/pages/blog/[page].vue b/apps/d0rich.me/pages/blog/[page].vue
@@ -50,7 +50,7 @@ const blogQuery: QueryBuilderParams = {
         mask="owl"
         color
         outline
-        class="h-full absolute top-0 right-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
+        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
       />
     </div>
 

diff --git a/apps/d0rich.me/pages/projects/[page].vue b/apps/d0rich.me/pages/projects/[page].vue
@@ -34,7 +34,7 @@ const { data } = useAsyncData(`/projects/pages/${currentPage.value}`, () =>
         mask="spider"
         color
         outline
-        class="h-full absolute top-0 right-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
+        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
       />
     </div>
     <section v-if="data">

diff --git a/apps/d0rich.me/pages/resume/[type].vue b/apps/d0rich.me/pages/resume/[type].vue
@@ -93,7 +93,7 @@ const { data: resumeList } = useAsyncData(
           mask="wolf"
           color
           outline
-          class="h-full absolute top-0 right-0 -z-10 brightness-[25%] md:brightness-100 transition-all print:hidden"
+          class="h-full w-full flex flex-row-reverse absolute top-0 right-0 -z-10 brightness-[25%] md:brightness-100 transition-all print:hidden"
         />
       </section>
       <ContentRenderer

diff --git a/packages/nuxt-design-system/components/d/Mask.vue b/packages/nuxt-design-system/components/d/Mask.vue
@@ -52,11 +52,21 @@ function getAsset(mask: MaskType) {
 </script>
 
 <template>
-  <Transition name="mask" mode="out-in">
-    <img v-if="mask === 'spider'" :src="getAsset('spider')" alt="Spider mask" />
-    <img v-else-if="mask === 'owl'" :src="getAsset('owl')" alt="Owl mask" />
-    <img v-else-if="mask === 'wolf'" :src="getAsset('wolf')" alt="Wolf mask" />
-  </Transition>
+  <div>
+    <Transition name="mask" mode="out-in">
+      <img
+        v-if="mask === 'spider'"
+        :src="getAsset('spider')"
+        alt="Spider mask"
+      />
+      <img v-else-if="mask === 'owl'" :src="getAsset('owl')" alt="Owl mask" />
+      <img
+        v-else-if="mask === 'wolf'"
+        :src="getAsset('wolf')"
+        alt="Wolf mask"
+      />
+    </Transition>
+  </div>
 </template>
 
 <style scoped>