improve navigation

packages/website/src/components/Layout/Layout.js

@@ -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];

packages/website/src/components/Layout/Section.js

@@ -1,14 +1,31 @@
 import * as React from "react";
 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
       className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })}
     >
       {children}
     </div>
-  </div>
+  </section>
 );
 
 export const SectionTitle = ({ children, className, ...props }) => (

packages/website/src/components/Navigation/Navigation.js

@@ -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 === "dark" && <LogoWhiteText className="" />}
-            {mode === "light" && <LogoBlackText className="h-8 w-auto" />}
+            {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,
             }

packages/website/src/pages/about.js

@@ -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>

packages/website/src/pages/index.js

@@ -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">
+      <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 />
-        </div>
+      </Section>
-      </div>
 
       <Section className="bg-white">
         <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>