diff --git a/packages/storyteller.io/src/App.scss b/packages/storyteller.io/src/App.scss index 007af28886..563716eec6 100644 --- a/packages/storyteller.io/src/App.scss +++ b/packages/storyteller.io/src/App.scss @@ -133,29 +133,30 @@ p { #navbar { position: fixed; z-index: 15; - transition: 0.3s all ease; + width: 100%; + min-height: auto !important; + transition: all 0.2s; + padding-top: 12px; + padding-bottom: 12px; } .nav-scroll { - margin-top: -100px; - opacity: 0; -} - -.topnav { - z-index: 10; + background-color: rgba(11, 12, 20, 0.8); + backdrop-filter: blur(10px); } .nav-link { font-size: 16px; font-weight: 500; - color: rgba($white, 0.6); + color: rgba($white, 0.7); padding: 4px 0; - margin: auto 24px; + margin: auto 20px; position: relative; text-decoration: none; + letter-spacing: 0.3px; &:focus { - color: rgba($white, 0.6); + color: rgba($white, 0.7); } &:hover { @@ -599,9 +600,9 @@ p { .card { height: 100%; padding: 28px; - border-radius: 12px; - border: 2px solid; - border-color: rgba(#4d4d66, 0.6); + border-radius: 8px; + border: 1px solid; + border-color: rgba(#4d4d66, 0.8); display: flex; align-items: center; justify-content: center; @@ -928,7 +929,7 @@ $font: montserrat, sans-serif; position: relative; height: 70%; top: 50%; - transform: translateY(-50%); + transform: fY(-50%); font-size: 50px; font-family: $font; font-weight: 400; @@ -1007,6 +1008,7 @@ $font: montserrat, sans-serif; .about-card { min-height: 185px; + line-height: 1.5; &:hover > .about-icon { transform: translate(0, -4px); @@ -1023,8 +1025,8 @@ $font: montserrat, sans-serif; .img-border { border-radius: 8px; - border: 2px solid; - border-color: rgba(#4d4d66, 0.6); + border: 1px solid; + border-color: rgba(#4d4d66, 0.8); } .img-hover { diff --git a/packages/storyteller.io/src/App.tsx b/packages/storyteller.io/src/App.tsx index d9b016b9a2..b8faa703c0 100644 --- a/packages/storyteller.io/src/App.tsx +++ b/packages/storyteller.io/src/App.tsx @@ -20,6 +20,7 @@ function App() { smooth: true, multiplier: 0.9, getDirection: true, + scrollFromAnywhere: true, mobile: { smooth: false, }, diff --git a/packages/storyteller.io/src/common/Footer.tsx b/packages/storyteller.io/src/common/Footer.tsx index c2e4b5944a..fd40495c8e 100644 --- a/packages/storyteller.io/src/common/Footer.tsx +++ b/packages/storyteller.io/src/common/Footer.tsx @@ -55,8 +55,8 @@ function Footer(props: Props) {
- Copyright © 2020 — 2023 Learning Machines, Inc. (makers - of FakeYou) + Copyright © 2020 — 2023 Storyteller AI (makers of + FakeYou)
diff --git a/packages/storyteller.io/src/common/TopNav.tsx b/packages/storyteller.io/src/common/TopNav.tsx index 1f43d47281..272ba23abb 100644 --- a/packages/storyteller.io/src/common/TopNav.tsx +++ b/packages/storyteller.io/src/common/TopNav.tsx @@ -1,5 +1,5 @@ import { useLocomotiveScroll } from "react-locomotive-scroll"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; interface Props {} @@ -7,11 +7,11 @@ function TopNav(props: Props) { const { scroll } = useLocomotiveScroll(); const [isScrolling, setIsScrolling] = useState(false); const [showTopBtn, setTopBtn] = useState(false); + const [activeLink, setActiveLink] = useState(""); - if (!!scroll) { - scroll.on( - "scroll", - (position: { scroll: { y: number } }, direction: string) => { + useEffect(() => { + if (!!scroll) { + scroll.on("scroll", (position: { scroll: { y: number } }) => { if (position.scroll.y > 50) { // console.log(">> scroll > 50"); if (!isScrolling) { @@ -35,9 +35,11 @@ function TopNav(props: Props) { setTopBtn(false); } } - } - ); - } + }); + } + }, [isScrolling, scroll, showTopBtn]); + + // Add .active class to the current button on click (highlight it) const navClassNames = isScrolling ? "container-fluid nav-scroll" @@ -65,10 +67,56 @@ function TopNav(props: Props) { } }, [mobileMenuOpen]); + // Add .active class on nav links when scrolling (highlight it) + + useEffect(() => { + if (mobileMenuOpen) { + document.body.classList.add("lock-scroll"); + } else { + document.body.classList.remove("lock-scroll"); + } + }, [mobileMenuOpen]); + + // window.addEventListener("load", () => { + // const navBtn1 = document.getElementById("nav-btn-1"); + // const navBtn2 = document.getElementById("nav-btn-2"); + // const navBtn3 = document.getElementById("nav-btn-3"); + // // const navBtn4 = document.getElementById("nav-btn-4"); + + // // Add .active class on buttons when scrolling (highlight it) + // scroll.on("call", (callValue: string) => { + // if (callValue === "home") { + // navBtn1?.classList.add("active"); + // console.log(callValue); + // } else { + // navBtn1?.classList.remove("active"); + // } + + // if (callValue === "film") { + // navBtn2?.classList.add("active"); + // console.log(callValue); + // } else { + // navBtn2?.classList.remove("active"); + // } + + // if (callValue === "music") { + // navBtn3?.classList.add("active"); + // console.log(callValue); + // } else { + // navBtn3?.classList.remove("active"); + // } + // }); + // }); + return ( <> -