feat: make Header sticky

janosh · Jul 15, 2020 · 173dbd7 · 173dbd7
1 parent 3c0f26e
commit 173dbd7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
 `