From 6616fa0e027388a1a1f291879064d5f0fffad870 Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Fri, 2 Jun 2023 19:35:50 +0200 Subject: [PATCH] 3d presets and hero typography --- .../docusaurus.config.js | 10 ++- .../docusaurus-playground/src/pages/index.mdx | 15 ++-- .../mdx/HeroDescription/HeroDescription.scss | 22 ++++-- .../components/mdx/HeroModel/Controls.tsx | 9 +-- .../mdx/HeroModel/HeroModel.configs.ts | 75 ++++++++++++++++--- .../components/mdx/HeroModel/HeroModel.scss | 3 +- .../components/mdx/HeroModel/HeroModel.tsx | 7 +- .../client/components/mdx/HeroModel/index.tsx | 2 +- .../components/mdx/HeroTitle/HeroTitle.scss | 11 ++- .../mdx/ScrollToBottom/ScrollToBottom.tsx | 9 ++- .../mdx/ScrollToBottom/styles.module.scss | 8 ++ 11 files changed, 129 insertions(+), 42 deletions(-) diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 3486a26..1ff0ead 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -26,7 +26,7 @@ const config = { '@acid-info/logos-docusaurus-preset', /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */ ({ - businessUnit: 'Nimbus', + businessUnit: 'Nomos', theme: { name: 'default', options: { @@ -66,6 +66,14 @@ const config = { label: 'About', to: '/about', }, + { + label: 'Features', + href: '/#features', + }, + { + label: 'Usecases', + href: '/#usecases', + }, { label: 'Github', href: 'https://github.com/status-im', diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 3f48247..529ef7e 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -13,9 +13,9 @@ import { Box, } from '../components/mdx' - + - Durable, decentralized data storage + Ethereum network participation for everyone {/* Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3 @@ -23,12 +23,13 @@ import { * */} - Codex provides immutable, censorship-resistant data storage via a - censorship-resistant, permissionless and incentivized p2p network + Nimbus promotes client diversity and decentralization on Ethereum by + lowering participation barriers and reducing hardware overheads for + validators - - Build on Waku + + Learn more Run Waku @@ -39,7 +40,7 @@ import { modelId={'architecture04'} mode={'abstract'} rotateSpeed={0.04} - startY={'top'} + startY={'bottom'} asciiConfig={{ characters: ' + ^ ^%%%0 -a @@@ ###', }} 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 99e3ef6..c7306dc 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 @@ -7,16 +7,22 @@ z-index: -2; font-weight: 100 !important; text-shadow: 1px 1px 6px rgba(var(--lsd-surface-primary), 1); + + opacity: 0.7; + line-height: 2.3rem !important; } .mdx-hero-description--small { - margin-top: 1rem; + //margin-top: 1rem; + @include lsd.typography('h6'); + max-width: 1200px; } .mdx-hero-description--large { - font-size: 5.0625rem !important; - line-height: 5.5rem !important; - text-transform: uppercase; +} + +.mdx-hero-description--medium { + @include lsd.typography('h3'); } @include utils.responsive('lg', 'down') { @@ -25,12 +31,12 @@ } .mdx-hero-description--large { - font-size: 1.875rem !important; - line-height: 2.25rem !important; - text-transform: uppercase; + //font-size: 1.875rem !important; + //line-height: 2.25rem !important; + //text-transform: uppercase; } .mdx-hero-description--medium { - @include lsd.typography('h4'); + @include lsd.typography('subtitle1'); } } 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 840b92f..31df7e4 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 @@ -30,7 +30,7 @@ function calculateVector( target: number[], ): [number, number, number] { // Calculate the lerp factor based on the scroll position - const t = scrollY / scrollYMax + const t = Math.min(scrollY, scrollYMax) / scrollYMax const newVector = [0, 0, 0] for (let i = 0; i < 3; i++) { @@ -58,11 +58,8 @@ export const Controls = ({ const [lockOrbit, setLockOrbit] = React.useState(false) useFrame((state, delta) => { - const speed = enableRotateOnScroll - ? calcRotateSpeed(scrollY, rotateSpeed) - : rotateSpeed - - ref.current.rotation.y += delta * (isMobile() ? 0.1 * speed : speed) + ref.current.rotation.y -= + delta * (isMobile() ? 0.1 * rotateSpeed : rotateSpeed) }) useEffect(() => { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts index a9bbc35..18609c5 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts @@ -84,10 +84,10 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ ], }, abstract: { - cameraPos: [2.299135943394893, 0.8656851576290204, -0.7027825038010787], - cameraRot: [-1.916700195994318, 1.0755068798100078, 1.959565308882676], + cameraPos: [1.8397825927313005, 0.5006635210357668, -0.7112749496103248], + cameraRot: [-2.0637769654190388, 0.941591559117755, 2.1572780914058356], controlsTarget: [ - 0.6048467950344667, 0.0046384989689828805, -0.3924669053385349, + 0.7525282128865571, -0.19650999135957886, -0.33673737792715125, ], }, targetLook: { @@ -110,12 +110,30 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ ], }, abstract: { - cameraPos: [1.1470783184950044, 0.23878712525763962, 1.4621079231748313], - cameraRot: [0.0781563760261837, 0.753617521461716, -0.05353888616056665], + cameraPos: [-0.5465903796360435, 0.8773980794748312, 0.08538618930043433], + cameraRot: [ + -0.26855166005001807, -1.1713993239674987, -0.24830772343977955, + ], controlsTarget: [ - -0.10475467093508074, 0.34294485241818873, 0.1321388746243302, + -0.0544632211815667, 0.8222830795164463, -0.1148867151943581, ], }, + targetLook: { + cameraPos: [-0.08633866196975185, 1.065498410363367, 3.299441795447572], + cameraRot: [ + -0.30705338387773307, -0.04232616594886318, -0.01341603621000156, + ], + controlsTarget: [ + 0.057360484222938594, 0.03995565554668334, 0.06512362298065871, + ], + }, + // abstract: { + // cameraPos: [1.1470783184950044, 0.23878712525763962, 1.4621079231748313], + // cameraRot: [0.0781563760261837, 0.753617521461716, -0.05353888616056665], + // controlsTarget: [ + // -0.10475467093508074, 0.34294485241818873, 0.1321388746243302, + // ], + // }, }, { modelId: 'architecture06', @@ -154,13 +172,33 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ -0.03052411570622545, 1.1636581998026059, 0.23819862568800665, ], }, + // abstract: { + // cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207], + // cameraRot: [ + // 0.13523803197626882, -0.45004875426349367, 0.05912213357583956, + // ], + // controlsTarget: [ + // -0.03052411570622545, 1.1636581998026059, 0.23819862568800665, + // ], + // }, abstract: { - cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207], + cameraPos: [ + -0.18886266143333627, 1.0759713173211645, 0.49472614307040697, + ], cameraRot: [ - 0.13523803197626882, -0.45004875426349367, 0.05912213357583956, + 0.11827338438455919, -0.49355424749746096, 0.056236459481599846, ], controlsTarget: [ - -0.03052411570622545, 1.1636581998026059, 0.23819862568800665, + -0.03586918676122722, 1.1095292429426495, 0.21231853618809665, + ], + }, + targetLook: { + cameraPos: [-0.6194495673706852, 0.6791728914823414, 1.1145248759455844], + cameraRot: [ + 0.08253419059538356, -0.589296072042965, 0.045942607479927136, + ], + controlsTarget: [ + 0.09058057232790886, 0.7667301800204325, 0.05607398084523753, ], }, }, @@ -176,9 +214,22 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ ], }, abstract: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [-0.04896235033638902, 0.9472082701791184, 0.5228785650143615], + cameraRot: [ + 0.09075944802968429, -0.13324364459355229, 0.012089995097095805, + ], + controlsTarget: [ + -0.006060485975867984, 0.9762180394124839, 0.20412308284554606, + ], + }, + targetLook: { + cameraPos: [-0.09472312110216502, 0.9706051013497217, 1.2832894173829374], + cameraRot: [ + -0.19425365632872382, -0.10491000822068351, -0.020598661004321738, + ], + controlsTarget: [ + 0.031601966631050554, 0.7390204722154392, 0.1061462404432137, + ], }, }, { 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 b2dbf98..eb7eeb3 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 @@ -27,7 +27,7 @@ } .mdx-hero-model--top { - top: 0; + top: 300px; } .mdx-hero-model--bottom { @@ -46,6 +46,7 @@ .mdx-hero-model--ascii { filter: grayscale(100%); + opacity: 0.65; table { &, * { 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 9fa70ab..4f9f302 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 @@ -48,7 +48,7 @@ const useLookPreset = ( } const getInitialY = (mode: 'abstract' | 'simple'): number => { - return mode === 'abstract' ? 0 : window.innerWidth > 997 ? -100 : 0 + return mode === 'abstract' ? 0 : window.innerWidth > 997 ? 0 : 0 } export const HeroModel = (props: HeroModelProps) => { @@ -89,7 +89,8 @@ export const HeroModel = (props: HeroModelProps) => { ...(withParallelEffect ? { transform: `translateY(${ - getInitialY(mode) + scrollY * 0.1 + 0 + // getInitialY(mode) + scrollY * 0.1 }px) scale(var(--mdx-hero-model-wrapper-scale))`, } : {}), @@ -134,7 +135,7 @@ export const HeroModel = (props: HeroModelProps) => { scrollY, 0, calcScrollThreshold() * RESIZE_SPEED_FACTOR, - 1, + 0, 1, ), }} 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 353ac83..6dd5d5e 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 @@ -22,7 +22,7 @@ export const HeroModel: React.FC = (props) => { return (
, ): JSX.Element => { const { children, className, ...rest } = props - + const scrollY = useScrollY() const handleScrollToBottom = () => { const article = document.querySelector('.main-wrapper article') const secondElement = article?.children?.[1] @@ -28,7 +29,11 @@ export const ScrollToBottom = ( 20 ? styles.hide : '', + )} {...(rest as any)} > diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss index 58e043c..ee14e7f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss @@ -4,6 +4,14 @@ z-index: 100; position: absolute; background: rgb(var(--lsd-surface-primary)) !important; + transition: all 0.2s ease-in-out; + transform: translateY(0); + opacity: 1; + + &.hide { + opacity: 0; + transform: translateY(-10px); + } bottom: calc( var(--ifm-navbar-height) + var(--logos-hero-info-height) - 100vh + 16px