Fix readability on desktop

tidaltheory · Jul 16, 2022 · 167e47a · 167e47a
1 parent 6fa942f
commit 167e47a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/HeroImage.vue b/src/components/HeroImage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 function reveal(event: any) {
 	;(event.target as HTMLElement).classList.toggle('opacity-0')
+	;(event.target as HTMLElement).classList.add('opacity-80')
 }
 </script>
 
@@ -24,7 +25,7 @@ function reveal(event: any) {
 		<source srcset="/cosmos-h.69935d14.avif" type="image/avif" />
 		<source srcset="/cosmos-h.69935d14.webp" type="image/webp" />
 		<img
-			class="h-full max-h-full w-full object-cover opacity-0"
+			class="h-full max-h-full w-full object-cover opacity-0 transition"
 			src="/cosmos-h.69935d14.jpg"
 			loading="lazy"
 			decoding="async"

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -17,7 +17,7 @@ import SlugblasterText from '~/components/SlugblasterText.vue'
 			</div>
 		</div>
 
-		<div class="fixed -top-[6vw] w-full">
+		<div class="fixed -top-[6vw] w-full md:-top-[13vw]">
 			<slugblaster-text />
 		</div>
 		<div
-Original file line number
+Diff line change
@@ Expand Up @@
     			</div>
     		</div>
-    		<div class="fixed -top-[6vw] w-full">
+    		<div class="fixed -top-[6vw] w-full md:-top-[13vw]">
     			<slugblaster-text />
     		</div>
     		<div
@@ Expand Down @@