design and mobile adj

2026-08-05 13:46:35 -07:00 · 2023-06-02 00:17:23 +02:00
parent c5bf61416b
commit 536222f05f
11 changed files with 96 additions and 22 deletions
@@ -34,7 +34,7 @@ const config = {
            docs: {
              default: {
                sidebar: {
-                  hide: true,
+                  hide: false,
                },
              },
            },
@@ -15,14 +15,15 @@ import {

 <Hero size="large">
  <HeroInfo>
-    <HeroTitle>The web3 managing standard</HeroTitle>
+    <HeroTitle>The web3 managing standard.</HeroTitle>
    {/*
-            <HeroDescription>
-                Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3 applications.
-            </HeroDescription>
-            * */}
+        <HeroDescription>
+            Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3
+            applications.
+        </HeroDescription>
+        * */}
    <HeroDescription>
-      WAKU IS A DECENTRALIZED COMMUNICATIONS NETWORK.
+      Waku is a decentralized communications network
    </HeroDescription>
    <HeroActions>
      <HeroAction href="https://docs.waku.org" target="_blank">
@@ -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 . & * ',
@@ -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');
  }
 }
@@ -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;
+  }
+}
@@ -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
@@ -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)));
+  }
+}
@@ -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<HTMLDivElement> & {
  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) => {
            <directionalLight position={[-10, 10, 5]} intensity={0.3} />
            <directionalLight position={[-10, 20, 0]} intensity={1.5} />
            <directionalLight position={[100, -10, 0]} intensity={0.25} />
-            <Controls rotateSpeed={rotateSpeed} preset={preset}>
+            <Controls
+              rotateSpeed={rotateSpeed}
+              preset={preset}
+              enableZoom={mode !== 'simple'}
+            >
              <Suspense fallback={<Model url={modelUrlLow} />}>
                <Model url={modelUrlHi} />
                <AsciiRenderer {...asciiConfig} />
@@ -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 <primitive object={scene} {...props} />
 }
@@ -3,9 +3,7 @@ import { HeroModel as Model, HeroModelProps } from './HeroModel'

 export const HeroModel: React.FC<HeroModelProps> = (props) => {
  if (typeof window === 'undefined') return null
-
  return <Model {...props} />
-
  // return (
  //   <BrowserOnly>
  //     {() => {
@@ -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 {
@@ -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));
 }
@@ -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
+}