fix: warnings

src/components/card.js

@@ -9,7 +9,7 @@ const Container = styled.div`
   margin: 0 calc(var(--spacing-x-xs) * -1) var(--spacing-y-sm);
 
   @media (max-width: 30em) {
-    &:nth-child(even) {
+    &:nth-of-type(even) {
       flex-direction: row-reverse;
     }
   }
@@ -35,7 +35,7 @@ const Link = styled(GatsbyLink)`
   }
 
   @media (max-width: 30em) {
-    &:nth-child(even) ${Container} {
+    &:nth-of-type(even) ${Container} {
       flex-direction: row-reverse;
     }
   }

src/components/header-logo.js

@@ -18,11 +18,11 @@ const Top = styled.div`
   transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
     transform 0.5s ease-in 0.5s;
 
-  path:first-child {
+  path:first-of-type {
     fill: var(--theme-color-primary);
   }
 
-  path:last-child {
+  path:last-of-type {
     fill: var(--theme-color-secondary);
   }
 
@@ -55,11 +55,11 @@ const Bottom = styled.div`
   transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
     transform 0.5s ease-in 0.5s;
 
-  path:first-child {
+  path:first-of-type {
     fill: var(--theme-color-dark);
   }
 
-  path:last-child {
+  path:last-of-type {
     fill: var(--theme-color-secondary);
   }
 

src/components/header.js

@@ -26,50 +26,3 @@ export default function Header({ image, children }) {
     </Container>
   );
 }
-/*
-
-import React, { useState } from "react";
-import styled from "@emotion/styled";
-import MenuButton from "./menu-button";
-import Nav from "./nav";
-
-const Container = styled.header`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  display: flex;
-  background-color: rgba(0, 0, 0, 0.25);
-  color: white;
-`;
-
-const Content = styled.div`
-  max-width: var(--theme-max-width);
-  flex-grow: 1;
-  margin: 0 auto;
-  padding: 0 var(--spacing-x-xs);
-`;
-
-const Menu = styled.div`
-  padding: 0 var(--spacing-x-xs);
-  @media (min-width: 40rem) {
-    display: none;
-  }
-`;
-
-export default function Header() {
-  const [navOpen, setNavOpen] = useState();
-  const handleMenuClick = () => setNavOpen(!navOpen);
-  return (
-    <Container>
-      <Content>
-        <Nav open={navOpen} setOpen={setNavOpen} />
-      </Content>
-      <Menu>
-        <MenuButton onClick={handleMenuClick} />
-      </Menu>
-    </Container>
-  );
-}
-*/

src/components/nav.js

@@ -52,7 +52,7 @@ const Heading = styled(Link)`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  opacity: ${props => (props.visible ? 1 : 0)};
+  opacity: ${props => (props.hidden ? 0 : 1)};
   transform: opacity 0.3s ease-in;
 
   svg {
@@ -60,21 +60,21 @@ const Heading = styled(Link)`
     height: 12px;
 
     &:first-of-type {
-      path:first-child {
+      path:first-of-type {
         fill: var(--theme-color-primary);
       }
 
-      path:last-child {
+      path:last-of-type {
         fill: var(--theme-color-secondary);
       }
     }
     &:last-of-type {
       transform: rotate(180deg);
-      path:first-child {
+      path:first-of-type {
         fill: var(--theme-color-dark);
       }
 
-      path:last-child {
+      path:last-of-type {
         fill: var(--theme-color-secondary);
       }
     }
@@ -110,7 +110,7 @@ export default function Nav({ data, open, setOpen }) {
     <Container open={open}>
       <Wrapper>
         <Menu>
-          <Heading to="/" visible={!open} aria-label="Back home">
+          <Heading to="/" hidden={open} aria-label="Back home">
             <LogoArrows />
             <LogoArrows />
           </Heading>