Merge branch 'develop' of https://github.com/ucsddesignco/stride2024 …

…into develop
ucsddesignco · Nov 7, 2024 · a0a3494 · a0a3494
2 parents d5a2133 + dba1543
commit a0a3494
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 65 deletions.
diff --git a/public/images/page-assets/badge.svg b/public/images/page-assets/badge.svg
diff --git a/public/images/page-borders/bottom-right-corner.svg b/public/images/page-borders/bottom-right-corner.svg
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -25,6 +25,7 @@ summary {
 :root {
   --folder-width: 80vw;
   --folder-height: 50vh;
+  --svg-scale: 3;
 }
 
 #page-container {
@@ -42,7 +43,6 @@ summary {
 #folder {
   position: relative;
   width: calc(var(--folder-height) * 1.411);
-  //   outline: 2px solid red;
   perspective: 800px;
 
   > img {
@@ -152,24 +152,24 @@ summary {
   right: 30%;
 }
 #folder-main-content {
-  bottom: 10%;
+  top: 50%;
   right: 27%;
 }
 #folder-polaroid {
   top: 18%;
   right: 41%;
 }
 #folder-orgs {
-  top: 15%;
-  right: 11%;
+  top: 28%;
+  left: 55%;
 }
 #folder-companies {
-  bottom: 2%;
+  top: 50%;
   right: 7%;
 }
 #folder-magnifying-glass {
-  left: 5%;
-  bottom: 5%;
+  top: 9%;
+  left: 2%;
 }
 #folder-cards {
   top: 27%;
@@ -252,39 +252,56 @@ summary {
   #cards,
   #page-folder-bottom {
     height: auto;
+    scale: calc(1 / var(--svg-scale));
+  }
+
+  .folder-asset {
+    scale: calc(1 / var(--svg-scale));
+  }
+
+  #page-folder-bottom {
+    scale: none;
   }
 
   #badge,
   #folder-badge {
-    width: calc(var(--folder-width) * 0.311);
+    width: calc(var(--folder-width) * 0.311 * var(--svg-scale));
+    transform-origin: top right;
   }
   #feather,
   #folder-feather {
-    width: calc(var(--folder-width) * 0.269);
+    width: calc(var(--folder-width) * 0.269 * var(--svg-scale));
+    transform-origin: top right;
   }
   #main-content,
   #folder-main-content {
-    width: calc(var(--folder-width) * 0.572);
+    width: calc(var(--folder-width) * 0.572 * var(--svg-scale));
+    transform-origin: top right;
   }
   #polaroid,
   #folder-polaroid {
-    width: calc(var(--folder-width) * 0.234);
+    width: calc(var(--folder-width) * 0.234 * var(--svg-scale));
+    transform-origin: top right;
   }
   #orgs,
   #folder-orgs {
-    width: calc(var(--folder-width) * 0.326);
+    width: calc(var(--folder-width) * 0.326 * var(--svg-scale));
+    transform-origin: top left;
   }
   #companies,
   #folder-companies {
-    width: calc(var(--folder-width) * 0.352);
+    width: calc(var(--folder-width) * 0.352 * var(--svg-scale));
+    transform-origin: top right;
   }
   #magnifying-glass,
   #folder-magnifying-glass {
-    width: calc(var(--folder-width) * 0.297);
+    width: calc(var(--folder-width) * 0.297 * var(--svg-scale));
+    transform-origin: top left;
   }
   #cards,
   #folder-cards {
-    width: calc(var(--folder-width) * 0.36);
+    width: calc(var(--folder-width) * 0.36 * var(--svg-scale));
+    transform-origin: top left;
   }
 
   #paper-border-top-left {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -140,7 +140,7 @@ export default function Page() {
     const tl = gsap.timeline();
     const pageElementSpreadDuration = 1;
     const pageElementSpreadEase = Power2.easeIn;
-    const assetScale = 2.5;
+    const assetScale = 2.5 / 3;
     /* folder openning animation and swaping folder elements for page elements */
     tl.to('#folder-flap', {
       rotateX: 160,
@@ -185,8 +185,8 @@ export default function Page() {
       '#main-content',
       {
         top: '50vw',
-        right: '20%',
-        scale: 2,
+        right: '0',
+        scale: 1,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
       },
@@ -195,8 +195,8 @@ export default function Page() {
     tl.to(
       '#magnifying-glass',
       {
-        top: '115vw',
-        left: '5%',
+        top: '105vw',
+        left: '55%',
         rotate: 54,
         scale: assetScale,
         duration: pageElementSpreadDuration,
@@ -207,8 +207,8 @@ export default function Page() {
     tl.to(
       '#cards',
       {
-        top: '110vw',
-        left: '30%',
+        top: '120vw',
+        left: '10%',
         scale: assetScale,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
@@ -218,10 +218,10 @@ export default function Page() {
     tl.to(
       '#companies',
       {
-        top: '175vw',
+        top: '160vw',
         right: '20%',
         rotate: -30,
-        scale: 2.6,
+        scale: 2.6 / 3,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
       },
@@ -231,9 +231,9 @@ export default function Page() {
       '#feather',
       {
         top: '240vw',
-        left: '40%',
+        left: '30%',
         rotate: 10,
-        scale: 2.6,
+        scale: 2.6 / 3,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
       },
@@ -243,8 +243,8 @@ export default function Page() {
       '#polaroid',
       {
         top: '240vw',
-        left: '5%',
-        scale: 2.7,
+        left: '-10%',
+        scale: 2.7 / 3,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
       },
@@ -253,10 +253,10 @@ export default function Page() {
     tl.to(
       '#badge',
       {
-        top: '280vw',
-        right: '5%',
+        top: '260vw',
+        right: '-20%',
         rotate: -11,
-        scale: 2.8,
+        scale: 1,
         duration: pageElementSpreadDuration,
         ease: pageElementSpreadEase
       },
@@ -265,8 +265,8 @@ export default function Page() {
     tl.to(
       '#orgs',
       {
-        top: '340vw',
-        left: '10%',
+        top: '320vw',
+        left: '20%',
         rotate: 42,
         scale: assetScale,
         duration: pageElementSpreadDuration,
@@ -435,7 +435,9 @@ export default function Page() {
   );
 
   return (
-    <div style={{ minHeight: '100vh', height: '100vh' }}>
+    <div
+      style={{ minHeight: '100vh', height: '100vh', scrollbarGutter: 'stable' }}
+    >
       <Flashlight isOn={isOn} size={size} />
       {folderOpenned && (
         <Controls isOn={isOn} setIsOn={setIsOn} setSize={setSize} />

diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
@@ -11,7 +11,6 @@ html {
   text-size-adjust: none;
   --main-padding: 1.5rem;
   --nav-padding: 1.5rem;
-  scrollbar-gutter: stable;
   // Stide Logo + Gap + DCo Logo + Padding
   --nav-height: calc(31px + 1rem + 1.5rem + 2 * var(--nav-padding));
 

diff --git a/src/components/FlashlightControls/Controls.scss b/src/components/FlashlightControls/Controls.scss
@@ -55,7 +55,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: url('../Icons/Cursor-hover.svg'), auto;
+    cursor:
+      url('../Icons/Cursor-hover.svg') 16 4,
+      auto;
   }
 
   .slider-output {
@@ -66,7 +68,9 @@
     width: 30%;
     align-content: center;
     height: 50%;
-    cursor: url('../Icons/Cursor-hover.svg'), auto;
+    cursor:
+      url('../Icons/Cursor-hover.svg') 16 4,
+      auto;
   }
 
   /* =============== Switch =============== */