Adding Header component

gatsby-config.js

@@ -1,6 +1,15 @@
 module.exports = {
   plugins: [
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-postcss'
+    'gatsby-plugin-postcss',
+    {
+      resolve: 'gatsby-plugin-web-font-loader',
+      options: {
+        google: {
+          families: ['Bangers'],
+          text: 'Regxpr'
+        }
+      }
+    }
   ]
 };

package.json

@@ -34,11 +34,13 @@
     "gatsby": "^2.0.81",
     "gatsby-plugin-postcss": "^2.0.2",
     "gatsby-plugin-react-helmet": "^3.0.5",
+    "gatsby-plugin-web-font-loader": "^1.0.4",
     "postcss-cssnext": "^3.1.0",
     "postcss-import": "^12.0.1",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-feather": "^1.1.5",
     "react-helmet": "^5.2.0"
   }
 }

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%;

yarn.lock

@@ -4711,6 +4711,14 @@ gatsby-plugin-react-helmet@^3.0.5:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+gatsby-plugin-web-font-loader@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-web-font-loader/-/gatsby-plugin-web-font-loader-1.0.4.tgz#c50bdb0c1980110b3fd213a5be70feb2459514c3"
+  integrity sha512-3c39bX9CcsYJQFhhmTyjuMJSqpld2rX+HsTOxP9k1PKFR4Rvo3lpzBW4d1tVpmUesR8BNL6u9eHT7/XksS1iog==
+  dependencies:
+    babel-runtime "^6.26.0"
+    webfontloader "^1.6.28"
+
 gatsby-react-router-scroll@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.2.tgz#d8046ce2f3bfa52ef6ec55804007d976b0bb6bef"
@@ -8401,6 +8409,11 @@ react-error-overlay@^3.0.0:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
   integrity sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==
 
+react-feather@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.5.tgz#f7f9384c17d2d061b5b8298f46efc0e497f48469"
+  integrity sha512-hAPWatSFnhTNp9Ub96B7LMgOnWzXonA/LxqC2ANfUuc57jJocuWyO96yow2flUUDpitodh9mf6iOZzkyGYmAng==
+
 react-helmet@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
@@ -10130,6 +10143,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webfontloader@^1.6.28:
+  version "1.6.28"
+  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
+  integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
+
 webpack-dev-middleware@3.4.0, webpack-dev-middleware@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz#1132fecc9026fd90f0ecedac5cbff75d1fb45890"