Fix/underwater responsiveness (#59)

* Fixed responsiveness w/ assets and bunny * Fixed responsiveness for screen sizes > 1840 --------- Co-authored-by: Anjali Jay Jain <[email protected]>
HackDavis · Feb 11, 2025 · ca45180 · ca45180
1 parent bb5272c
commit ca45180
Showing 1 changed file with 124 additions and 0 deletions.
diff --git a/app/(pages)/_components/Underwater/Underwater.module.scss b/app/(pages)/_components/Underwater/Underwater.module.scss
@@ -1,5 +1,129 @@
 @import '@globals/styles/mixins.scss';
 
+.relative_container{
+    position: relative; 
+    overflow: hidden;
+
+    .rayContainer {
+        display: flex;
+        position: absolute;
+        align-items: flex-start;
+        justify-content: flex-start;
+        // width: 100%;
+        left: 40%;
+        transform: translateX(-50%);
+    }  
+}
+
+.container {
+    background-color: var(--sea-background);
+    padding-left: 12%;
+    padding-bottom: 15%;
+    padding-top: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image: url('/images/landing_page/Caustics.svg');
+    background-repeat: no-repeat;
+    background-size: contain; 
+    background-position: top center; 
+
+
+    .musicContainer {
+        left: 0%;
+        padding-left: 10%;
+        padding-right: 10%;
+        padding-bottom: 35%;
+        top: 0%;
+        display: flex;
+        align-items: flex;
+        justify-content: flex;
+        z-index: 1;
+        gap: 2%;
+
+        .note1 {
+            padding: 2%;
+            margin-bottom: 35%;
+            animation: float 4s infinite alternate ease-in-out;
+            animation-delay: 0s;
+        }
+
+        .note2 {
+            margin-top: 5%;
+            animation: float 4s infinite alternate ease-in-out;
+            animation-delay: 0.5s;
+        }
+
+        .note3 {
+            margin-left: 5%;
+            animation: float 4s infinite alternate ease-in-out;
+            animation-delay: 1s;
+        }
+
+        .note4 {
+            margin-top: 60%;
+            margin-left: -15%;
+            animation: float 4s infinite alternate ease-in-out;
+            animation-delay: 1.5s;
+        }
+
+        .bunnyContainer {
+            display: flex;
+
+            .bunny {
+                width: 100%;
+                padding-right: 5%;
+                padding-top: 10%;
+            }
+        }
+    } 
+
+    .imagecontainer {
+        z-index: 1;
+        display: flex;
+        flex-direction: row;
+
+        .bunnyContainer {
+            display: flex;
+
+            .bunny {
+                width: 100%;
+                padding-right: 10%;
+                padding-top: 10%;
+            }
+        }
+
+    }
+
+    .textcontainer {
+        padding: 10% 10% 5% 0%;
+        width: 40%;
+        flex-direction: column;
+        z-index: 1;
+
+
+        .text {
+            font-weight: bold;
+            line-height: 1;
+            color: var(--text-light);
+        }
+
+        .coloredtext {
+            font-weight: bold;
+            line-height: 1;
+            color: var(--highlight-blue);
+        }
+
+        p {
+            color: var(--text-light);
+            padding-top: 1rem;
+            font-weight: 400;
+            line-height: 125%; /* 22.5px */
+            letter-spacing: 0.36px;
+        }
+    }      
+}
+
 @include desktop {
     .relative_container{
         position: relative;