header & footer

src/App.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import FadeIn from './components/atoms/FadeIn'
 import Routes from './Routes'
+import Footer from './components/molecules/Footer'
 
 const App = () => (
   <FadeIn>
-    <div className="app">
+    <div>
       <Routes />
+      <Footer />
     </div>
   </FadeIn>
 )

src/components/molecules/Footer.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import meta from '../../data/meta.json'
+import './Footer.css'
+
+const Footer = () => {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="footer">
+      <small>© {year} {meta.title} &mdash; All Rights Reserved</small>
+    </footer>
+  )
+}
+
+export default Footer

src/components/molecules/Footer.scss

@@ -0,0 +1,12 @@
+@import 'variables';
+
+.footer {
+    padding: $spacer;
+    text-align: center;
+    color: $brand-grey-light;
+
+    &,
+    small {
+        font-size: $font-size-mini;
+    }
+}

src/components/molecules/Header.js

@@ -1,18 +1,31 @@
 import React from 'react'
+import Link from 'react-router-dom/Link'
+import PropTypes from 'prop-types'
 import Social from './Social'
 import './Header.css'
 import meta from '../../data/meta.json'
 
-const Header = () => (
-  <header className="header">
-    <hgroup className="name">
+class Header extends React.Component {
+  render() {
+    const minimal = this.props.minimal
+    const classes = (minimal ? 'header header--minimal' : 'header')
+
+    return (
+      <header className={classes}>
+        <Link className="header__name" to="/">
           <span className="header__logo">␥</span>
           <h1 className="header__title">{meta.title}</h1>
           <p className="header__description">{meta.tagline}</p>
-    </hgroup>
+        </Link>
 
         <Social />
       </header>
-)
+    )
+  }
+}
+
+Header.propTypes = {
+  minimal: PropTypes.bool
+}
 
 export default Header

src/components/molecules/Header.scss

@@ -1,16 +1,39 @@
 @import 'variables';
 
 .header {
-    padding: $spacer / 2;
-    min-height: calc(100vh - #{$spacer});
+    padding: $spacer;
+    min-height: calc(100vh - #{$spacer * 3});
     display: flex;
     align-content: center;
     flex-wrap: wrap;
-
-    .name,
-    .social {
-        width: 100%;
     text-align: center;
+}
+
+.header--minimal {
+    min-height: 0;
+    text-align: left;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    justify-content: space-between;
+    margin-bottom: $spacer;
+
+    .social {
+        margin-top: 0;
+        text-align: right;
+        justify-content: flex-end;
+    }
+
+    .social__link {
+        width: 1rem;
+        height: 1rem;
+        padding: $spacer / 8;
+        margin-left: $spacer / 4;
+        margin-right: $spacer / 4;
+
+        .icon {
+            width: .75rem;
+            height: .75rem;
+        }
     }
 }
 
@@ -20,20 +43,55 @@
     font-size: 3rem;
     color: $brand-grey-light;
     margin-bottom: $spacer / 2;
+
+    .header--minimal & {
+        margin: 0;
+        display: inline-block;
+        font-size: 2rem;
+        margin-top: -2rem;
+        margin-right: $spacer / 4;
+    }
 }
 
 .header__title,
 .header__description {
     display: inline-block;
     margin-bottom: 0;
+    transition: .2s ease-out;
 }
 
 .header__title {
     font-size: $font-size-h3;
     margin-right: $spacer / 2;
     color: $brand-main;
+
+    .header--minimal & {
+        font-size: $font-size-h4;
+    }
 }
 
 .header__description {
     font-size: $font-size-large;
+    color: $brand-grey;
+
+    .header--minimal & {
+        font-size: $font-size-small;
+    }
+}
+
+.header__name {
+    width: 100%;
+    pointer-events: none;
+
+    .header--minimal & {
+        pointer-events: all;
+    }
+
+    &:hover,
+    &:focus {
+        .header__title,
+        .header__description {
+            color: $brand-cyan;
+        }
+    }
 }

src/components/molecules/Social.scss

@@ -2,6 +2,9 @@
 
 .social {
     margin-top: $spacer;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
 
 .social__link {
@@ -10,7 +13,9 @@
     background: $brand-grey-dimmed;
     padding: $spacer / 4;
     text-align: center;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 1.35rem;
     height: 1.35rem;
     box-shadow: 0 3px 5px rgba($brand-main, .1), 0 5px 16px rgba($brand-main, .1);

src/components/organisms/Project.js

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
+import Header from '../molecules/Header'
 import Content from '../atoms/Content'
 
 const Project = ({ project }) => {
@@ -9,6 +10,8 @@ const Project = ({ project }) => {
   const links = project.links
 
   return (
+    <Fragment>
+      <Header minimal />
       <main className="screen screen--project">
         <Content>
           <h1>{title}</h1>
@@ -25,6 +28,7 @@ const Project = ({ project }) => {
           </ul>
         </Content>
       </main>
+    </Fragment>
   )
 }
 

src/components/pages/Home.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import Link from 'react-router-dom/Link'
 import LazyLoad from 'react-lazyload'
 import Header from '../molecules/Header'
@@ -9,10 +9,11 @@ import './Home.css'
 class Home extends Component {
   render() {
     return (
-      <main className="screen screen--home">
-
+      <Fragment>
         <Header />
 
+        <main className="screen screen--home">
+
           <div className="projects">
               {projects.map(project => (
                 <LazyLoad key={project.slug} height={700} offset={200} once>
@@ -31,6 +32,7 @@ class Home extends Component {
           </div>
 
         </main>
+      </Fragment>
     )
   }
 }

src/components/pages/Home.scss

@@ -9,6 +9,8 @@
     min-height: 100vh;
     position: relative;
     background-color: $brand-grey;
+    margin-left: -$spacer;
+    margin-right: -$spacer;
 }
 
 .project__title {

src/data/projects.json

@@ -7,7 +7,7 @@
     "links": {
       "Link": "https://oceanprotocol.com"
     },
-    "description": ""
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
   },
   {
     "title": "IPDB",
@@ -18,7 +18,7 @@
       "Link": "https://ipdb.io",
       "GitHub": "https://github.com/ipdb/website"
     },
-    "description": "Bla Bla Bla"
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
   },
   {
     "title": "9984 >> Summit 2017",

src/index.scss

@@ -97,5 +97,5 @@ svg {
 }
 
 .screen {
-    padding: $spacer / 2 0;
+    padding: $spacer;
 }