Merge pull request #18 from SkynetLabs/sky-1043

Fix text in sticky header overlapping with content below
SkynetLabs · Jun 27, 2022 · cea15c7 · cea15c7
2 parents 3259b66 + b427c1f
commit cea15c7
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 10 deletions.
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -32,7 +32,7 @@ const FixedHeader = ({ uri }) => {
   }, [setMode, mode, y, uri]);
 
   return (
-    <div ref={ref} className="fixed inset-x-0 top-0 z-50">
+    <div ref={ref} className="sticky top-0 z-50">
       <NewsHeader />
       {mode && <Navigation mode={mode} uri={uri} />}
     </div>
@@ -51,7 +51,7 @@ const Layout = ({ children, uri }) => {
   // `);
 
   return (
-    <div className="background bg-top bg-contain">
+    <div className="background bg-top bg-cover desktop:bg-contain">
       <FixedHeader uri={uri} />
       <main>{children}</main>
       <FooterNavigation />

diff --git a/src/components/Layout/Section.js b/src/components/Layout/Section.js
@@ -6,7 +6,6 @@ export const Section = ({
   children,
   className,
   width = "content",
-  first = false,
   marginBottom = true,
   marginTop = true,
   ...props
@@ -15,8 +14,7 @@ export const Section = ({
     className={classnames(
       "px-8",
       {
-        "pt-32 desktop:pt-48": marginTop && first, // + navigation offset => pt-32 desktop:pt-48
-        "pt-12 desktop:pt-24": marginTop && !first,
+        "pt-12 desktop:pt-24": marginTop,
         "pb-12 desktop:pb-24": marginBottom,
       },
       className

diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -41,7 +41,11 @@ const Navigation = ({ mode, uri }) => {
     <nav
       className={classnames("relative px-8 py-6 transition-all duration-500", {
         "bg-white border-b border-palette-200": mode === "light",
-        "bg-palette-600 bg-opacity-50": mode === "dark",
+        "bg-palette-600": mode === "dark",
+        // On mobile, when user starts scrolling we want the sticky navigation bar's background to be a solid solid, as text may overlap and become unreadable.
+        "bg-opacity-50": mode === "dark" && isWindowTop,
+        // On desktop, navigation can be semi-transparent at all times, as the text is unlikely to collide with the text below.
+        "desktop:bg-opacity-50": mode === "dark",
         "desktop:py-12": isWindowTop,
       })}
       ref={navRef}

diff --git a/src/components/NewsHeader/NewsHeader.js b/src/components/NewsHeader/NewsHeader.js
@@ -14,7 +14,7 @@ const NewsHeader = () => {
         <div className="flex justify-between">
           <Link
             {...link}
-            className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base hover:text-primary transition-colors duration-200"
+            className="text-palette-300 font-content leading-8 overflow-hidden text-base hover:opacity-90 transition-opacity duration-200"
           >
             <ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
             <span className="truncate">{title}</span>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -9,7 +9,7 @@ const IndexPage = () => {
     <>
       <Seo title="Decentralized Internet for a Free Future" />
 
-      <Section first={true}>
+      <Section>
         <div className="text-center">
           <h1 className="text-4xl desktop:text-6xl text-white">
             Decentralized Internet

diff --git a/src/pages/privacy.js b/src/pages/privacy.js
@@ -9,7 +9,7 @@ const PrivacyPolicyPage = () => (
   <>
     <Seo title="Privacy Policy" />
 
-    <Section first={true} className="bg-white">
+    <Section className="bg-white">
       <h1 className="capitalize">
         <DomainName /> Privacy Policy
       </h1>

diff --git a/src/pages/terms.js b/src/pages/terms.js
@@ -10,7 +10,7 @@ const TermsPage = () => (
   <>
     <Seo title="Terms of Use" />
 
-    <Section first={true} className="bg-white">
+    <Section className="bg-white">
       <h1 className="capitalize">
         <DomainName /> Terms of Use
       </h1>