Merge pull request #31 from barbaraperic/pr/header-link

REF: refactored logo to be a link and removed home links from nav
ipni · Apr 10, 2024 · 0b16c51 · 0b16c51
2 parents c23511b + 07cf59b
commit 0b16c51
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 import {
   disableBodyScroll,
@@ -98,7 +99,11 @@ function Header(props) {
       >
         <div className="container">
           <div className="leftWrapper">
-            <h1>CID Contact</h1>
+            <Link href="/">
+              <a aria-label="CID Contact">
+               CID Contact
+              </a>
+            </Link>
           </div>
           <div className="centerWrapper">
             <a href="https://ipfs.io/" target="_blank" rel="noreferrer">
@@ -123,15 +128,6 @@ function Header(props) {
           <div className="rightWrapper">
             <nav className="mainMenu desktop">
               <ul>
-                <li>
-                  <a
-                    href="#"
-                    className={pagePos == "home" ? "active" : undefined}
-                    onClick={(e) => props.handelScrollTo(e, "home")}
-                  >
-                    Home
-                  </a>
-                </li>
                 <li>
                   <a
                     href="#"
@@ -178,11 +174,6 @@ function Header(props) {
           onClick={toggleMenu}
         ></button>
         <ul>
-          <li>
-            <a href="#" onClick={(e) => props.handelCloseScrollTo(e, "home")}>
-              Home
-            </a>
-          </li>
           <li>
             <a href="#" onClick={(e) => props.handelCloseScrollTo(e, "about")}>
               About

diff --git a/pages/index.js b/pages/index.js
@@ -827,7 +827,7 @@ export default function Home(props) {
           //onLeave={() => handelHomeLeave(setPagePos)}
         >
           <section className="hero" ref={homeRef}>
-            <h2>Content Discovery & Routing for the Distributed Web</h2>
+            <h1>Content Discovery & Routing for the Distributed Web</h1>
             <p>
               CID Contact is an Interplanetary Network Indexer built for IPFS
               and Filecoin. <br />

diff --git a/sass/_header.scss b/sass/_header.scss
@@ -42,17 +42,18 @@
       cursor: pointer;
       text-decoration: none;
       color: $black;
-    }
-
-    h1 {
+      transition: color 0.2s ease;
+      font-size: 1.2rem;
       font-weight: 600;
-      margin: 0;
-      font-size: 18px;
       text-wrap: nowrap;
-      line-height: 0;
+
+      &:hover {
+        color: $blue;
+        transition: color 0.2s ease;
+      }
 
       @include media-breakpoint-up(lg) {
-        font-size: 25px;
+        font-size: 1.5rem;
       }
     }
   }