From 85b629b5819dd0565d786c00c211cd9ba64e270e Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Sun, 19 Nov 2023 15:14:34 +0000 Subject: [PATCH] fix story etc --- components/Header/Header.module.scss | 2 +- components/Layout/Layout.module.scss | 8 -------- components/Layout/Layout.stories.tsx | 5 ++--- components/Layout/Layout.tsx | 4 ++-- components/PostLayout/PostLayout.tsx | 12 +++++++----- package.json | 2 +- pages/index.tsx | 16 +++++++++------- styles/Home.module.scss | 2 +- 8 files changed, 23 insertions(+), 28 deletions(-) diff --git a/components/Header/Header.module.scss b/components/Header/Header.module.scss index 7ebd0581..f4f62db3 100644 --- a/components/Header/Header.module.scss +++ b/components/Header/Header.module.scss @@ -10,7 +10,7 @@ top: 0; transition: top 0.2s ease-in-out; width: 100%; - z-index: 1; + z-index: 2; } .nav { diff --git a/components/Layout/Layout.module.scss b/components/Layout/Layout.module.scss index fbf22001..6bacf8f6 100644 --- a/components/Layout/Layout.module.scss +++ b/components/Layout/Layout.module.scss @@ -1,14 +1,6 @@ -.container { - height: 100%; - width: 100%; -} - .heroContent { - box-shadow: inset 0 0 60px 0 black; display: flex; flex-direction: column; - position: relative; - width: 100%; } .contentContainer { diff --git a/components/Layout/Layout.stories.tsx b/components/Layout/Layout.stories.tsx index 67761ead..54d8251a 100644 --- a/components/Layout/Layout.stories.tsx +++ b/components/Layout/Layout.stories.tsx @@ -6,7 +6,7 @@ const meta: Meta = { title: 'Components/Layout', component: Layout, args: { - backgroundContent: ( + heroContent: (
= { }} /> ), - backgroundHeight: 50, + heroHeight: 50, children: (

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod @@ -28,7 +28,6 @@ const meta: Meta = { mollit anim id est laborum.

), - foregroundContent:

HELLO

, hideHeaderUntilScroll: false, metaDescription: 'The description seen on Google', metaTitle: 'The title seen on Google', diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 46ed30c2..0eebd76c 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -65,7 +65,7 @@ const Layout = forwardRef( }, [hideHeaderUntilScroll]) return ( -
+
{metaTitle} @@ -73,7 +73,7 @@ const Layout = forwardRef(
diff --git a/components/PostLayout/PostLayout.tsx b/components/PostLayout/PostLayout.tsx index fd49150b..850acd85 100644 --- a/components/PostLayout/PostLayout.tsx +++ b/components/PostLayout/PostLayout.tsx @@ -43,18 +43,20 @@ export default function PostLayout({ children, metadata }: Props) { const ctx = gsap.context(() => { gsap.from(`.${layoutStyles.heroContent}`, { duration: 0.5, - height: '100%', + height: '100vh', ease: 'back', delay: 0.1, }) gsap.to('[data-speed]', { y: (i, el) => - (1 - parseFloat(el.getAttribute('data-speed'))) * - ScrollTrigger.maxScroll(window), + -( + parseFloat(el.getAttribute('data-speed')) * + ScrollTrigger.maxScroll(window) + ), ease: 'none', scrollTrigger: { - start: 0, + start: '0', end: 'max', scrub: true, }, @@ -90,7 +92,7 @@ export default function PostLayout({ children, metadata }: Props) { const hero = ( diff --git a/package.json b/package.json index d3cb384c..d0f3d1c9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "test-e2e-ci": "start-server-and-test serve http://localhost:3000 test-e2e", "test-e2e-headed": "PWDEBUG=1 npx playwright test __test__/e2e --headed", "test-lighthouse": "lhci autorun", - "typecheck": "tsc", + "typecheck": "tsc --noEmit", "storybook": "storybook dev" }, "devDependencies": { diff --git a/pages/index.tsx b/pages/index.tsx index 608f23a6..b0afbb22 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -22,11 +22,13 @@ export default function Home({ allPosts }: Props) { const ctx = gsap.context(() => { gsap.to('[data-speed]', { y: (i, el) => - (1 - parseFloat(el.getAttribute('data-speed'))) * - ScrollTrigger.maxScroll(window), + -( + parseFloat(el.getAttribute('data-speed')) * + ScrollTrigger.maxScroll(window) + ), ease: 'none', scrollTrigger: { - start: 0, + start: '0', end: 'max', scrub: true, }, @@ -42,7 +44,7 @@ export default function Home({ allPosts }: Props) { <> {!pageLoaded && ( )} setPageLoaded(true)} alt='A nice background' src='/assets/home/hero-background.webp' @@ -60,7 +62,7 @@ export default function Home({ allPosts }: Props) { })} /> Me -
+