root
/
regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding Header component

This commit is contained in:
Jeff Avallone 2019-01-03 07:49:54 -05:00
parent 6f391264be
commit c572501d51
9 changed files with 195 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gatsby-config.js
View File

@ -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'
}
}
}
]
};

2
package.json
View File

@ -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"
}
}

28
src/components/Header/index.js Normal file
View File

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

51
src/components/Header/style.module.css Normal file
View File

@ -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
}
}
}

3
src/components/Layout/index.js
View File

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

12
src/globals.css
View File

@ -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;
}

82
src/globals.module.css Normal file
View File

@ -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;
}
}

2
src/site.css
View File

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

18
yarn.lock
View File

@ -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"