Adding Header component

src/components/Header/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+import GitlabIcon from 'react-feather/dist/icons/gitlab';
+
+import style from './style.module.css';
+
+const Header = () => (
+  <header className={ style.header }>
+    <h1>
+      <Link to="/">Regexper</Link>
+    </h1>
+
+    <ul className={ style.list }>
+      <li>
+        <a href="https://gitlab.com/javallone/regexper-static" rel="external noopener noreferrer" target="_blank">
+          <GitlabIcon />
+          Source on GitLab
+        </a>
+      </li>
+      <li>
+        <Link to="/privacy">Privacy Policy</Link>
+      </li>
+    </ul>
+  </header>
+);
+
+export default Header;

src/components/Header/style.module.css

@@ -0,0 +1,51 @@
+@import url('../../globals.module.css');
+
+.header {
+  display: flex;
+  align-items: center;
+  background: var(--color-green) var(--gradient-green);
+  box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
+  padding: 0 var(--content-margin);
+  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
+  position: relative;
+  color: var(--color-black);
+
+  & h1 {
+    flex-grow: 1;
+    font-family: 'Bangers', 'cursive';
+    font-size: 4rem;
+    font-weight: normal;
+    display: inline-block;
+    margin: 0;
+    line-height: var(--header-height);
+    text-shadow: 0 0 5px var(--color-green);
+  }
+
+  & a {
+    text-decoration: none;
+    display: inline-block;
+  }
+}
+
+.list {
+  composes: inline-list with-separator-right;
+  text-align: right;
+  margin: 1rem 0;
+
+  & li {
+    line-height: 2.4rem;
+
+    & a:hover,
+    & a:active {
+      text-decoration: underline;
+    }
+
+    & a svg {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5rem;
+      vertical-align: text-top
+    }
+  }
+}

src/components/Layout/index.js

@@ -2,10 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
+import Header from 'components/Header';
+
 const Layout = ({ title, children }) => <React.Fragment>
   <Helmet>
     <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
   </Helmet>
+  <Header />
   { children }
 </React.Fragment>;
 

src/globals.css

@@ -1,12 +0,0 @@
-:root {
-  --color-green: #bada55;
-  --color-brown: #6b6659;
-  --color-tan: #cbcbba;
-  --color-black: #000;
-  --color-white: #fff;
-  --color-red: #b3151a;
-  --color-orange: #fa0;
-  --color-blue: #025d8c;
-
-  --content-margin: 2rem;
-}

src/globals.module.css

@@ -0,0 +1,82 @@
+:root {
+  --color-green: #bada55;
+  --color-brown: #6b6659;
+  --color-tan: #cbcbba;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-red: #b3151a;
+  --color-orange: #fa0;
+  --color-blue: #025d8c;
+
+  --gradient-green: linear-gradient(to bottom,
+    var(--color-green) 0%,
+    color(var(--color-green) shade(40%)) 100%);
+
+  --header-height: 6rem;
+  --content-margin: 2rem;
+  --spacing-margin: 1rem;
+
+  --list-separator-width: 2ex;
+}
+
+.inline-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  & li {
+    list-style-type: none;
+    display: inline-block;
+    white-space: nowrap;
+  }
+}
+
+.with-separator-left {
+  overflow: hidden;
+
+  & li {
+    padding-right: var(--list-separator-width);
+  }
+
+  & li:before {
+    content: '//';
+    padding: 0 0.5rem;
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--list-separator-width);
+    margin-left: calc(-1 * var(--list-separator-width));
+  }
+
+  & li:last-child {
+    padding-right: 0;
+  }
+
+  & li:first-child:before {
+    visibility: hidden;
+  }
+}
+
+.with-separator-right {
+  overflow: hidden;
+
+  & li {
+    padding-left: var(--list-separator-width);
+  }
+
+  & li:after {
+    content: '//';
+    padding: 0 0.5rem;
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--list-separator-width);
+    margin-right: calc(-1 * var(--list-separator-width));
+  }
+
+  & li:first-child {
+    padding-left: 0;
+  }
+
+  & li:last-child:after {
+    visibility: hidden;
+  }
+}

src/site.css

@@ -1,4 +1,4 @@
-@import url('./globals.css');
+@import url('./globals.module.css');
 
 html {
   font-size: 62.5%;