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 { 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 { y } = useWindowScroll();
const ref = React.useRef(null);
const [mode, setMode] = React.useState();
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 color = readableColor(backgroundColor); // returns either #fff or #000
const calculated = { "#fff": "dark", "#000": "light" }[color];

View File

@ -1,14 +1,31 @@
import * as React from "react";
import classnames from "classnames";
export const Section = ({ children, className, width = "content", ...props }) => (
<div className={classnames("px-8 py-16 desktop:py-32", className)} {...props}>
export const Section = ({
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
className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })}
>
{children}
</div>
</div>
</section>
);
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="flex justify-between">
<Link to="/" className={classnames("flex flex-shrink-0 items-center")}>
{mode === "dark" && <LogoWhiteText className="h-8 w-auto" />}
{mode === "light" && <LogoBlackText className="h-8 w-auto" />}
{mode === "dark" && <LogoWhiteText className="" />}
{mode === "light" && <LogoBlackText className="" />}
</Link>
<div className="ml-auto flex items-center desktop:hidden z-10">
<button
@ -119,7 +119,7 @@ const Navigation = ({ mode }) => {
<div
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,
}

View File

@ -211,7 +211,8 @@ const TeamCard = ({ Image, name, position, social }) => (
const AboutPage = () => (
<Layout>
<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="col-span-3">
<h1>

View File

@ -87,7 +87,7 @@ const IndexPage = () => {
Build a <span className="text-primary border-b-2 border-white">free Internet</span>
</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">decentralized storage to users, creators and app developers.</span>
<span className="desktop:hidden text-justify text-sm">
@ -98,12 +98,10 @@ const IndexPage = () => {
</div>
</Section>
<div className="px-8 py-16 relative">
<div className="max-w-content mx-auto">
<div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div>
<Section marginTop={false} marginBottom={false} className="relative">
<div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "176px" }}></div>
<Uploader />
</div>
</div>
</Section>
<Section className="bg-white">
<SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>