From 5eb511914a1f89671e63cd3848ebd85c58a62728 Mon Sep 17 00:00:00 2001
From: Hugo Di Francesco <HugoDF@users.noreply.github.com>
Date: Mon, 20 Jan 2020 20:35:48 +0000
Subject: [PATCH 1/3] add HTML-only back to top link

---
 src/components/header.js | 2 +-
 src/pages/index.js       | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/header.js b/src/components/header.js
index bcb0466a..5828752b 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -21,7 +21,7 @@ function Header({ siteTitle, siteDescription, siteUrl }) {
         <meta name="twitter:image" content={`${siteUrl}/twitter-card.png`} />
       </Helmet>
       <div>
-        <h1>
+        <h1 id="top">
           <Link to="/">/uses</Link>
         </h1>
         <p>
diff --git a/src/pages/index.js b/src/pages/index.js
index 54059752..134b94e8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -7,6 +7,12 @@ import Layout from '../components/layout';
 import Person from '../components/Person';
 import Topics from '../components/Topics';
 
+const BackToTopLink = styled.a`
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+`;
+
 function IndexPage() {
   const { currentTag } = useContext(FilterContext);
   const { allPerson } = useStaticQuery(graphql`
@@ -43,6 +49,7 @@ function IndexPage() {
           <Person key={person.name} person={person} currentTag={currentTag} />
         ))}
       </People>
+      <BackToTopLink href="#top">&uarr; Back to top</BackToTopLink>
     </Layout>
   );
 }

From 69b156bb066ff48ff95089f492b7d95ff6e5cf82 Mon Sep 17 00:00:00 2001
From: Hugo Di Francesco <HugoDF@users.noreply.github.com>
Date: Mon, 20 Jan 2020 22:50:45 +0000
Subject: [PATCH 2/3] improve styling :+1:

---
 src/pages/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/index.js b/src/pages/index.js
index 134b94e8..8bc86f4f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -11,6 +11,9 @@ const BackToTopLink = styled.a`
   position: fixed;
   bottom: 10px;
   right: 10px;
+  background: rgba(31, 31, 31, 0.8);
+  padding: 1rem;
+  border-radius: 0.8rem;
 `;
 
 function IndexPage() {

From 193a41d1affc017f7607f3c828f9d7c091683691 Mon Sep 17 00:00:00 2001
From: Hugo Di Francesco <HugoDF@users.noreply.github.com>
Date: Tue, 21 Jan 2020 19:08:27 +0000
Subject: [PATCH 3/3] update styling

---
 src/pages/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 8bc86f4f..0519dd91 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,11 +9,13 @@ import Topics from '../components/Topics';
 
 const BackToTopLink = styled.a`
   position: fixed;
-  bottom: 10px;
-  right: 10px;
-  background: rgba(31, 31, 31, 0.8);
+  bottom: 1%;
+  right: 1%;
+  background: var(--pink);
+  cursor: pointer;
+  border-radius: 3px;
   padding: 1rem;
-  border-radius: 0.8rem;
+  transition: background-color 0.2s ease 0s;
 `;
 
 function IndexPage() {