From 173dbd79dd936cc3e02ee619cdae563fcc0ad223 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Tue, 12 May 2020 11:54:48 +0200
Subject: [PATCH] feat: make Header sticky

---
 src/components/Header/index.js   | 6 +++---
 src/components/Header/styles.js  | 6 ++++--
 src/components/TagList/styles.js | 2 +-
 src/components/Toc/styles.js     | 5 +++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 8ae4c3dc..4463a59b 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import DarkToggle from '../DarkToggle'
 import Nav from '../Nav'
 import Search from '../Search'
-import { HeaderContainer, Logo } from './styles'
+import { HeaderDiv, Logo } from './styles'
 
 const searchIndices = [
   { name: `Pages`, title: `Pages` },
@@ -11,13 +11,13 @@ const searchIndices = [
 
 export default function Header({ site }) {
   return (
-    <HeaderContainer>
+    <HeaderDiv>
       <Logo to="/" title={site.title} rel="home">
         JR
       </Logo>
       <Nav />
       <DarkToggle />
       <Search indices={searchIndices} />
-    </HeaderContainer>
+    </HeaderDiv>
   )
 }
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index 861a9098..67b55a80 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -4,12 +4,14 @@ import mediaQuery from 'utils/mediaQuery'
 
 export const HeaderDiv = styled.header`
   background: var(--color-b);
+  position: sticky;
+  top: 0;
   display: grid;
   grid-gap: calc(1em + 1vw);
-  z-index: 3;
+  z-index: 4;
   align-items: center;
   justify-content: space-between;
-  padding: 1em;
+  padding: 0.7em 1em;
   color: white;
   font-size: 1.2em;
   grid-template-columns: 1fr auto auto;
diff --git a/src/components/TagList/styles.js b/src/components/TagList/styles.js
index da37b296..1281955b 100644
--- a/src/components/TagList/styles.js
+++ b/src/components/TagList/styles.js
@@ -27,7 +27,7 @@ export const TagGrid = styled.aside`
   }
   ${mediaQuery.minPhablet} {
     position: sticky;
-    top: 2em;
+    top: 6em;
   }
   ${mediaQuery.maxPhablet} {
     display: flex;
diff --git a/src/components/Toc/styles.js b/src/components/Toc/styles.js
index cc1ec0fe..5c0d42f8 100644
--- a/src/components/Toc/styles.js
+++ b/src/components/Toc/styles.js
@@ -6,12 +6,13 @@ import mediaQuery from 'utils/mediaQuery'
 export const TocDiv = styled.aside`
   background: var(--color-background);
   padding: 0.7em 1.2em;
+  margin: 1em 0;
   border-radius: 0.5em;
   box-shadow: 0 0 1em 3px var(--color-shadow);
   height: max-content;
   max-height: 80vh;
   z-index: 3;
-  line-height: 2em;
+  line-height: 2.2em;
   right: 1em;
   max-width: 20em;
   overscroll-behavior: none;
@@ -33,7 +34,7 @@ export const TocDiv = styled.aside`
     font-size: 0.85em;
     grid-column: 4 / -1;
     position: sticky;
-    top: 2em;
+    top: 7em;
   }
 `