improve navigation

This commit is contained in:
Karol Wypchlo 2021-03-30 13:51:17 +02:00
parent 6f58745c1f
commit a863462ddf
5 changed files with 33 additions and 15 deletions

View File

@ -14,13 +14,15 @@ import FooterNavigation from "../FooterNavigation";
import { useWindowScroll } from "react-use"; import { useWindowScroll } from "react-use";
import { readableColor } from "polished"; import { readableColor } from "polished";
const minHeight = 192; // this is p-48 that is added to account for the size of the fixed navigation
const FixedHeader = () => { const FixedHeader = () => {
const { y } = useWindowScroll(); const { y } = useWindowScroll();
const ref = React.useRef(null); const ref = React.useRef(null);
const [mode, setMode] = React.useState(); const [mode, setMode] = React.useState();
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
const element = document.elementFromPoint(0, ref.current.offsetHeight); const offset = Math.max(minHeight, ref.current.offsetHeight);
const element = document.elementFromPoint(0, offset);
const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color"); const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
const color = readableColor(backgroundColor); // returns either #fff or #000 const color = readableColor(backgroundColor); // returns either #fff or #000
const calculated = { "#fff": "dark", "#000": "light" }[color]; const calculated = { "#fff": "dark", "#000": "light" }[color];

View File

@ -1,14 +1,31 @@
import * as React from "react"; import * as React from "react";
import classnames from "classnames"; import classnames from "classnames";
export const Section = ({ children, className, width = "content", ...props }) => ( export const Section = ({
<div className={classnames("px-8 py-16 desktop:py-32", className)} {...props}> children,
className,
width = "content",
marginBottom = true,
marginTop = true,
...props
}) => (
<section
className={classnames(
"px-8",
{
"pt-16 desktop:pt-32": marginTop,
"pb-16 desktop:pb-32": marginBottom,
},
className
)}
{...props}
>
<div <div
className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })} className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })}
> >
{children} {children}
</div> </div>
</div> </section>
); );
export const SectionTitle = ({ children, className, ...props }) => ( export const SectionTitle = ({ children, className, ...props }) => (

View File

@ -81,8 +81,8 @@ const Navigation = ({ mode }) => {
<div className={classnames("max-w-layout mx-auto")}> <div className={classnames("max-w-layout mx-auto")}>
<div className="flex justify-between"> <div className="flex justify-between">
<Link to="/" className={classnames("flex flex-shrink-0 items-center")}> <Link to="/" className={classnames("flex flex-shrink-0 items-center")}>
{mode === "dark" && <LogoWhiteText className="h-8 w-auto" />} {mode === "dark" && <LogoWhiteText className="" />}
{mode === "light" && <LogoBlackText className="h-8 w-auto" />} {mode === "light" && <LogoBlackText className="" />}
</Link> </Link>
<div className="ml-auto flex items-center desktop:hidden z-10"> <div className="ml-auto flex items-center desktop:hidden z-10">
<button <button
@ -119,7 +119,7 @@ const Navigation = ({ mode }) => {
<div <div
className={classnames( className={classnames(
"fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden transition-all duration-500 transform", "fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden transition-all duration-300 transform ease-in-out",
{ {
"translate-x-full": !open, "translate-x-full": !open,
} }

View File

@ -211,7 +211,8 @@ const TeamCard = ({ Image, name, position, social }) => (
const AboutPage = () => ( const AboutPage = () => (
<Layout> <Layout>
<SEO title="About" /> <SEO title="About" />
<Section className="bg-palette-100">
<Section className="bg-palette-100" marginBottom={false}>
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3"> <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
<div className="col-span-3"> <div className="col-span-3">
<h1> <h1>

View File

@ -87,7 +87,7 @@ const IndexPage = () => {
Build a <span className="text-primary border-b-2 border-white">free Internet</span> Build a <span className="text-primary border-b-2 border-white">free Internet</span>
</h1> </h1>
<p className="mt-5 font-light text-md leading-7 text-palette-300"> <p className="mt-5 font-light text-lg leading-7 text-palette-300">
<span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span> <span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span>
<span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span> <span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span>
<span className="desktop:hidden text-justify text-sm"> <span className="desktop:hidden text-justify text-sm">
@ -98,12 +98,10 @@ const IndexPage = () => {
</div> </div>
</Section> </Section>
<div className="px-8 py-16 relative"> <Section marginTop={false} marginBottom={false} className="relative">
<div className="max-w-content mx-auto"> <div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "176px" }}></div>
<div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div>
<Uploader /> <Uploader />
</div> </Section>
</div>
<Section className="bg-white"> <Section className="bg-white">
<SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle> <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>