diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 867ad8f..bd14bb3 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -34,7 +34,7 @@ const config = { docs: { default: { sidebar: { - hide: true, + hide: false, }, }, }, diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 8dd1fe1..760d02c 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -15,14 +15,15 @@ import { - The web3 managing standard + The web3 managing standard. {/* - - Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3 applications. - - * */} + + Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3 + applications. + + * */} - WAKU IS A DECENTRALIZED COMMUNICATIONS NETWORK. + Waku is a decentralized communications network @@ -37,7 +38,7 @@ import { modelUrlHi="/hero/bust-hi.glb" modelUrlLow="/hero/bust-lo-draco.glb" modelId={'bust'} - mode={'simple'} + mode={'abstract'} rotateSpeed={0.04} asciiConfig={{ characters: ' w . a . k . u . & * ', diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss index 29bb2ad..e39c25f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss @@ -13,16 +13,23 @@ } .mdx-hero-description--large { - // font-size: 5.0625rem !important; - // line-height: 5.5rem !important; + font-size: 5.0625rem !important; + line-height: 5.5rem !important; + text-transform: uppercase; } @include utils.responsive('lg', 'down') { .mdx-hero-description { - @include lsd.typography('h3'); + @include lsd.typography('subtitle1'); } .mdx-hero-description--large { font-size: 1.875rem !important; + line-height: 2.25rem !important; + text-transform: uppercase; + } + + .mdx-hero-description--medium { + @include lsd.typography('h4'); } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss index 19ffee5..4220c64 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss @@ -1,3 +1,5 @@ +@use '../../../css/utils'; + .mdx-hero-info { padding: var(--logos-hero-info-padding-bottom) 0 var(--logos-hero-info-padding-bottom) 0; @@ -15,3 +17,9 @@ .mdx-hero-info--large { } + +@include utils.responsive('lg', 'down') { + :root { + --logos-hero-info-height: 340px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx index 97f20d6..a0eb858 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx @@ -5,6 +5,7 @@ import { useScrollY } from '../../../lib/useScrollY' import { useFrame, useThree } from '@react-three/fiber' import { calcRotateSpeed } from './HeroModel.utils' import { OrbitControls } from '@react-three/drei' +import { isTouchDevice } from '../../../lib/ui.utils' class Vector3 { x: number @@ -91,6 +92,15 @@ export const Controls = ({ }, [camera]) useEffect(() => { + if (isTouchDevice()) { + controls.current.minPolarAngle = Math.PI / 2 + controls.current.maxPolarAngle = Math.PI / 2 + } + }, []) + + useEffect(() => { + if (!enableZoom) return + const [deltaX, deltaY, deltaZ] = calculateCameraPosition(scrollY) // Add the deltas to the initial positions diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss index 165c2a8..5b1e80a 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss @@ -1,7 +1,16 @@ +@use '../../../css/utils'; + .mdx-hero-model { + --mdx-hero-model-wrapper-scale: 1; + width: 100vw; transform: translateX( - calc(-1 * calc(calc(100vw - 1440px + calc(var(--content-padding)) * 2) / 2)) + calc( + -1 * calc(calc( + 100vw - var(--container-max-width) + calc(var(--content-padding)) * + 4 + ) / 2) + ) ); position: absolute; top: calc(var(--logos-hero-info-height) - 10px); @@ -51,3 +60,22 @@ bottom: -0; left: 0; } + +@include utils.responsive('lg', 'down') { + .mdx-hero-model--simple { + --mdx-hero-model-wrapper-scale: 0.8; + } + .mdx-hero-model { + transform: unset; + } + .mdx-hero-model--abstract { + transform: translate(-20px, 0px); + } +} + +@media (max-width: 1440px) and (min-width: 992px) { + .mdx-hero-model { + width: calc(100vw + var(--content-padding)); + transform: translateX(calc(-3 * calc(var(--content-padding) + 0px))); + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx index e4951c5..14d7261 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx @@ -1,6 +1,6 @@ -import React, { Suspense, useMemo, useRef } from 'react' +import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react' import { Canvas, useFrame } from '@react-three/fiber' -import { useGLTF } from '@react-three/drei' +import { useGLTF, useProgress } from '@react-three/drei' import clsx from 'clsx' import { @@ -14,8 +14,9 @@ import { AsciiConfigs, LookPresetItemValues } from '../../../types/ui.types' import './HeroModel.scss' import { AsciiRenderer } from './Ascii' import { Controls } from './Controls' -import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils' +import { calcScrollThreshold, isMobile, mapFloat } from '../../../lib/ui.utils' import { useScrollY } from '../../../lib/useScrollY' +import { useWindowSize } from 'react-use' export type HeroModelProps = React.HTMLAttributes & { modelUrlHi: string @@ -45,7 +46,7 @@ const useLookPreset = ( } const getInitialY = (mode: 'abstract' | 'simple'): number => { - return mode === 'abstract' ? 0 : -200 + return mode === 'abstract' ? 0 : window.innerWidth > 997 ? -200 : -140 } export const HeroModel = (props: HeroModelProps) => { @@ -85,7 +86,9 @@ export const HeroModel = (props: HeroModelProps) => { style={{ ...(withParallelEffect ? { - transform: `translateY(${getInitialY(mode) + scrollY * 0.1}px)`, + transform: `translateY(${ + getInitialY(mode) + scrollY * 0.1 + }px) scale(var(--mdx-hero-model-wrapper-scale))`, } : {}), }} @@ -106,7 +109,11 @@ export const HeroModel = (props: HeroModelProps) => { - + }> @@ -131,9 +138,12 @@ export const HeroModel = (props: HeroModelProps) => { ) } -function Model({ url, ...props }) { +function Model({ url, onMount = () => {}, ...props }) { // useGLTF suspends the component, it literally stops processing const { scene } = useGLTF(url) as any + useEffect(() => { + onMount() + }, []) // By the time we're here the model is gueranteed to be available return } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx index 8e367da..ce6d0e7 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx @@ -3,9 +3,7 @@ import { HeroModel as Model, HeroModelProps } from './HeroModel' export const HeroModel: React.FC = (props) => { if (typeof window === 'undefined') return null - return - // return ( // // {() => { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss index 0e7e830..afa05b5 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss @@ -17,7 +17,8 @@ @include utils.responsive('lg', 'down') { .mdx-hero-title { - @include lsd.typography('h3'); + @include lsd.typography('h4'); + text-transform: uppercase; } .mdx-hero-title--large { diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 59341d2..16578d0 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -255,6 +255,12 @@ body { background-color: rgb(var(--lsd-surface-primary)); } +html, +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + svg * { fill: rgb(var(--lsd-text-primary)); } diff --git a/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts b/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts index b39a78a..4ebe94d 100644 --- a/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts +++ b/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts @@ -31,3 +31,8 @@ export const generateTextShadow = (steps: number): string => { } return shadows } + +export const isMobile = () => { + if (typeof window === 'undefined') return false + return window.innerWidth < 997 +}