feat: add background image

k-urtica · Jul 10, 2024 · 4655927 · 4655927
1 parent a878427
commit 4655927
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 27 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <NuxtLayout>
+  <main class="min-h-dvh">
+    <img src="@/assets/bg.webp" class="fixed inset-0 size-full object-cover">
+    <div class="fixed inset-0 size-full bg-gradient-to-b from-[rgb(0_0_0/0.08)] to-[rgb(0_0_0/0.35)]" />
     <NuxtPage />
-  </NuxtLayout>
+  </main>
 </template>
diff --git a/src/assets/bg.webp b/src/assets/bg.webp
diff --git a/src/components/FadeUp.vue b/src/components/FadeUp.vue
@@ -6,7 +6,7 @@ withDefaults(
   }>(),
   {
     duration: '0.5s',
-    delay: '0.25s',
+    delay: '0.15s',
   },
 );
 </script>

diff --git a/src/components/GlassCard.vue b/src/components/GlassCard.vue
@@ -12,15 +12,8 @@ withDefaults(
 <template>
   <component
     :is="tag"
-    class="bg-blur rounded-2xl border border-zinc-300/20 bg-zinc-900/25 shadow-xl shadow-zinc-600/10"
+    class="rounded-2xl border border-zinc-300/20 bg-zinc-950/35 shadow-xl shadow-zinc-600/10 backdrop-blur-[6px]"
   >
     <slot />
   </component>
 </template>
-
-<style scoped>
-/* TODO: Temporary fix: https://github.com/tailwindlabs/tailwindcss/discussions/7835 */
-.bg-blur {
-  backdrop-filter: blur(8px);
-}
-</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -8,8 +8,8 @@ useHead({
 </script>
 
 <template>
-  <div class="px-4 py-16 sm:px-0 sm:py-20">
-    <GlassCard tag="article" class="relative p-6 sm:p-9">
+  <div class="flex min-h-dvh items-center px-5 py-20">
+    <GlassCard tag="article" class="mx-auto max-w-5xl p-8">
       <NavLink
         class="absolute right-0 top-0 rounded-bl-xl rounded-tr-2xl border-b border-l border-slate-300/20 bg-gray-700/50"
       />

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -36,8 +36,8 @@ const menus = [
 </script>
 
 <template>
-  <div class="flex h-screen px-5">
-    <GlassCard tag="article" class="relative m-auto w-full px-7 py-9 sm:w-112">
+  <div class="flex min-h-dvh items-center p-5">
+    <GlassCard tag="article" class="mx-auto w-full p-8 sm:w-[500px]">
       <header>
         <h1 class="mb-3 text-4xl font-bold text-slate-50">
           K
@@ -50,7 +50,7 @@ const menus = [
         </p>
       </header>
 
-      <section class="mb-3 mt-7 border-t border-slate-600">
+      <section class="mb-3 mt-6 border-t border-zinc-400/40">
         <ul class="mt-5 space-y-5">
           <li v-for="{ title, to, icon, caption } in menus" :key="title">
             <NuxtLink :to class="flex items-center justify-between gap-2 text-indigo-300">

diff --git a/src/pages/picture.vue b/src/pages/picture.vue
@@ -6,8 +6,8 @@ useHead({
 </script>
 
 <template>
-  <div class="px-4 py-16 sm:px-0 sm:py-20">
-    <GlassCard tag="article" class="relative p-6 sm:p-9">
+  <div class="flex min-h-dvh items-center px-5 py-20">
+    <GlassCard tag="article" class="mx-auto max-w-5xl p-8">
       <NavLink
         class="absolute right-0 top-0 rounded-bl-xl rounded-tr-2xl border-b border-l border-slate-300/20 bg-gray-700/50"
       />

diff --git a/src/pages/portfolio.vue b/src/pages/portfolio.vue
@@ -6,8 +6,8 @@ useHead({
 </script>
 
 <template>
-  <div class="px-4 py-16 sm:px-0 sm:py-20">
-    <GlassCard tag="article" class="relative p-6 sm:p-9">
+  <div class="flex min-h-dvh items-center px-5 py-20">
+    <GlassCard tag="article" class="mx-auto max-w-5xl p-8">
       <NavLink
         class="absolute right-0 top-0 rounded-bl-xl rounded-tr-2xl border-b border-l border-slate-300/20 bg-gray-700/50"
       />