blur-bub

floki1250 · Mar 24, 2024 · 978f13b · 978f13b
1 parent e68df36
commit 978f13b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/assets/main.scss b/assets/main.scss
@@ -20,36 +20,40 @@ html {
 }
 
 html.light {
-    background: #ffffff
+    background: #ffffff;
+
+
+    //  background: linear-gradient(90deg, rgba(197, 255, 243, 0.5) 0%, rgba(255, 246, 210, 0.5) 100%);
+
+
 }
 
 html.dark {
-    background: #1f1f1f
+    background: #000000
 }
 
 
 
 .blur-blob {
-    border-radius: 9999px;
     filter: blur(60px);
-    height: 30%;
     transition-duration: 2s;
     transition-timing-function: cubic-bezier(.075, .82, .165, 1);
-    width: 30%;
-    z-index: -10
+    border-radius: 9999px;
+    z-index: -10;
+
 }
 
 
 
 .awesome-shadow {
-    box-shadow: inset 0 0 100px 20px rgba(255, 255, 255, 0.6);
+    box-shadow: inset 0 0 100px 20px rgba(255, 255, 255, 0.2);
 }
 
 
 
-@media (min-width: 768px) {
+/* @media (min-width: 768px) {
     .blur-blob {
         height: 19rem;
         width: 19rem
     }
-}
+} */
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,7 +1,15 @@
 <template>
-    <UContainer as="div">
+
+    <UContainer as="div" class="h-screen  overflow-hidden">
+        <div class="relative ">
+
+            <div class="blur-blob absolute top-16 left-16 bg-teal-200 dark:bg-teal-500  w-96 h-96 ">
+            </div>
+            <div class="blur-blob absolute top-16 right-16 bg-amber-200 dark:bg-amber-500   w-96 h-96"></div>
+        </div>
+
         <header
-            class="dark:bg-black/70  bg-white/50 border border-gray-50 dark:border-gray-500  h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg">
+            class="dark:bg-black/70  bg-white/50 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300 transition ease-in-out duration-500 m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg h-fit">
             <div class="flex justify-between p-4">
                 <div class="text-3xl font-bold">
                     <NuxtLink to="/">
@@ -17,7 +25,9 @@
         </header>
 
         <slot />
-
+        <footer class="flex justify-center content-end bg-black">
+            footer
+        </footer>
 
     </UContainer>
 </template>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,14 +1,9 @@
 <template>
   <main class="p-4 transition duration-300">
-    <div class="blur-blob absolute top-1/4 left-40 bg-teal-200 dark:bg-teal-500  ">
 
-    </div>
-    <div class="blur-blob absolute top-1/6 right-1/4 bg-amber-200 dark:bg-amber-500  ">
-
-    </div>
     <div class="flex w-full mb-2">
       <div @mouseenter="hoverSend = true" @mouseleave="hoverSend = false"
-        class="w-1/2 h-60 mr-1 hover:w-11/12 text-center flex justify-center items-center dark:bg-black/70 dark:text-white bg-white/50 text-black/70 rounded-lg backdrop-blur-lg transition-all ease-in-out duration-500 border border-gray-100 dark:border-downy-300   awesome-shadow dark:shadow-lg">
+        class="w-1/2 h-60 mr-1 hover:w-11/12 text-center flex justify-center items-center dark:bg-black/70 dark:text-white bg-white/50 text-black/70 rounded-lg backdrop-blur-lg transition-all ease-in-out duration-500 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300   awesome-shadow dark:shadow-lg">
         <NuxtLink to="/Send" class="w-full h-full flex justify-center items-center">
           <div class="flex" :class="hoverReceive ? 'rotate-90 w-fit ' : 'rotate-0'">
             <UIcon name="i-line-md-uploading-loop" class="w-10 h-10 mr-2" />
@@ -19,7 +14,7 @@
         </NuxtLink>
       </div>
       <div @mouseenter="hoverReceive = true" @mouseleave="hoverReceive = false"
-        class="w-1/2 h-60 rounded-lg ml-1 hover:w-11/12 dark:bg-black/70 dark:text-white bg-white/50 text-black/70 backdrop-blur-lg transition-all ease-in-out duration-500 border border-gray-100 dark:border-downy-300  awesome-shadow dark:shadow-lg">
+        class="w-1/2 h-60 rounded-lg ml-1 hover:w-11/12 dark:bg-black/70 dark:text-white bg-white/50 text-black/70 backdrop-blur-lg transition-all ease-in-out duration-500 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300  awesome-shadow dark:shadow-lg">
         <NuxtLink to="/Receive" class="w-full h-full flex justify-center items-center">
           <div class="flex" :class="hoverSend ? 'rotate-90 w-fit ' : 'rotate-0'">
             <UIcon name="i-line-md-downloading-loop" class="w-10 h-10 mr-2" />