From ea2dc55f492a99930bb7a5ed05cc8e98d848d33b Mon Sep 17 00:00:00 2001 From: Sahil Gathe Date: Wed, 6 Nov 2024 15:01:27 -0800 Subject: [PATCH 1/2] fixed mouse hotspot --- src/components/FlashlightControls/Controls.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FlashlightControls/Controls.scss b/src/components/FlashlightControls/Controls.scss index dcfa903..bd34bd8 100644 --- 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 =============== */ From fc7caee1be1b198cfd3f2d257aaaf8f18b738754 Mon Sep 17 00:00:00 2001 From: EdwardNew Date: Wed, 6 Nov 2024 16:10:06 -0800 Subject: [PATCH 2/2] feat: fixed fuzzy svgs on safari, updated bottom right corner border asset to one with square edges, and updated badge asset to one with fixed corners --- public/images/page-assets/badge.svg | 52 +++++++++---------- .../page-borders/bottom-right-corner.svg | 4 +- src/app/Home.scss | 47 +++++++++++------ src/app/page.tsx | 39 +++++++------- src/app/styles/global.scss | 1 - 5 files changed, 80 insertions(+), 63 deletions(-) diff --git a/public/images/page-assets/badge.svg b/public/images/page-assets/badge.svg index 426c145..5840166 100644 --- a/public/images/page-assets/badge.svg +++ b/public/images/page-assets/badge.svg @@ -1,44 +1,44 @@ - + - - - - - - + + + + + + - - - + + + - - - - - + + + + + - - - - - - + + + + + - + - + + - + - + - + diff --git a/public/images/page-borders/bottom-right-corner.svg b/public/images/page-borders/bottom-right-corner.svg index ce616e8..780c103 100644 --- a/public/images/page-borders/bottom-right-corner.svg +++ b/public/images/page-borders/bottom-right-corner.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/app/Home.scss b/src/app/Home.scss index 55c1a30..035c3b5 100644 --- 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,7 +152,7 @@ summary { right: 30%; } #folder-main-content { - bottom: 10%; + top: 50%; right: 27%; } #folder-polaroid { @@ -160,16 +160,16 @@ summary { 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 index 4aa39c9..08548b7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -129,7 +129,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, @@ -174,8 +174,8 @@ export default function Page() { '#main-content', { top: '50vw', - right: '20%', - scale: 2, + right: '0', + scale: 1, duration: pageElementSpreadDuration, ease: pageElementSpreadEase }, @@ -184,8 +184,8 @@ export default function Page() { tl.to( '#magnifying-glass', { - top: '115vw', - left: '5%', + top: '105vw', + left: '55%', rotate: 54, scale: assetScale, duration: pageElementSpreadDuration, @@ -196,8 +196,8 @@ export default function Page() { tl.to( '#cards', { - top: '110vw', - left: '30%', + top: '120vw', + left: '10%', scale: assetScale, duration: pageElementSpreadDuration, ease: pageElementSpreadEase @@ -207,10 +207,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 }, @@ -220,9 +220,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 }, @@ -232,8 +232,8 @@ export default function Page() { '#polaroid', { top: '240vw', - left: '5%', - scale: 2.7, + left: '-10%', + scale: 2.7 / 3, duration: pageElementSpreadDuration, ease: pageElementSpreadEase }, @@ -242,10 +242,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 }, @@ -254,8 +254,8 @@ export default function Page() { tl.to( '#orgs', { - top: '340vw', - left: '10%', + top: '320vw', + left: '20%', rotate: 42, scale: assetScale, duration: pageElementSpreadDuration, @@ -428,7 +428,8 @@ export default function Page() { style={{ minHeight: '100vh', overflowX: 'hidden', - scrollbarWidth: 'none' + scrollbarWidth: 'none', + scrollbarGutter: 'stable' }} > diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss index f9c2f3f..a6185b5 100644 --- 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));