diff --git a/gatsby-config.js b/gatsby-config.js index 05a565e..de9a687 100644 --- a/gatsby-config.js +++ b/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' + } + } + } ] }; diff --git a/package.json b/package.json index 44cf49a..3ce56ea 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 0000000..28f1236 --- /dev/null +++ b/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 = () => ( +
+

+ Regexper +

+ + +
+); + +export default Header; diff --git a/src/components/Header/style.module.css b/src/components/Header/style.module.css new file mode 100644 index 0000000..aa4f0ac --- /dev/null +++ b/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 + } + } +} diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 3c22f4f..5ba6cd9 100644 --- a/src/components/Layout/index.js +++ b/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 }) => { title ? `Regexper - ${ title }` : 'Regexper' } +
{ children } ; diff --git a/src/globals.css b/src/globals.css deleted file mode 100644 index 93a8084..0000000 --- a/src/globals.css +++ /dev/null @@ -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; -} diff --git a/src/globals.module.css b/src/globals.module.css new file mode 100644 index 0000000..aa230f7 --- /dev/null +++ b/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; + } +} diff --git a/src/site.css b/src/site.css index b0c6bfd..8c0c7ad 100644 --- a/src/site.css +++ b/src/site.css @@ -1,4 +1,4 @@ -@import url('./globals.css'); +@import url('./globals.module.css'); html { font-size: 62.5%; diff --git a/yarn.lock b/yarn.lock index 82ee24a..fd28925 100644 --- a/yarn.lock +++ b/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"