From b427c1f38a11763a1bbbdddaf04239083137a526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Sun, 26 Jun 2022 11:27:32 +0200
Subject: [PATCH] Fix text in sticky header overlapping with content below

---
 src/components/Layout/Layout.js         | 4 ++--
 src/components/Layout/Section.js        | 4 +---
 src/components/Navigation/Navigation.js | 6 +++++-
 src/components/NewsHeader/NewsHeader.js | 2 +-
 src/pages/index.js                      | 2 +-
 src/pages/privacy.js                    | 2 +-
 src/pages/terms.js                      | 2 +-
 7 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 9f6b8ab..93218e2 100644
--- 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
index 766c60c..5785d6f 100644
--- 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
index 1e722ba..38ddd55 100644
--- 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
index 3b3ae80..109afbd 100644
--- 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
index 2082c1d..762602c 100644
--- 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
index 4c7e81f..c6eaa8a 100644
--- 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
index 6f33cf3..21ddf02 100644
--- 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>