Breaking up main stylesheet into per-component styles

src/components/Header/__snapshots__/test.js.snap

@@ -3,7 +3,6 @@
 exports[`Header rendering 1`] = `
 <header
   data-banner="testing"
-  id="main"
 >
   <h1>
     <a

src/components/Header/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
+import style from './style.css';
 import GithubIcon from 'feather-icons/dist/icons/github.svg';
 
 const Header = () => (
-  <header id="main" data-banner={ process.env.BANNER }>
+  <header className={ style.header } data-banner={ process.env.BANNER }>
     <h1>
       <a href="/">Regexper</a>
     </h1>

src/components/Header/style.css

@@ -0,0 +1,63 @@
+@import url('../../globals.css');
+
+.header {
+  background: var(--color-green) linear-gradient(to bottom,
+    var(--color-green) 0%,
+    color(var(--color-green) shade(40%)) 100%);
+  box-shadow: 0 0 1rem var(--color-black);
+  padding: 0 var(--content-margin);
+  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
+  position: relative;
+
+  &:after {
+    content: attr(data-banner);
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--header-height);
+    line-height: var(--header-height);
+    text-transform: uppercase;
+    text-align: center;
+    font-size: calc(var(--header-height) * 0.7);
+    font-weight: bold;
+    opacity: 0.2;
+  }
+
+  & h1 {
+    font-family: 'Bangers', 'cursive';
+    font-size: 4rem;
+    font-weight: normal;
+    display: inline-block;
+    margin: 0;
+    line-height: var(--header-height);
+  }
+
+  & a {
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  & ul {
+    line-height: var(--header-height);
+    position: absolute;
+    top: 0;
+    right: var(--content-margin);
+  }
+
+  & li {
+    & a:hover,
+    & a:active {
+      text-decoration: underline;
+    }
+
+    & svg {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5rem;
+      vertical-align: text-top;
+    }
+  }
+}