From 3ff6b14816e349f4a4e9d17f7880635d6f33a71c Mon Sep 17 00:00:00 2001 From: ukorvl Date: Thu, 3 Aug 2023 10:59:35 +0400 Subject: [PATCH] minor changes #18 --- app/layout.tsx | 2 +- app/page.tsx | 25 +++++++++---------- app/template.tsx | 1 + .../AppearInViewport/AppearInViewport.tsx | 8 +++--- components/Loader/Loader.tsx | 2 +- components/Menu/MenuDynamicBg.tsx | 2 +- components/Menu/MenuItem.tsx | 2 +- components/Menu/MenuList.tsx | 2 +- components/Menu/MenuToggle.tsx | 2 +- components/ScrollToTop/ScrollToTop.tsx | 5 +++- 10 files changed, 27 insertions(+), 24 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 9345126..d025e2e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -21,7 +21,7 @@ const bodyCn = clsx( 'bg-fixed', ); -const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24'); +const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24', 'grow'); /** * @param {{children}} props Props. diff --git a/app/page.tsx b/app/page.tsx index 2225756..8411a35 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,19 +3,17 @@ import Link from 'next/link'; import AppearInViewport from '@/components/AppearInViewport/AppearInViewport'; import MainPageVideoPlayer from '@/components/MainPageVideoPlayer/MainPageVideoPlayer'; -const containerCn = clsx('relative', 'z-10'); -const titleCn = clsx('font-light', 'text-9xl', 'text-transparent', 'bg-clip-text'); -const subtitleCn = clsx('text-2xl', 'font-light', 'tracking-widest', 'text-center'); -const titleContainerCn = clsx( - 'font-sans', - 'select-none', - 'bg-gradient-to-r', - 'from-accent3', - 'to-accent0', - 'bg-clip-text', -); -const exploreCn = clsx('text-center', 'text-2xl'); -const exploreLinkCn = clsx('tracking-widest', 'underline', 'underline-offset-2', 'leading-4'); +const containerCn = clsx('relative', 'z-10', 'flex', 'flex-col', 'items-center', 'grow'); +const titleCn = clsx('font-light', 'text-8xl'); +const subtitleCn = clsx('text-1.5xl', 'font-light', 'tracking-widest', 'text-center'); +const titleContainerCn = clsx('font-sans', 'select-none'); +const exploreCn = clsx('text-center', 'text-2xl', 'mt-auto'); +const exploreLinkCn = clsx('tracking-wider', 'animated-link'); + +const exploreLinkVariants = { + visible: {opacity: 1, y: 0, scale: 1}, + hidden: {opacity: 0, y: '2rem', scale: 0.9}, +}; /** * @returns React component. @@ -33,6 +31,7 @@ export default function Home() { , - 'variants' | 'initial' | 'whileInView' | 'viewport' | 'ref' + 'initial' | 'whileInView' | 'viewport' | 'ref' >; /** @@ -16,7 +16,7 @@ type AppearOnScreenProps = { children: ReactNode; } & SafeHTMLMotionProps; -const variants: Variants = { +const defaultVariants: Variants = { visible: {opacity: 1}, hidden: {opacity: 0}, }; @@ -28,7 +28,7 @@ const defaultTransition = {duration: 0.5, delay: 0.3}; * @returns React component. */ const AppearInViewport = forwardRef(function AppearInViewport( - {children, transition, ...rest}, + {children, variants, transition, ...rest}, ref, ) { return ( @@ -37,7 +37,7 @@ const AppearInViewport = forwardRef(functio whileInView="visible" viewport={{once: true}} transition={{...defaultTransition, ...transition}} - variants={variants} + variants={variants ?? defaultVariants} ref={ref} {...rest} > diff --git a/components/Loader/Loader.tsx b/components/Loader/Loader.tsx index 0213ee7..06affac 100644 --- a/components/Loader/Loader.tsx +++ b/components/Loader/Loader.tsx @@ -25,7 +25,7 @@ type LoaderProps = { */ export default function Loader({size = 'md', grow = false}: LoaderProps) { const containerClassName = clsx( - 'flex justify-content-center align-items-center p-4', + 'absolute flex justify-content-center align-items-center p-4', grow && 'min-h-screen w-full', ); diff --git a/components/Menu/MenuDynamicBg.tsx b/components/Menu/MenuDynamicBg.tsx index fae84f6..f3294b6 100644 --- a/components/Menu/MenuDynamicBg.tsx +++ b/components/Menu/MenuDynamicBg.tsx @@ -6,7 +6,7 @@ import useNetworkSpeed from '@/lib/shared/useNetworkSpeed'; import {MenuContext} from './MenuContext'; // eslint-disable-next-line jsdoc/require-jsdoc -const dynamicBgCn = clsx('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'z-20'); +const dynamicBgCn = clsx('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'z-30'); /** * @returns React component. diff --git a/components/Menu/MenuItem.tsx b/components/Menu/MenuItem.tsx index 722714d..b3d32d7 100644 --- a/components/Menu/MenuItem.tsx +++ b/components/Menu/MenuItem.tsx @@ -32,7 +32,7 @@ const variants = { }, }; -const itemCn = clsx('text-5xl', 'm-4', 'text-center', 'z-30', 'relative'); +const itemCn = clsx('text-5xl', 'm-4', 'text-center', 'z-40', 'relative'); /** * @param {MenuItemProps} props Props. diff --git a/components/Menu/MenuList.tsx b/components/Menu/MenuList.tsx index dabfcd4..771baae 100644 --- a/components/Menu/MenuList.tsx +++ b/components/Menu/MenuList.tsx @@ -44,7 +44,7 @@ const navCn = clsx( 'left-0', 'w-full', 'h-full', - 'z-10', + 'z-20', 'bg-gradient-to-bl from-accent0 to-alternate', 'flex', 'flex-col', diff --git a/components/Menu/MenuToggle.tsx b/components/Menu/MenuToggle.tsx index 1b933d4..ca28c3d 100644 --- a/components/Menu/MenuToggle.tsx +++ b/components/Menu/MenuToggle.tsx @@ -14,7 +14,7 @@ type MenuToggleProps = { className?: string; }; -const containerCn = clsx('absolute', 'z-30'); +const containerCn = clsx('absolute', 'z-40'); const btnCn = clsx('rounded-full'); /** diff --git a/components/ScrollToTop/ScrollToTop.tsx b/components/ScrollToTop/ScrollToTop.tsx index edaa590..f88937b 100644 --- a/components/ScrollToTop/ScrollToTop.tsx +++ b/components/ScrollToTop/ScrollToTop.tsx @@ -4,6 +4,7 @@ import {CSSProperties, useCallback, useState} from 'react'; import {m} from 'framer-motion'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faCircleArrowUp} from '@fortawesome/free-solid-svg-icons'; +import clsx from 'clsx'; import useScroll, {ScrollHandler} from '@/lib/shared/useScroll'; import isPrefersReducedMotion from '@/utils/isPrefersReducedMotion'; @@ -20,6 +21,8 @@ const variants = { hidden: {opacity: 0, y: '2rem'}, }; +const btnCn = clsx('fixed'); + /** * @param {ScrollToTopButtonProps} props Props. * @returns React component. @@ -38,7 +41,7 @@ export default function ScrollToTopButton({offset = 1000, ...position}: ScrollTo return (