Merge branch '23-big-vinyl-footer' of https://github.com/HackDavis/we…

…bsite-2025 into 23-big-vinyl-footer
HackDavis · Feb 9, 2025 · 9b6f2eb · 9b6f2eb
2 parents 3eaa377 + 58bbfcc
commit 9b6f2eb
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss
@@ -56,42 +56,52 @@
 }
 
 .bigVinyl {
-    top: 0; 
+    position: absolute;
+    top: 50%;
     left: 50%;
+    width: min(calc(940 * 100vw / 1440), 940px);
     aspect-ratio: 1;
-    width: 100%;
-    max-width: calc(940 * 100vw / 1440);
     z-index: 3;
-    animation: rotateVinyl 15s linear infinite; /* Infinite smooth rotation */
-    transform-origin: center center;
+    transform-origin: center;
+    animation: rotateVinyl 15s linear infinite;
+    will-change: transform;
+
+    @supports (-webkit-appearance:none) and (not (-webkit-hyphens:none)) {
+        animation: rotateVinylChrome 15s linear infinite;
+    }
 
     @include phone {
-        max-width: 160vw;
-        width: 200%;
-        left: 50%;
-        animation: rotateVinylPhone 20s linear infinite;
+        width: 160vw;
+        animation: rotateVinylPhone 15s linear infinite;
     }
 }
 
-/* Keyframes for continuous rotation */
 @keyframes rotateVinyl {
-    to {
-        transform: translateY(-0.7 * 940 / 1440 * 100vw) rotate(0deg);
+    0% {
+        transform: translate(-50%, -65%) rotate(0deg);
     }
-    from {
-        transform: translateY(-0.7 * 940 / 1440 * 100vw) rotate(360deg);
+    100% {
+        transform: translate(-50%, -65%) rotate(360deg);
     }
 }
 
-@keyframes rotateVinylPhone {
-    to {
-        transform: translateX(44%) translateY(-0.7 * 940 / 1440 * 100vw) rotate(0deg); /* Adjusted for 2x width */
+@keyframes rotateVinylChrome {
+    0% {
+        transform: translate(-50%, -75%) rotate(0deg);
     }
-    from {
-        transform: translateX(44%) translateY(-0.7 * 940 / 1440 * 100vw) rotate(360deg);
+    100% {
+        transform: translate(-50%, -75%) rotate(360deg);
     }
 }
 
+@keyframes rotateVinylPhone {
+    0% {
+        transform: translate(-20%, -47%) rotate(0deg);  /* Moved right and down */
+    }
+    100% {
+        transform: translate(-20%, -47%) rotate(360deg);
+    }
+}
 
 .rowMiddle {
     width: 100%;