diff --git a/src/components/atoms/Input.jsx b/src/components/atoms/Input.jsx
new file mode 100644
index 00000000..e329e848
--- /dev/null
+++ b/src/components/atoms/Input.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import styles from './Input.module.scss'
+
+const Input = props =>
+
+export default Input
diff --git a/src/components/atoms/Input.module.scss b/src/components/atoms/Input.module.scss
new file mode 100644
index 00000000..1550d2c6
--- /dev/null
+++ b/src/components/atoms/Input.module.scss
@@ -0,0 +1,28 @@
+@import 'variables';
+
+.input {
+ display: block;
+ width: 100%;
+ padding: $padding-base-vertical $padding-base-horizontal;
+ font-size: $input-font-size;
+ font-weight: $input-font-weight;
+ line-height: $line-height;
+ color: $input-color;
+ background-color: $input-bg;
+ background-image: none; // Reset unusual Firefox-on-Android default style
+ border: 0;
+ border-radius: $input-border-radius;
+ box-shadow: none;
+ transition: all ease-in-out .15s;
+ -webkit-appearance: none; // screw you, iOS default inset box-shadow
+
+ &:hover {
+ background: lighten($input-bg, 30%);
+ }
+
+ &:focus {
+ background-color: $input-bg-focus;
+ border-color: $input-border-focus;
+ outline: 0;
+ }
+}
diff --git a/src/components/molecules/Search.jsx b/src/components/molecules/Search.jsx
new file mode 100644
index 00000000..ba2dd20f
--- /dev/null
+++ b/src/components/molecules/Search.jsx
@@ -0,0 +1,65 @@
+import React, { PureComponent, Fragment } from 'react'
+// import { Link } from 'gatsby'
+import Helmet from 'react-helmet'
+import Input from '../atoms/Input'
+import SearchIcon from '../svg/MagnifyingGlass'
+import styles from './Search.module.scss'
+
+class Search extends PureComponent {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ searchOpen: false,
+ query: '',
+ results: []
+ }
+ }
+
+ toggleSearch = () => {
+ this.setState(prevState => ({
+ searchOpen: !prevState.searchOpen
+ }))
+ }
+
+ isSearchOpen = () => this.state.searchOpen === true
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ {this.state.searchOpen && (
+
+ )}
+
+ )
+ }
+}
+
+export default Search
diff --git a/src/components/molecules/Search.module.scss b/src/components/molecules/Search.module.scss
new file mode 100644
index 00000000..69d86532
--- /dev/null
+++ b/src/components/molecules/Search.module.scss
@@ -0,0 +1,57 @@
+@import 'variables';
+
+.searchButton {
+ padding: .65rem .85rem;
+ text-align: center;
+ line-height: 1;
+ vertical-align: middle;
+ display: inline-block;
+ margin-right: $spacer / 4;
+
+ &:focus {
+ outline: 0;
+ }
+
+ svg {
+ fill: $text-color-light;
+ width: 21px;
+ height: 21px;
+ }
+
+ &:hover,
+ &:focus {
+ svg {
+ fill: $brand-cyan;
+ }
+ }
+
+ &:active {
+ svg {
+ fill: darken($brand-cyan, 30%);
+ }
+ }
+}
+
+.search {
+ position: absolute;
+ left: $spacer / 2;
+ right: $spacer / 2;
+ top: 0;
+ z-index: 10;
+ // transition: transform .3s ease-out;
+ // transform: translate3d(0, -150%, 0);
+
+ // :global(.has-search-open) & {
+ // transform: translate3d(0, 0, 0);
+ // }
+
+ input {
+ width: 100%;
+ }
+}
+
+.searchInputClose {
+ position: absolute;
+ right: $spacer / 4;
+ top: $spacer / 4;
+}
diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx
index 895c1800..510d3991 100644
--- a/src/components/organisms/Header.jsx
+++ b/src/components/organisms/Header.jsx
@@ -1,8 +1,8 @@
import React, { PureComponent } from 'react'
import { Link } from 'gatsby'
import Container from '../atoms/Container'
+import Search from '../molecules/Search'
import Menu from '../molecules/Menu'
-import Search from '../svg/MagnifyingGlass'
import styles from './Header.module.scss'
@@ -19,33 +19,9 @@ class Header extends PureComponent {
-
- {/* */}
-
- {/* */}
-
- {/* */}
diff --git a/src/components/organisms/Header.module.scss b/src/components/organisms/Header.module.scss
index c1b636ad..4e3db502 100644
--- a/src/components/organisms/Header.module.scss
+++ b/src/components/organisms/Header.module.scss
@@ -87,35 +87,3 @@
.nav {
display: inline-block;
}
-
-.search {
- padding: .65rem .85rem;
- text-align: center;
- line-height: 1;
- vertical-align: middle;
- display: inline-block;
- margin-right: $spacer / 4;
-
- &:focus {
- outline: 0;
- }
-
- svg {
- fill: $text-color-light;
- width: 21px;
- height: 21px;
- }
-
- &:hover,
- &:focus {
- svg {
- fill: $brand-cyan;
- }
- }
-
- &:active {
- svg {
- fill: darken($brand-cyan, 30%);
- }
- }
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index c08c3a12..fc62bbd7 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -99,3 +99,20 @@ $screen-xs: 30em;
$screen-sm: 40.625em;
$screen-md: 60em;
$screen-lg: 87.5em;
+
+// Forms
+/////////////////////////////////////
+
+$input-bg: rgba(#fff, .85);
+$input-bg-focus: #fff;
+$input-bg-disabled: $brand-grey-light;
+
+$input-font-size: $font-size-base;
+$input-font-weight: $font-weight-base;
+
+$input-color: $font-color-base;
+$input-color-placeholder: rgba(46, 79, 92, .3);
+
+$input-border: $brand-grey-light;
+$input-border-radius: $border-radius;
+$input-border-focus: $brand-cyan;